HTML小游戲是一種趣味性強且易于實現的小型項目。它們通常使用簡單的HTML、CSS和JavaScript代碼,不需要任何額外的庫或框架。
以下是一個簡單的“猜數字”游戲的HTML和JavaScript代碼示例:
<!DOCTYPE html> <html> <head> <title>猜數字游戲</title> </head> <body> <h1>猜數字游戲</h1> <p>我已經想好了一個0到99之間的整數。你有10次機會猜測它是多少。</p> <input type="text" id="guessInput"> <button onclick="guess()">猜測</button> <p id="guessResult"></p> <script> var targetNumber = Math.floor(Math.random() * 100); var remainingGuesses = 10; function guess() { var guessNumber = parseInt(document.getElementById("guessInput").value); if (isNaN(guessNumber) || guessNumber< 0 || guessNumber >99) { document.getElementById("guessResult").innerText = "請猜0到99之間的整數。"; } else if (guessNumber === targetNumber) { document.getElementById("guessResult").innerText = "你猜對了!"; } else { remainingGuesses--; if (remainingGuesses === 0) { document.getElementById("guessResult").innerText = "游戲結束了,正確答案是 " + targetNumber + "。"; } else { var hint = guessNumber >targetNumber ? "過高" : "過低"; document.getElementById("guessResult").innerText = "你猜錯了,還有" + remainingGuesses + "次機會。提示:" + hint; } } } </script> </body> </html>
以上代碼包含了一個使用JavaScript編寫的功能完整而簡潔的猜數字游戲。玩家只需在輸入框中輸入數字并點擊“猜測”按鈕,游戲將返回與目標數字的比較結果,提供下一次猜測的提示,并在玩家用完所有機會還未猜中時結束游戲。