JS 끝말잇기 게임

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

codinghatso

JS 끝말잇기 게임 본문

개발일지

JS 끝말잇기 게임

hatso 2024. 7. 30. 22:37

끝말잇기 웹 게임을 만들면서 사고력 기르는 훈련을 하고자 합니다.

순서도 설계를 통해 절차를 정리한다면 좋은 결과를 얻을 수 있다.

내부함수[

prompt : 입력값 받기

alert : 공지하기

confirm : 의사를 물어볼 때 ]

입력태그는 value로 값을 가져오며, 이외 태그들은 textContent로 값을 가져오고 설정한다.

순서도의 의사결정 부분에서 OR 또는 AND인지에 따라 최적화가 가능하다.

최적화는 진리표를 사용하면 더 정확하게 구분할 수 있다.

예) OR 진리표

첫 번째 조건	두 번째 조건	최종 결과
true	true	true
true	false	true
false	true	true
false	false	false

내용 정리

순서도 그리기
대화 상자 띄우기
태그 선택하기
태그에 이벤트 달기
순서도 최적화하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>끝말잇기</title>
    <style>
      body {
        margin: 25px;
      }
      #order {
        font-size: 30px;
        font-weight: 400;
      }
      #word {
        font-size: 50px;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어: <span id="word"></span></div>
    <input type="text" />
    <button>입력</button>

    <script>
      const number = Number(prompt("몇 명이 참가하나요?"));
      const $input = document.querySelector("input");
      const $button = document.querySelector("button");
      const $word = document.querySelector("#word");
      const $order = document.querySelector("#order");
      let word;
      let newWord;

      const onClickButton = () => {
        if (!word || word[word.length - 1] === newWord[0]) {
          word = newWord;
          $word.textContent = word;
          const order = Number($order.textContent);
          if (order + 1 > number) {
            $order.textContent = 1;
          } else {
            $order.textContent = order + 1;
          }
        } else {
          alert("올바르지 않은 단어입니다.");
        }
        $input.value = "";
        $input.focus();
      };
      const onInput = (e) => {
        newWord = e.target.value;
      };
      $button.addEventListener("click", onClickButton);
      $input.addEventListener("input", onInput);
    </script>
  </body>
</html>