所以,這聽起來像是作業,所以讓我們試圖弄清楚他需要完成你的遊戲所需的步驟。一旦你有了這些步驟,在谷歌先生的幫助下,將其轉換爲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頁面和調整的剩餘部分,希望它有助於: )
利用javascript的'alert'或'console.log'進行調試。我們不是在這裏寫你的代碼。 – twentylemon
每次用戶猜測時,你爲什麼要做'genNum'? –
我不想讓任何人寫我的代碼,我只是想知道它到目前爲止是否是錯誤的。我以爲我需要genNum來產生他們應該猜測的隨機數。就像我說的,不太確定如何去做。 – Sina