溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用JavaScript實現猜數字游戲”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用JavaScript實現猜數字游戲”吧！
開發一個猜數字游戲，游戲應隨機選擇一個 100 以內的自然數, 然后邀請玩家在 10 輪以內猜出這個數字。每輪后都應告知玩家的答案正確與否，如果出錯了，則告訴他數字是低了還是高了。并且應顯示出玩家前一輪所猜的數字。一旦玩家猜對，或者用盡所有機會，游戲將結束。游戲結束后，可以讓玩家選擇再次開始。
思維：
1、隨機生成一個100以內的自然數
2、記錄玩家當前的輪數。從1開始
3、為玩家提供一種猜測數字的方法
4、一旦有結果提交，先將其記錄下來，以便用戶可以看到他們先前的猜測
5、然后檢查他是否正確
6、如果正確：
1.顯示祝賀消息
2.阻止玩家繼續猜測
3.顯示空間永續玩家重新開始游戲
7、如果出錯
1、告訴玩家他們錯了
2、語序他們輸入另一個猜測
3、輪數加1
8、如果出錯，并且玩家沒有剩余輪次
1、告訴玩家游戲結束
2、阻止玩家繼續猜測
3、顯示空間允許玩家重新開始游戲
9、一旦游戲重啟，確保游戲的邏輯和UI完全充值然后返回步驟1
html代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>猜數字游戲</title> <script type="text/javascript" src="./JS/猜數字游戲.js" async></script> /*根據自己的實際改變*/ </head> <body> <p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p> <label for="guessField">請猜數：</label> <input type="text" id="guessField" class="guessField" /> <input type="submit" value="確定" class="guessSubmit" /> </body> </html>
js代碼：
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");
const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");
let guessCount = 1;
let resetButton;
/* 游戲邏輯 */
function checkGuess() {
/* 獲取用戶輸入的內容，強制轉換為數值 */
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = "上次猜的數：";
}
guesses.textContent += userGuess + " ";
if (userGuess === randomNumber) {
lastResult.textContent = "恭喜你！猜對了";
lastResult.style.backgroundColor = "green";
lowOrHi.textContent = "";
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = "!!! GAME OVER !!!";
setGameOver();
} else {
lastResult.textContent = "您猜錯了";
lastResult.style.backgroundColor = "red";
if (userGuess < randomNumber) {
lowOrHi.textContent = "你猜低了";
} else {
lowOrHi.textContent = "你猜高了";
}
}
guessCount++;
guessField.value = "";
guessField.focus();
}
/* 結束游戲 */
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement("button");
resetButton.textContent = "開始新游戲";
document.body.appendChild(resetButton);
resetButton.addEventListener("click", resetGame);
}
/* 初始化 */
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll(".resultParas p");
for (let i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = " ";
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = "";
guessField.focus();
lastResult.style.backgroundColor = "white";
randomNumber = Math.floor(Math.random() * 100) + 1;
}
guessSubmit.addEventListener("click", checkGuess);感謝各位的閱讀，以上就是“怎么用JavaScript實現猜數字游戲”的內容了，經過本文的學習后，相信大家對怎么用JavaScript實現猜數字游戲這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
