[JS] 쿵쿵따 게임 만들기 (끝말잇기)-2

전예원·2021년 11월 11일

JavaScript word-relay

Java Script 공부

목록 보기

31/33

💡 끝말잇기의 원리와 쿵쿵따(세글자 끝말잇기)의 원리를 알고 프로그램을 만들어보자

⭐️ 완성샷

쿵쿵따

🔴 html, css 파일

github

🟤 그 전 끝말잇기와 비슷하지만 다만 css와 html이 좀 복잡해졌다.

🟤 html

<div class="wrapper">
      <div class="number_wrapper">참가자 인원수 : <span id="number">?</span>명</div>
      <div class="order_wrapper"><span id="order">1</span>번째 참가자</div>
      <div class="suggest_word">제시어</div>
      <!-- <div class="word"></div> -->
      <div class="word_wrapper">
        <span class="first_letter"></span>
        <span class="second_letter"></span>
        <span class="third_letter"></span>
      </div>
      <div class="input_wrapper">
        <input type="text" />
        <button>입력</button>
      </div>
</div>

첫번째 단어와, 두번째 단어, 세번째 단어 다 class를 적용해줬다.
참가자 전체 인원수도 표시되게끔 했다.

🟠 JS 변수 지정

const participantNumber = Number(prompt("참가자는 몇 명인가요?"));
const $number = document.querySelector("#number");
const $button = document.querySelector("button");
const $input = document.querySelector("input");
// const $word = document.querySelectorAll(".word");
const $firstLetter = document.querySelector(".first_letter");
const $secondLetter = document.querySelector(".second_letter");
const $thirdLetter = document.querySelector(".third_letter");
const $order = document.querySelector("#order");
let word; // 제시어
let newWord; // 현재 단어

$number.textContent = participantNumber;

제시어가 동그라미에 각 글자씩 입력되게끔하려고 변수를 각각 주었다.

🟡 엔터키로 입력 받기

$input.addEventListener("keypress", (e) => {
          if (e.key === "Enter") {
            onInput();
          }
        });

input안에 단어를 엔터키로도 입력받기 위해 keypress 이벤트를 추가해줬다. 키가 엔터이면 실행된다.

🟢 onInput() - 1

const onInput = () => {
  // 제시어를 등록하는 함수
  if (newWord.length === 3 && (!word || word[2] === newWord[0])) {
    word = newWord; // 입력한 단어가 제시어가 된다.
    $firstLetter.textContent = word[0];
    $secondLetter.textContent = word[1];
    $thirdLetter.textContent = word[2];
    // $word.textContent = word;
    const order = Number($order.textContent);
    if (order + 1 > participantNumber) {
      $order.textContent = 1;
    } else {
      $order.textContent = order + 1;
    }
  } else {
    alert("세글자만 가능합니다.");
  }
  $input.value = `${word[2]}`;
  $input.focus();
};

const inputWord = (event) => {
  newWord = event.target.value; // 입력하는 단어를 현재 단어로
};

크게 그 전과 바뀐건 없다.
대신 쿵쿵따 게임이기 때문에

글자수 가 무조건 3개여야하는 점
단어가 비면 안되는 점
제시어의 마지막 글자와 현재 단어의 첫번째 글자가 같아야 한다는 점

단어가 있거나 끝 글자와 현재단어의 첫글자가 같으면 --> 1
or 연산자인 이유는 먼저 단어가 없으면 무조건 짤!!!
단어가 있으니까 마지막 글자와 첫번째 단어가 같냐고 물어볼 수 있으니까 or연산자로 만든 것
단어가 세글자이고, 입력된 단어가 그 전 단어 마지막 단어로 시작한다 --> 2
이 조건들이 충족이 안되면 알림창을 띄워준다.

🔵 onInput() - 2

const order = Number($order.textContent);
    if (order + 1 > participantNumber) {
      $order.textContent = 1;
    } else {
      $order.textContent = order + 1;
    }
  }

순서는 그 전 글과 동일, 3명이 참가자이면 참가자 수 보다 1이라도 더 많으면 안되기 때문에 그러면 다시 1로 돌아가고, 아닐 시에는 그냥 1만 더해서 다음 사람이 되게끔 해준다.

🟣 onInput() - 3

$input.value = `${word[2]}`;
  $input.focus();
};

그리고 나는 편의성을 위해 이 문장을 추가해주었다.
쿵쿵따니까 무조건 3글자이니까 제시어의 마지막 단어를 입력창에 바로 보여주는 것이다. 그럼 그 전 단어가 이어지는 듯한 느낌을 준다.

🟤 참가자를 입력하지 않을 시

if (participantNumber) { 
  $input.addEventListener("input", inputWord);
  $button.addEventListener("click", onInput);
  $input.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      onInput();
    }
  });
}