Table of Contents

자바스크립트 게임 만들기

게임 소개

자바스크립트로 간단한 게임을 만들어 보는 것은 재미있는 프로그래밍 경험이 될 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 활용하여 더하기 게임을 만들어 보겠습니다.

코드 작성


let score = 0; // 점수 초기화

function generateQuestion() {
  let num1 = Math.floor(Math.random() * 10);
  let num2 = Math.floor(Math.random() * 10);
  document.getElementById("question").innerHTML = `${num1} + ${num2}`;
  return num1 + num2;
}

function answer() {
  let userAnswer = document.getElementById("answer").value;
  let correctAnswer = generateQuestion();
  if (userAnswer == correctAnswer) {
    score++;
    document.getElementById("score").innerHTML = score;
  }
}

generateQuestion();

위 코드는 간단한 더하기 게임을 만드는 코드입니다. `generateQuestion()` 함수는 더하기 문제를 만드는 역할을 합니다. `answer()` 함수는 사용자가 입력한 답과 정답을 비교하여 점수를 계산합니다. 마지막으로 `generateQuestion()` 함수를 호출하여 첫 번째 문제를 띄워줍니다.

게임 실행


<!DOCTYPE html>
<html>
  <head>
    <title>더하기 게임</title>
  </head>
  <body>
    <h1>더하기 게임</h1>
    <p>문제: <span id="question"></span></p>
    <p>답: <input type="text" id="answer"></p>
    <p>점수: <span id="score">0</span></p>
    <button onclick="answer()">제출</button>
    <script src="script.js"></script>
  </body>
</html>

위 코드는 HTML 파일입니다. 사용자에게 보여질 웹 페이지를 구성합니다. 이번 게임에서는 문제, 답, 점수를 표시하고, 제출 버튼을 만들어 사용자가 입력한 답을 확인할 수 있도록 합니다. 스크립트는 `script.js` 파일에서 불러오도록 하였습니다.