JavaScript 입문 (끝말잇기 게임) : 두번째 제시어부터 코딩하기 (2) - 틀린 단어 판단 및 다음 순서로 넘어가기

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

 

지난시간에 이어 끝말잇기 게임에 대한 순서도를 만들고 각 상황에 대해 공부를 하고 있습니다. 

한가지 확실한 것은 이러한 과정을 노트에 적어서 머리속으로 이해를 하던지 블로그를 활용하여 연습하면서 기록을 남긴다던지 하면 확실히 좀 더 자기것이 되는 느낌을 가질 수 있습니다. 

 

또한, 이런 저런 시도를 해 보면서 자바스크립트가 반응하는 내용을 느끼면 더욱 도움이 될 수 있다고 경험을 통해 증명이 되는 것 같습니다. 

 

이제는 올바른 단어를 입력했을 경우 그 다음으로 넘어가는 내용을 공부해 보고자 합니다. 

 

▒ 다음사람 표시 

 

올바른 단어를 입력하면 다음사람으로 넘어가서 대기를 해야 하는데 다음 그림과 같이  제시어는 변경되어 있는데 참가자 순서가 1번째로 그대로 되어 있습니다. 

1번째를 2번째로 그 후 3번째로 다시 1번째로 돌아와야 합니다. 순서도를 잘 활용하여 수정해야 합니다. 다음사람에 대한 순서도는 다시 아래와 같이 세분화됩니다. 

 

즉, 현재의 순서를 파악하는게 제일 중요한데 현재시점과 전체참가자수와 비교를 하면 쉽게 이해를 할 수 있습니다. 이를 코딩에 반영하겠습니다. 

 

현재순서와 다음순서에 대한 변수를 만들어 줍니다. 이렇게 순서도에서 필요하다고 판단되는 사항등은 항상 '변수'라는 개념을 생각하면 될 것 같고, 최초 시작되는 변수는 const를 그 후 반영에 필요한 진짜 변수는 let으로 사용합니다. 

정확히 말하면 최초 시작되는 변수는 변수가 아닌 상수입니다. 기준이라는 개념이지요. 

 

1. 참가자 순서 확인 

 

최초 참가자를 지정하기 위하여 id를 order라고 <span>태그를 사용했습니다. 

 

2. 상수와 변수 선언

 

상수를 선언하고 선택하고 새로운 순서에 대한 변수를 선언합니다. 새로운순서는 곧 현재순서로 됩니다. 

 

3. 현재순서 + 1 > 참가자수에 대한 판단 (Yes or No)

 

역시 여기는 if ~ else 문으로 구성이 되야 되겠군요. 제시어가 비워있지 않은 경우 및 올바른 제시어를 입력했을때 다음사람으로 넘어가는 경우입니다. 

 

순서도에서 if(현재순서 + 1 > 참가자수) 인 경우 True 면 1번째 순서로 가고 False 면 현재참가자수에 1씩 더하면 됩니다.

다음과 같이 코딩을 하면 될 것 같습니다. 

 

이 경우는 1번째 제시어에서도 다음사람으로 넘어가고 그 이후 올바른 단어를 입력할때도 필요합니다. 

 

▶최초 제시어에서 다음 순서로 넘어가기

 

현재순서(nextOrder)와 최초순서(order)의 개념을 잡아야 합니다. 새로운 순서는 반영이 되어 현재순서로 됩니다. 숫자로 더해지기도 해야 하기때문에 자료형을 숫자형으로 바꿉니다. 

 

현재순서가 참가자수보다 크면 다음순서는 1번째 참가자로 와야합니다. 아니면 다음순서는 현재순서에서 1을 더합니다. 

 

웹 브라우저를 실행해보죠.

첫번째 제시어로 대한민국을 두번째로 국가를 세번째는 가수를 입력해 보았습니다. 다음과 같이 나옵니다. 

 

▶ 최초를 제외한 순서에서 다음사람으로 넘어가기

 

위 그림처럼 3번째 참가자가 되어야 하는데 2번째 참가자라고 바뀌지 않았습니다. 이는 다음 순서도에서 제시어가 비어있지 않고 올바른 끝말잇기의 조건에서 다음 사람으로 넘어가는 경우가 필요합니다. 

이는 다음코딩에 똑같이 추가하면 됩니다. 

다시 브라우저를 실행해 보겠습니다. 대한민국 - 국가 - 가수의 순서로 그런데 현재순서가 2번째 이상으로 바뀌지 않고 있습니다. 

어렵지만 첫번째 변수를 선언한게 잘못된 듯 합니다. textContent를 숫자형으로 안에서 바꿔야 될 듯 합니다. 

제시어가 비어있는 경우

제[시어가 비어있지 않은 경우

 

그리고 다시 실행해보니 잘 되네요.

▶ 이것 저것 시험해 보기

 

그런데 제시어가 비어있는 1번째 참가자에 코딩을 반영했는데 필요없을 것 같습니다. test를 해봐야겠어요. 그렇습니다. 제로초에서는 이게 수정이 되었는지 모르겠지만 1번째 참가자는 사실 if문만으로 가능합니다. 

order에 대한 부분 필요없음

제시어가 없는게 1번째 참가자이지만 '대한민국'을 입력하는 순간 '비어있지 않다'로 넘어 가기 때문입니다. 

 

변수를 최초 선언하지 않고 코딩하는 과정에서 사용되는 경우는 일단 해당되는 내용에서만 작동되어야 하기때문에 같은 자리에 변수를 선언하고 진행한다정도로 이해하고 갈려고 합니다. (이 부분은 반드시 증명해 보고 싶은 내용인데 나중에 알게 되겠죠..)

 

누군가 고수가 방문하여 속 시원하게 이야기 해줬으면 하는 바램입니다 .

 

워낙 기초가 없어서 하루종일 걸렸습니다. 그러더라도 이렇게 노력한다면 반드시 좋은 프로그램을 만들 수 있을 것 같아요.

 

다음 시간에는 마무리 및 좀 더 편하게 해보고자 여기저기 구글링을 해서 코딩을 해 보겠습니다.