How to implement a guessing number game using JavaScript

In the Internet era, games can be played anytime and anywhere, which can bring a certain amount of entertainment and happiness. Among them, the guessing number game is a more classic game and is suitable for all ages. So, in this article, we will introduce step by step how to implement the number guessing game using JavaScript.

Step 1: Preparation

Before we start writing code, we need to prepare the working environment. Here we can use any text editor or development tool. For example: Sublime Text, VS Code, etc. For beginners, I recommend using Codepen.io, an online development tool that is very suitable for quickly writing small JavaScript projects.

Step 2: Write HTML code

First, we need to write HTML code to create a simple user interface. In this code, we will create a div element that contains an h1 element to display the title of the game, an input element and a button element to let the user enter a guessed number, and a p element to display the result of the game.

The following is the HTML code.

<div>
  <h1 id="猜数字游戏">猜数字游戏</h1>
  <input>
  <button>猜一猜</button>
  <p></p>
</div>

Here, we create a div element with the id "game" and place the title, input box, button and result inside it. Note that we have added an onclick event to the button that calls the checkGuess() function.

Step 3: Write JavaScript code

Now, we can start writing JavaScript code. Before we begin, we will define three opening variables.

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

The randomNumber variable here will generate a random number from 1 to 100, the guesses variable will save all the user's guesses, and the count variable will save the number of user guesses.

Next, we will start writing the checkGuess() function.

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 = "你猜的数字过大";
  }
  document.getElementById("guess").value = "";
}

In the checkGuess() function, we first get the number entered by the user and check whether it has been guessed. If the guess is passed, we will pop up a warning telling the user they need to guess another number. Otherwise, we continue executing the code and add this number to the guesses array.

Next, we increment the count counter by 1 and update the user's guess in the resultDiv element. If the user guesses correctly, we will pop up a popup to tell them they guessed correctly and update the resultDiv element.

If the user doesn't guess correctly, we will tell them if they guessed lower or higher and update the resultDiv element.

Finally, we will clear the user’s guess in the input box.

Step 4: Test your code

Now, we have written the necessary HTML and JavScript code. We can test our code and see if the game works properly in a few simple steps. Copy the above code into the online editor and press the run button.

The game UI should now be rendered. Enter a number in the input box and click the "Guess" button. If you guessed correctly, you will see a prompt box telling you that you guessed correctly and how many times you guessed.

If you guess wrong, you will see a prompt indicating that you guessed too low or too high. If you haven't guessed the number yet, you can keep guessing and the system will record each of your guesses.

To sum up, through this article, you can learn how to use JavaScript to write a guessing game, and you can enjoy the benefits of the game anytime and anywhere.

The above is the detailed content of How to implement a guessing number game using JavaScript. For more information, please follow other related articles on the PHP Chinese website!