JavaScript 입문 (끝말잇기 게임) : 두번째 제시어부터 코딩하기 (1) - 올바른 단어 판단

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

순서도상 첫번째 제시어를 입력하는 사람의 특징을 보면 

① 제시어가 한번도 나오지 않았다 :  변수 만들고 if ~ else문을 떠올린다. 

② 제시어를 화면에 나타내는 <div><span>태그를 선택하고 textCount로 제시어를 입력해 준다. 

③ input창의 내용 value는 clear해준다. 

 

참고로 새로운 제시어를 말하고 input창에 저장하는 콜백함수의 역할은 e.target.value라고 기억해 두자구요. 아래 그림의 input에 대한 정의는 꼭 기억해 두는게 좋습니다. 

 

 

이제는 순서도에서 두번째 제시어를 말하는 사람 (맞으면 계속적으로 끝말잇기가 이어져 가고 틀리면 게임끝)에 대한 코딩을 해야될 시간입니다. 제시어가 비워있지 않다는 것은 else문을 작성하는 것과 같습니다. 순서도로 보면 다음과 같습니다. 

 

 

위 순서도를 보면 조금 복잡하긴해도 스스로 이해가 될 수 있어야 합니다. 

 

그리고 첫번째 제시어를 시작하는 사람에 대한 코딩을 위해 정의되는 문장을 왜 제시어가 비어 있는가라고 정의했는지 이해하고 머리속에 훈련을 해야합니다. 이는 첫번째 참가자의 정의를 어떤 형태로 기계인 컴퓨터가 받아 들일수 있는지 고민에 고민을 해야되는 포인트라고 느껴집니다.  

 

지난시간 첫번째 사람과 첫번째 제시어에 대한 공부를 했는데 위 그림의 ① ~ ③ 순서로 진행이 됩니다. 그리고 '대기'상태로 가지요. 그 후 ④번으로 가게되는데 ①번으로 가기전에 바로 ④번으로 갈수도 있습니다. 즉, 더 세밀히 순서로를 만들어 갈 수 있는겁니다. 이 부분은 계속 훈련을 쌓아나갈 수 밖에 없을 것 같습니다. 

 

▒ 올바른 단어 판단

 

1. 제시어의 끝과 신규단어의 첫번째 기준

 

이제는 두번째 단어에서 2가지 경우가 생길수 있습니다. 두번째 단어가 올바른지 아닌지에 대한 문제로 역시 if ~ else문을 이용하면 될 듯 합니다. 

순서도에서 보면 다음과 같이 if ~ else문을 생각할 수 있습니다. 

 

 

일단 else문내에 if문을 다시 세팅해 봅니다. 제시어가 올바른 가는 다음과 같이 코딩하면 되겠죠. 배열을 이용합니다. 

배열을 이용하여 끝글자는 length-1로서 단어의 첫글자인 [0]과 비교하면 됩니다. 

 

2. 제시어의 끝글자와 신규단어의 첫글자가 같으면 (제시어가 올바른가)

 

순서도상 제시어가 올바르면 입력한 단어가 다시 제시어가 됩니다.

 

이는 newWord가 word로 된다는 이야기고 

 

다음 사람으로 넘어가서 대기합니다.  

 

이는 제시어가 id가 word인 장소에 표시되는 textContent기능을 사용하고 입력창이 비워지는 input.value기능을 사용합니다.  

 

다음처럼 지난시간 만들었던 코딩과 같습니다. 

이어서 다음시간에는 제시어가 올바른 경우 1번째에서 2번째로 넘어가는 경우와  2번째 이상에서 올바른 제시어가 인식되어 다음사람으로 넘어가는 코딩을 순서도와 같이 고민해 보겠습니다.