JavaScript Web Game(끝말잇기)

Dev_Go·2022년 7월 13일

JavaScript Web Game

목록 보기

1/3

순서도 그리기

프로그래밍에서 가장 중요한 것은 코드를 작성하기 전에 올바른 순서도를 만드는 것이다. 한 번에 순서도를 완성할 수는 없고, 코딩하면서 계속 수정해야 하지만 다음 원칙을 지키면서 순서도를 설계한다면 수정하는 횟수와 전체 절차 개수를 최소화할 수 있다.

프로그램 절차의 개수는 정해져 있어야 한다.
각 절차는 항상 같은 내용이여야 한다.
모든 가능성을 고려해야 한다.
예시는 절차를 검증하는 데 사용한다.

순서도를 만들 때 사용자의 이벤트(버튼 클릭, 입력창 등)가 필요한 곳에서 순서도를 끊어야 한다.

대화창(prompt, alert, confirm)

  // prompt: 입력창
  // 입력 값이 string이므로 parseIn를 이용해 number로 바꿔줘야한다.
  // 마지막에 숫자 10은 십진법을 의미한다.
  // 적지 않아도 기본값이 십진법이지만 적어주는게 명시적으로 좋다.
  const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
  // alert: 경고창
  alert(number);
  // confirm: 예,아니요
  const yesOrNo = confirm('맞나요?');

문자열 자리수

자리수는 0부터 시작하므로 첫 번째 자리가 0이고 두 번째 자리가 1이다. 따라서 hello라는 단어가 있을때 hello라는[0]을 하면 h라는 문자가 나오고 hello[1]을 하면 e가 나온다.

마지막 문자를 가져올려면 자리수가 0부터 시작하니 hello의 마지막 문자는 hello[4]를 하면 된다. 하지만 문자열들은 길이가 다를 수 있으므로 마지막 문자가 항상 [4]라고 할 수 없다.

hello는 5글자이면서 마지막 자리수가 4이고, javascript는 10글자이면서 마지막 자리수가 9이다. 글자수에서 1을 빼면 마지막 자리수를 구할 수 있다.

if (word[word.length - 1] === newWord[0]) { // 올바른가?

} else { // 올바르지 않은가?

}

전에 입력한 글자의 마지막 글자와 지금 입력된 글자의 첫 글자가 동일한지 확인하는 조건문이다.

끝말잇기 게임 만들기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>끝말잇기</title>
</head>

<body>
  <div><span id="order">1</span>번째 참가자</div>
  <div>제시어: <span id="word"></span></div>
  <input type="text">
  <button>입력</button>

  <script>
    // prompt: 입력창
    // 입력 값이 string이므로 parseIn를 이용해 number로 바꿔줘야한다.
    // 마지막에 숫자 10은 십진법을 의미한다.
    // 적지 않아도 기본값이 십진법이지만 적어주는게 명시적으로 좋다.
    const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
    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 = newWord; // 입력한 단어가 제시어가 된다.
        $word.textContent = word; // #word에 입련된 제시어를 넣어준다.
        $input.value = ''; // 입력버튼을 누르면 input이 빈칸이 된다.
        $input.focus(); // 커서를 둔다
        const order = parseInt($order.textContent); //현재 순서
        if (order + 1 > number) { // 현재 순서에서 1을 더한 값이 number보다 크면
          $order.textContent = 1; // 현재 순서가 첫번째로 돌아간다.
        } else { // 그게 아니면
          $order.textContent = order + 1; // 현재 순서에서 1을 더한다.
        }
      } else {
        // 제시어가 비어있지 않다.
        if (word[word.length - 1] === newWord[0]) { // 올바른가?
          word = newWord; // 입력한 단어가 제시어가 된다.
          $word.textContent = word; // #word에 입련된 제시어를 넣어준다.
          $input.value = ''; // 입력버튼을 누르면 input이 빈칸이 된다.
          $input.focus(); // 커서를 둔다
          const order = parseInt($order.textContent); //현재 순서
          if (order + 1 > number) { // 현재 순서에서 1을 더한 값이 number보다 크면
            $order.textContent = 1; // 현재 순서가 첫번째로 돌아간다.
          } else { // 그게 아니면
            $order.textContent = order + 1; // 현재 순서에서 1을 더한다.
          }
        } else { // 올바르지 않은가?
          alert('올바르지 않은 단어입니다!');
          $input.value = ''; // 입력버튼을 누르면 input이 빈칸이 된다.
          $input.focus(); // 커서를 둔다
        }
      }
    };
    const onInput = (event) => {
      // 새로 입력된 글자가 저장된다.
      newWord = event.target.value;
    };

    $button.addEventListener('click', onClickButton);
    $input.addEventListener('input', onInput);

  </script>
</body>

</html>

순서도 최적화하기

아래 내용이 반복되기 때문에 중복되는 부분을 최적화해준는 작업.

word = newWord; // 입력한 단어가 제시어가 된다.
$word.textContent = word; // #word에 입련된 제시어를 넣어준다.
$input.value = ''; // 입력버튼을 누르면 input이 빈칸이 된다.
$input.focus(); // 커서를 둔다
const order = parseInt($order.textContent); //현재 순서
if (order + 1 > number) { // 현재 순서에서 1을 더한 값이 number보다 크면
  $order.textContent = 1; // 현재 순서가 첫번째로 돌아간다.
} else { // 그게 아니면
         $order.textContent = order + 1; // 현재 순서에서 1을 더한다.
}

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>끝말잇기</title>
</head>

<body>
 <div><span id="order">1</span>번째 참가자</div>
 <div>제시어: <span id="word"></span></div>
 <input type="text">
 <button>입력</button>

 <script>
   // prompt: 입력창
   // 입력 값이 string이므로 parseIn를 이용해 number로 바꿔줘야한다.
   // 마지막에 숫자 10은 십진법을 의미한다.
   // 적지 않아도 기본값이 십진법이지만 적어주는게 명시적으로 좋다.
   const number = parseInt(prompt('몇 명이 참가하나요?'), 10);
   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; // #word에 입련된 제시어를 넣어준다.

       const order = parseInt($order.textContent); //현재 순서
       if (order + 1 > number) { // 현재 순서에서 1을 더한 값이 number보다 크면
         $order.textContent = 1; // 현재 순서가 첫번째로 돌아간다.
       } else { // 그게 아니면
         $order.textContent = order + 1; // 현재 순서에서 1을 더한다.
       }
     } else {
       // 제시어가 비어있지 않다. 또는 올바르지 않은 단어이다.
         alert('올바르지 않은 단어입니다!');
     }
     $input.value = ''; // 입력버튼을 누르면 input이 빈칸이 된다.
     $input.focus(); // 커서를 둔다
   };
   const onInput = (event) => {
     // 새로 입력된 글자가 저장된다.
     newWord = event.target.value;
   };

   $button.addEventListener('click', onClickButton);
   $input.addEventListener('input', onInput);

 </script>
</body>

</html>

진리표

OR ||의 관계

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

AND &&의 관계

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

변형게임

prompt에서 취소를 누르면 실행이 되지 않고 입력할 수 있는 글자의 숫자를 3개로 제한한다.

prompt 함수에서 취소를 눌렀다면 값이 null이 될 것이고, 그 값이 number함수에 들어가면 NaN이 된다. NaN은 if문에 들어가면 항상 false로 취금되므로 number가 null이면 if문 내부는 실행되지 않게 작업

    const number = parseInt(prompt('몇 명이 참가하나요?'), 10);    
    
    if (number) {
      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] && newWord.length === 3)) { 
          word = newWord; 
          $word.textContent = word;
  
          const order = parseInt($order.textContent);
          if (order + 1 > number) {
            $order.textContent = 1;
          } else {
            $order.textContent = order + 1;
          }
        } else {
            alert('올바르지 않은 단어입니다!');
        }
        $input.value = '';
        $input.focus();
      };
      const onInput = (event) => {
        newWord = event.target.value;
      };  
      $button.addEventListener('click', onClickButton);
      $input.addEventListener('input', onInput);  
    }

Dev_Go

프론트엔드 4년차

다음 포스트

JavaScript Web Game(끝말잇기)