所以，这听起来像是功课，所以让我们试着找出实现游戏所需的步骤。完成这些步骤后，在 Google 先生的帮助下，将其翻译成 html/js 或任何其他编程语言应该相对容易。
1. Load: What do you need to be able to start a game?
1.1 We need a secret random number
1.2 We also need a way to let the user input his/her guess
1.3 We need to let the user check if their guess is right
1.4 We need a way to communicate the result to the user
2. Start: Lets play!
2.1 The user types a number
2.2 The user confirms the number and sends it to be checked
2.3 The game checks if the number is equal to the secret number, if not continue at 2.4
2.3.1 The game communicates to the user that his/her guess was correct!
2.4 The game checks if the number is less than the secret number, if not continue at 2.5
2.4.1 The game communicates to the user that his/her guess was too low
2.4.2 The user tries another guess, continue at 2.1
2.5 The number must be greater than the secret number
2.5.1 The game communicates to the user that his/her guess was too high
2.5.2 The user tries another guess, continue at 2.1
3. End: Want to play again?
3.1 Restart
3.2 Bye bye
让我们开始把它变成代码
// 1. Load: What do you need to be able to start a game?
// 1.1 We need a secret random number in js
var secretRandomNumber = Math.round(Math.random() * 50);
// 1.2 We also need a way to let the user input his/her guess in html
<input type="text" id="guess" />
// 1.3 We need to let the user check if their guess is right in html
<button onclick="checkGuess();">Guess!</button>
// and in js
function checkGuess(){
???
}
// 1.4 We need a way to communicate the result to the user in html
<div id="message"></div>
// 2. Start: Lets play!
// 2.1 The user types a number
// 2.2 The user confirms the number and sends it to be checked (presses the Guess button)
var guess = document.getElementById('guess').value;
// 2.3 The game checks if the number is equal to the secret number, if not continue at 2.4
if (guess == secretRandomNumber){
// 2.3.1 The game communicates to the user that his/her guess was correct!
document.getElementById('message').innerHTML = 'Correct!';
}else
// 2.4 The game checks if the number is less than the secret number, if not continue at 2.5
if (guess < secretRandomNumber){
// 2.4.1 The game communicates to the user that his/her guess was too low
// 2.4.2 The user tries another guess, continue at 2.1
document.getElementById('message').innerHTML = 'Too low, try again';
}else{
// 2.5 The number must be greater than the secret number
// 2.5.1 The game communicates to the user that his/her guess was too high
// 2.5.2 The user tries another guess, continue at 2.1
document.getElementById('message').innerHTML = 'Too high, try again';
}
// 3. End: Want to play again?
// 3.1 Restart - generate a new secret random number
// 3.2 Bye bye - close the page
清理一下
<input type="text" id="guess" />
<button onclick="checkGuess();">Guess!</button>
<div id="message"></div>
<button onclick="generateSecretRandomNumber()">Restart</button>
<script>
var secretRandomNumber; // outside makes it available to other functions
function generateSecretRandomNumber(){
secretRandomNumber = Math.round(Math.random() * 50);
}
function checkGuess(){
var guess = document.getElementById('guess').value;
if (guess == secretRandomNumber){
document.getElementById('message').innerHTML = 'Correct!';
}else if (guess < secretRandomNumber){
document.getElementById('message').innerHTML = 'Too low, try again';
}else{
document.getElementById('message').innerHTML = 'Too high, try again';
}
}
// make sure we have a brand new secret number once the page loads
generateSecretRandomNumber();
</script>
现在您可以将其插入完整的 html 页面并调整其余部分，希望对您有所帮助:)