랜덤 숫자 맞히기 퀴즈 게임 (HTML 구성, JS 로직, 기능 확장)

랜덤 숫자 맞히기 퀴즈 게임은 웹 개발을 처음 배우는 사람들에게 매우 유익한 실습 프로젝트입니다. HTML을 활용한 사용자 인터페이스 구성, JavaScript를 이용한 난수 생성 및 입력값 처리, 조건문을 활용한 비교 로직 등 웹 프로그래밍의 기본 요소를 한 번에 경험할 수 있기 때문입니다. 이 글에서는 HTML로 기본 UI를 만드는 방법, JavaScript를 통한 정답 판별 로직 작성, 그리고 점수제나 힌트 기능처럼 기능을 확장하는 방법까지 단계적으로 설명드리겠습니다.

HTML 구성: 사용자 입력을 위한 기본 틀 만들기

랜덤 숫자 맞히기 게임은 사용자와의 상호작용을 기반으로 하기 때문에, HTML 구조는 직관적이고 사용하기 쉬워야 합니다. 기본적으로 입력창(input), 버튼(button), 결과 출력 공간(p 혹은 div)이 포함되어야 하며, 사용자가 게임을 반복해서 즐길 수 있도록 깔끔한 인터페이스를 구성하는 것이 중요합니다.

HTML 구조는 다음과 같은 요소들로 구성됩니다.

<div class="quiz-container">
  <h1>랜덤 숫자 맞히기 게임</h1>
  <p>1부터 100 사이의 숫자를 맞혀보세요!</p>
  <input type="number" id="user-input" min="1" max="100" />
  <button id="submit-btn">제출</button>
  <p id="result-text"></p>
  <p id="attempt-count">시도 횟수: 0</p>
</div>

이 구조에서 핵심 요소는 세 가지입니다. 첫째는 사용자 입력을 위한 <input> 태그입니다. type="number" 속성을 지정해 숫자만 입력받도록 하며, min과 max 속성으로 범위를 제한할 수 있습니다. 둘째는 이벤트 발생을 위한 <button> 태그입니다. 이 버튼이 눌릴 때마다 자바스크립트에서 게임 로직이 작동하도록 연결할 예정입니다. 셋째는 결과 출력을 위한 <p> 태그로, 정답 여부나 힌트를 실시간으로 보여주기 위한 공간입니다.

JS 로직: 난수 생성과 정답 판별 처리

HTML이 사용자와 상호작용할 수 있는 뼈대를 제공했다면, JavaScript는 실제 게임의 두뇌 역할을 합니다. 랜덤 숫자를 생성하고, 사용자의 입력값과 비교하여 정답인지 판단하며, 그에 따른 피드백을 출력하는 과정을 담당합니다.

랜덤 숫자는 Math.random() 함수를 활용해 생성합니다. 이때 1부터 100까지의 정수를 생성하려면 아래와 같은 코드를 사용합니다:

const answer = Math.floor(Math.random() * 100) + 1;

이제 게임 로직의 흐름은 다음과 같습니다.

사용자가 숫자를 입력하고 버튼을 클릭함
입력값을 가져와 정답과 비교함
높음/낮음/정답 여부를 판단하여 결과 출력
시도 횟수를 증가시키고 화면에 표시함

다음은 기본적인 JavaScript 로직 예시입니다:

let answer = Math.floor(Math.random() * 100) + 1;
let attempts = 0;

document.getElementById("submit-btn").addEventListener("click", function () {
  const userValue = Number(document.getElementById("user-input").value);
  const result = document.getElementById("result-text");
  const count = document.getElementById("attempt-count");

  attempts++;
  count.innerText = `시도 횟수: ${attempts}`;

  if (userValue < 1 || userValue > 100) {
    result.innerText = "1부터 100 사이의 숫자만 입력하세요.";
  } else if (userValue > answer) {
    result.innerText = "너무 높습니다!";
  } else if (userValue < answer) {
    result.innerText = "너무 낮습니다!";
  } else {
    result.innerText = `정답입니다! ${attempts}번 만에 맞히셨습니다.`;
  }

  document.getElementById("user-input").value = "";
});

이러한 방식은 사용자에게 즉각적인 피드백을 제공하면서 동시에 자바스크립트의 핵심 개념인 변수, 조건문, 이벤트 리스너, DOM 조작 등을 자연스럽게 익히게 합니다. 또한 value, innerText, addEventListener 같은 DOM API 사용에 대한 감각도 익히는 데 효과적입니다.

기능 확장: 점수제, 힌트, 게임 재시작 기능 추가

기본적인 숫자 맞히기 기능이 완성되면, 그 위에 다양한 기능을 확장하여 게임성을 높일 수 있습니다. 이 확장 기능을 통해 사용자의 몰입도를 높이고, 개발자는 더 깊은 프로그래밍 개념을 실습할 수 있습니다.

1. 점수제 도입

if (userValue === answer) {
  let score = Math.max(100 - attempts * 10, 0);
  result.innerText = `정답입니다! 점수: ${score}점`;
}

2. 힌트 기능 추가

if (attempts === 3) {
  const hint = answer % 2 === 0 ? "힌트: 짝수입니다." : "힌트: 홀수입니다.";
  result.innerText += `\n${hint}`;
}

3. 게임 재시작 기능

<button id="restart-btn" style="display: none;">다시 시작</button>

document.getElementById("restart-btn").addEventListener("click", function () {
  answer = Math.floor(Math.random() * 100) + 1;
  attempts = 0;
  document.getElementById("result-text").innerText = "";
  document.getElementById("attempt-count").innerText = "시도 횟수: 0";
  document.getElementById("restart-btn").style.display = "none";
});

4. 난이도 설정 기능

사용자가 직접 난이도를 선택하게 할 수도 있습니다. 예를 들어 '쉬움(1~50)', '보통(1~100)', '어려움(1~200)'처럼 범위를 조절하는 옵션을 제공하면 게임이 더 다양해집니다.

랜덤 숫자 맞히기 퀴즈 게임은 HTML, CSS, JavaScript를 종합적으로 연습할 수 있는 훌륭한 프로젝트입니다. 난수 생성, 입력 처리, 조건 분기, DOM 조작 등 웹 개발의 기본 요소들을 실습하면서 실력 향상은 물론이고 사용자와 소통하는 인터페이스 설계 능력도 함께 키울 수 있습니다. 간단한 구조에서 시작해 점점 더 다양한 기능을 추가하면서 자신만의 게임을 만들어보시기 바랍니다. 작은 프로젝트 하나로 큰 성장을 경험할 수 있습니다.

유라's 힐링 타임 즐기기