JavaScript를 사용하여 숫자 추측 게임을 구현하는 방법

인터넷 시대에 게임은 언제 어디서나 플레이할 수 있어 어느 정도의 즐거움과 행복을 가져올 수 있습니다. 그중에서도 숫자 추측 게임은 좀 더 고전적인 게임으로 모든 연령대에 적합합니다. 그래서 이번 글에서는 자바스크립트를 이용하여 숫자 추측 게임을 구현하는 방법을 단계별로 소개하겠습니다.

1단계: 준비

코드 작성을 시작하기 전에 작업 환경을 준비해야 합니다. 여기에서는 텍스트 편집기나 개발 도구를 사용할 수 있습니다. 예: Sublime Text, VS Code 등 초보자에게는 작은 JavaScript 프로젝트를 빠르게 작성하는 데 매우 적합한 온라인 개발 도구인 Codepen.io를 사용하는 것이 좋습니다.

2단계: HTML 코드 작성

먼저 간단한 사용자 인터페이스를 만들기 위해 HTML 코드를 작성해야 합니다. 이 코드에서는 게임 제목을 표시하는 h1 요소, 사용자가 추측한 숫자를 입력할 수 있는 입력 요소 및 버튼 요소, 게임 결과를 표시하는 p 요소가 포함된 div 요소를 생성합니다.

다음은 HTML 코드입니다.

<div id="game">
  <h1>猜数字游戏</h1>
  <input type="text" placeholder="请输入你的猜测" id="guess"></input>
  <button onclick="checkGuess()">猜一猜</button>
  <p id="results"></p>
</div>

여기서 ID가 "game"인 div 요소를 만들고 그 안에 제목, 입력 상자, 버튼 및 결과를 배치합니다. checkGuess() 함수를 호출하는 버튼에 onclick 이벤트를 추가했습니다.

3단계: JavaScript 코드 작성

이제 JavaScript 코드 작성을 시작할 수 있습니다. 시작하기 전에 세 가지 개시 변수를 정의하겠습니다.

var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = [];
var count = 0;

여기서 RandomNumber 변수는 1부터 100까지의 난수를 생성하고, 추측 변수는 사용자의 모든 추측을 저장하며, count 변수는 사용자의 추측 횟수를 저장합니다.

다음으로 checkGuess() 함수 작성을 시작하겠습니다.

function checkGuess() {
  var guess = document.getElementById("guess").value;
  if (guesses.indexOf(guess) !== -1) {
    alert("你已经猜过这个数字了，请猜另外一个数字！");
    return;
  }
  guesses.push(guess);
  count++;
  var resultDiv = document.getElementById("results");
  if (guess == randomNumber) {
    alert("恭喜你，你猜对了！你猜了" + count + "次。");
    resultDiv.innerHTML = "恭喜你，你猜对了！你猜了" + count + "次。";
  } else if (guess < randomNumber) {
    resultDiv.innerHTML = "你猜的数字过小";
  } else if (guess > randomNumber) {
    resultDiv.innerHTML = "你猜的数字过大";
  }
  document.getElementById("guess").value = "";
}

checkGuess() 함수에서는 먼저 사용자가 입력한 숫자를 받아 추측되었는지 확인합니다. 추측이 통과되면 사용자에게 다른 숫자를 추측해야 한다는 경고 메시지가 표시됩니다. 그렇지 않으면 코드를 계속 실행하고 이 숫자를 추측 배열에 추가합니다.

다음으로 카운트 카운터를 1씩 증가시키고 resultDiv 요소에서 사용자의 추측을 업데이트합니다. 사용자가 올바르게 추측한 경우 팝업을 표시하여 올바르게 추측했음을 알리고 resultDiv 요소를 업데이트합니다.

사용자가 정확하게 추측하지 못한 경우 추측한 값이 낮은지 높은지 알려주고 resultDiv 요소를 업데이트합니다.

마지막으로 입력 상자에서 사용자의 추측을 지웁니다.

4단계: 코드 테스트

이제 필요한 HTML 및 JavScript 코드가 작성되었습니다. 몇 가지 간단한 단계를 통해 코드를 테스트하고 게임이 제대로 작동하는지 확인할 수 있습니다. 위 코드를 온라인 편집기에 복사하고 실행 버튼을 누릅니다.

이제 게임 UI가 렌더링됩니다. 입력창에 숫자를 입력하고 '추측' 버튼을 클릭하세요. 올바르게 추측했다면, 정확하게 추측했는지와 몇 번이나 추측했는지 알려주는 프롬프트 상자가 표시됩니다.

추측이 틀리면 추측이 너무 낮거나 너무 높다는 메시지가 표시됩니다. 아직 숫자를 추측하지 못했다면 계속 추측할 수 있으며 시스템은 각 추측을 기록합니다.

결론적으로 이 글을 통해 자바스크립트를 활용해 추측 게임을 작성하는 방법을 배울 수 있고, 언제 어디서나 게임의 혜택을 누릴 수 있습니다.

위 내용은 JavaScript를 사용하여 숫자 추측 게임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!