Welcome✧˖*°࿐

코딩 💻 coding/JavaScript

JS 잘하는 법 : 프로그래머처럼 사고하기 스펠링 맞히기 게임 만들기

러블리Hyeon 2025. 4. 21. 14:57

간단한 게임을 만들어보자.

 

이 게임을 만들기 위해서, 여러분의 직장 상사가 게임의 기능을 안내해 주고 가는 상황을 상상해 보자

간단한 스펠링 맞추기 게임을 만들어주세요. 무작위로 선택한 A과 Z사이의 스펠링을 플레이어가 10턴 내에 알아내는 게임입니다. 각 턴 후에는 플레이어가 고른 스펠링이 맞았는지 아니면 틀렸는지 알려줘야 하고, 만약 틀린 경우에는 플레이어의 스펠링이 앞에 있는지, 아니면 뒤에 있는지 를 알려줘야 합니다. 플레이어가 이전에 추측한 스펠링들의 기록도 보여줘야 합니다. 게임은 플레이어가 스펠링을 맞히거나, 턴을 모두 소모하면 끝납니다. 게임이 끝난 뒤에는 다시 게임을 시작할 수 있는 옵션을 제공해야 합니다.

작은 작업으로 나눠 보기

위에 내용을 작은 작업으로 나눠서 작게부터 생각을 해보자

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

이렇게 나누고 코드를 작성하면 아래와 같다

 

초기 설정

<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 spelling between A and Z. 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="text" maxlength="1" 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>
    </div>

  </body>
</html>
 

데이터를 저장할 변수 추가하기

function getRandomLetter() { 
  const alphabet = 'abcdefghijklmnopqrstuvwxyz'
  const randomSpelling = Math.floor(Math.random() * 26)
// 0 < random < 26
  return alphabet[randomSpelling];
}

let correctLetter = getRandomLetter();

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 키워드와 그 뒤의 이름으로 생성 가능

상수 또한 변수처럼 이름을 붙인 값이지만, 변수와 달리 상수의 값은 바꿀 수 없다. const 키워드와 그 뒤의 이름으로 생성 가능

  • 첫 번째 변수 getRandomLetter에는 수학 알고리즘을 통해 a부터 z사이의 무작위 수를 할당
  • 그다음 세 개의 상수는 HTML의 결과 문단을 가리키는 참조를 저장해서, 나중에 문단에 텍스트를 삽입할 때 사용
<div class="resultParas">
  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
</div>

 

다음 두 상수는 추측한 숫자를 제출할 때 사용할 양식 텍스트 입력 칸과 제출 버튼의 참조를 저장

<label for="guessField">Enter a guess: </label>
<input type="text" maxlength="1" required id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">

 

  • 마지막 두 변수는 플레이어가 사용한 턴 수인 1과, 지금은 없지만 이 글의 뒤에서 추가할 초기화 버튼의 참조를 저장하기 위해 사용합니다.

함수

function SepllingPrint() {
 const userGuess = guessField.value.toLowerCase(); //소문자로 변환
   if (guessCount === 1) {
    guesses.textContent = "Previous guesses: ";
  }
  guesses.textContent += userGuess + " ";
  
  if(userGuess === correctLetter){
    lastResult.textContent = "Congratulations! You got it right!";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = "";
    setGameOver();
 } else if (guessCount === 10) {
    lastResult.textContent = "!!!GAME OVER!!!";
    lowOrHi.textContent = `The correct letter was ${correctLetter}`; //정답표시
    setGameOver();
  } else {
    lastResult.textContent = "Wrong!";
    lastResult.style.backgroundColor = "red";
    if (userGuess < correctLetter) {
      lowOrHi.textContent = "Last guess was too low!";
    } else {
      lowOrHi.textContent = "Last guess was too high!";
    }
  }
   guessCount++;
  guessField.value = "";
  guessField.focus();
}

 

이벤트

guessSubmit.addEventListener("click", SepllingPrint);

 

게임 기능 마무리

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement("button");
  resetButton.textContent = "Start new game";
  document.body.append(resetButton);
  resetButton.addEventListener("click", resetGame);
}

리셋 게임 기능

function resetGame() {
  guessCount = 1;

  const resetParas = document.querySelectorAll(".resultParas p");
  for (const resetPara of resetParas) {
    resetPara.textContent = "";
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = "";
  guessField.focus();

  lastResult.style.backgroundColor = "white";

  correctLetter = getRandomLetter();
}

 

모든 것을 게임의 초기 상태로 되돌려, 플레이어가 새로운 게임을 즐길 수 있도록 하는 함수

 

여기까지 왔으면 완전히 동작하는 (간단한) 게임을 완성할 수 있다.

 

 

반응형
저작자표시 비영리 변경금지

'코딩 💻 coding > JavaScript' 카테고리의 다른 글

자바스크립트 JS 공부 : 배열(Arrays)  (1) 2025.04.25
자바스크립트 JS 공부 문자열  (0) 2025.04.24
JavaScript의 기본적인 연산 - 숫자와 연산자  (0) 2025.04.23
JS 기초 : 변수 선언 let const  (0) 2025.04.22
JavaScript(js) 잘하는 법  (2) 2025.03.27

'코딩 💻 coding/JavaScript'의 다른글

  • 현재글JS 잘하는 법 : 프로그래머처럼 사고하기 스펠링 맞히기 게임 만들기

관련글

댓글

티스토리툴바