首页写一个完整的熄灯游戏用HTML代码

写一个完整的熄灯游戏用HTML代码

时间: 2024-12-06 09:24:09 浏览: 28

编写一个简单的熄灯游戏（比如猜灯谜游戏），HTML主要用于页面布局和呈现，而游戏逻辑通常需要JavaScript。以下是一个基础示例，包括一个列表和按钮让用户输入猜词： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>熄灯猜词游戏</title> <style> .light-bulb { display: inline-block; width: 40px; height: 40px; background-color: #ccc; border-radius: 50%; } .lit-bulb { background-color: green; } </style> </head> <body> <h1>熄灯猜词游戏</h1> <p id="game-status">灯还没有点亮。</p> <div class="light-bulb" id="light-bulb"></div> <br> <input type="text" id="guess-input" placeholder="请输入你的猜测"> <button onclick="checkGuess()">猜词</button> <script> let isLit = false; // 模拟灯泡亮着的状态 const lightBulb = document.getElementById('light-bulb'); const guessInput = document.getElementById('guess-input'); function checkGuess() { const guess = guessInput.value.toLowerCase(); if (guess === 'light') { // 示例：猜词是'light' lightBulb.classList.toggle('lit-bulb'); // 切换灯泡状态 isLit = !isLit; updateGameStatus(); } else { alert('很遗憾，这不是正确的词。请再试一次！'); guessInput.value = ''; } } function updateGameStatus() { if (isLit) { document.getElementById('game-status').innerText = '恭喜，你猜对了！'; } else { document.getElementById('game-status').innerText = '灯还没有点亮。'; } } </script> </body> </html> ``` 在这个例子中，玩家需要输入“light”才能点亮灯泡。这是一个非常简化的版本，实际游戏中可能还需要包含更多单词以及验证机制。

阅读全文