[ JavaScript ] 숫자 맞히기 게임 만들기

ma.caron_g·2022년 12월 13일

자바스크립트

Java Script

목록 보기

7/11

<참고 링크>

mdn web docs

해당 링크를 들어가면 자바스크립트를 입문하기에 좋은 예시가 만들어져있습니다.

[ 숫자 맞히기 게임 ]

[ 설명 ]

본 게시글에 적혀있습니다.

1과 100 사이의 무작위 숫자를 생성하기.
플레이어의 현재 턴을 기록하기. 1부터 시작.
플레이어가 정답을 추측할 수 있는 방법을 제공.
플레이어가 자신의 추측 기록을 확인할 수 있도록, 제출하는 수를 먼저 어딘가에 기록하기.
그 후, 제출한 수가 정답인지 확인.
만약 정답이라면...
6-1) 축하 메시지 보여주기.
6-2) 이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
6-3)게임을 다시 시작할 수 있는 컨트롤 보여주기.
만약 오답이고 아직 플레이어 턴이 남아있다면...
7-1)오답임을 알려주고 제출한 숫자가 너무 높았는지 아니면 너무 낮았는지 보여주기.
7-2)다른 숫자의 제출을 허용하기.
7-3)턴 숫자를 1 늘리기.
만약 오답인데 플레이어 턴이 남아있지 않다면...
8-1)플레이어에게 게임이 끝났음을 알려주기.
8-2)이후에 플레이어가 다른 숫자를 제출하면 게임이 망가질 수 있으므로 제출을 막기.
8-3)게임을 다시 시작할 수 있는 컨트롤 보여주기.
게임을 다시 시작하면 게임 로직과 UI를 완전히 초기화하고 1번으로 돌아가기.

알고리즘은 다음과 같습니다.

[ 초기 설정 값 ]

[ html ]

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">

    <title>Number guessing game</title>

    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
    
      .form input[type="number"] {
        width: 200px;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
    <h1>Number guessing game</h1>

    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

    <div class="form">
      <label for="guessField">Enter a guess: </label>
      <input type="number" min="1" max="100" required id="guessField" class="guessField">
      <input type="submit" value="Submit guess" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
      <button class="newGame">Start new game</button>
    </div>

    <script src="chooseNum.js">

      // Your JavaScript goes here

    </script>
  </body>
</html>

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

다음과 같이 기본값들이 주어지고, 아래에 정답이 있지만. 정답을 보지 않고 코드를 작성했습니다.

[ 내가 작성한 코드 ]

let randomNumber = Math.floor(Math.random() * 100) + 1;

console.log(randomNumber);
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

const newGameBtn = document.querySelector('.newGame');

let guessCount = 1;
let resetButton;

newGameBtn.style.display = "none"


function NewGame() {
    return function(){
        randomNumber = Math.floor(Math.random() * 100) + 1;
        console.log(randomNumber);

        guessCount = 1;

        const resetParas = document.querySelectorAll('.resultParas p');
        for (const resetPara of resetParas) {
            resetPara.textContent = '';
        }
        guessField.disabled = false;
        guessSubmit.disabled = false;
        newGameBtn.style.display = "none";
        lastResult.style = "background-color:none"

    }
};

guessSubmit.addEventListener('click', function() {
    const userGuess = Number(guessField.value);

    if(guessCount === 1) {
        guesses.textContent = 'Previous guesses: ';
    }
    guesses.textContent += userGuess + ' ';

    if (guessCount == 10) {
        guessField.disabled = true;
        guessSubmit.disabled = true;
        lastResult.innerText = '!!!GAME OVER!!!';
        lowOrHi.innerText = '';
        newGameBtn.style.display = "block"
    }
    else {
        if (randomNumber < guessField.value) {
            console.log("low");
            lastResult.style = "background-color:red"
            lastResult.innerText = 'Wrong!'
            lowOrHi.innerText = 'Last guess was too high!'
        }
        else if (randomNumber > guessField.value) {
            console.log("high");
            lastResult.style = "background-color:red"
            lastResult.innerText = 'Wrong!'
            lowOrHi.innerText = 'Last guess was too low!'
        } else {
            console.log("Right");
            lastResult.style = "background-color:green"
            lastResult.innerText = 'Congratulations! You got it right'
            lowOrHi.innerText = ''
            newGameBtn.style.display = "block"
        }
    }
    guessField.value = '';
    guessField.focus();
    guessCount += 1;

})

newGameBtn.addEventListener('click', NewGame());

resetGame()을 함수로 묶지 않은 것이 아쉽지만, 잘 작동합니다.

ma.caron_g

다른 사람이 만든 것을 소비하는 활동보다, 내가 생산적인 활동을 하는 시간이 더 많도록 생활화 하자.