純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='http://www.aoyou183.cn/bcjs/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' /> <input type='submit' value='確定' /> </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);
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報錯問題分析2. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析3. ASP調用WebService轉化成JSON數據，附json.min.asp4. SharePoint Server 2019新特性介紹5. ASP中常用的22個FSO文件操作函數整理6. React+umi+typeScript創建項目的過程7. php網絡安全中命令執行漏洞的產生及本質探究8. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁9. 三個不常見的 HTML5 實用新特性簡介10. php測試程序運行速度和頁面執行速度的代碼
網公網安備