쿵쿵따 게임 만들기 (html / js)

간단하게 쿵쿵따 게임을 만들어 보려고 합니다.

절차

프로그래밍 사고

시작 -> 몇명이서 '쿵쿵따'를 진행하는지
-> 첫 번째 사람이 제시어를 입력한다
-> 버튼을 누른다
-> 제시어가 3글자가 맞는지 확인한다
-> 틀렸으면 ? 다시 진행, alert로 알려준다.
-> 맞으면 ? 제시어를 입력해준다.
-> 다음 사람의 제시어가 3글자인지, 이전 사람이 말한 제시어의 끝자리와 지금 말한 제시어의 첫째 자리의 글자가 서로 동일한지 확인한다
-> 틀렸으면 다시 진행
-> 맞으면 다시 다음 사람

---

화면

<h1>쿵쿵따 게임</h1>
<h2>참여인원 : <span id="number"></span>명</h2>
<h2>순서 : <span id="order">1</span>번 째</h2>
<h3>제시어 :<span id="word"></span>입니다.</h3>
<input type="text">
<button>쿵쿵따!</button>

코드

• 몇명이서 쿵쿵따를 진행하는지?
  const number = parseInt(prompt('몇 명?'));
  prompt 창으로 입력받고 number 변수를 통해서 관리해주자

• 첫 번째 사람이 제시어를 입력한다.
  

• 버튼을 누른다. (쿵쿵따)

const $button = document.querySelector('button');
const onClick = $button.addEventListener('click', () => {});

• 제시어가 3글자가 맞는지 확인한다.

newWord.length===3

• 맞으면 제시어를 수정하고 틀리면 alert로 알려준다.
  

• 다음 사람이 입력
  초기화, 초점을 맞춰준다.
  

• 다음 사람의 제시어가 3글자인지, 이전 사람이 말한 제시어의 끝자리와 지금 말한 제시어의 첫째 자리의 글자가 서로 동일한지 확인한다

절차 수정

처음에 제시어가 있는지 없는지 확인을 해보자 -> 다음 사람의 코드를 작성할 수 있다.

• 첫 번째 사람이 제시어 입력시, 제시어가 있는지 없는지 확인을 하고 없으면 시작, 있으면 다음 사람 코드로 분기를 나누어 보자.
  
• 다음 사람의 제시어가 3글자인지, 이전 사람이 말한 제시어의 끝자리와 지금 말한 제시어의 첫째 자리의 글자가 서로 동일한지 확인한다

        const onClick = $button.addEventListener('click', () => {
            if (!word) {
                if (newWord.length === 3) {
                    $word.textContent = newWord;
                    word = newWord
                } else {
                    alert('3글자를 입력해주세요');
                }
            } else {
                if (newWord.length === 3 && word[word.length -1]===newWord[0]) {
                    $word.textContent = newWord;
                    word = newWord;
                } else {
                    alert('틀렸습니다.');
                }
            }
            $input.value = '';
            $input.focus();
        });

절차 수정

절차에 순서가 없다. 몇 번째 인지 확인할 수 있도록 해보자

• 몇 번째 인가?

            if (order < number) {
                $order.textContent = order + 1
                order ++
            } else {
                $order.textContent = 1
            }

html 화면

소스코드(github)
링크텍스트

출처 "ZeroCho TV"
링크텍스트