首页写一个html的打地鼠游戏

写一个html的打地鼠游戏

时间: 2023-08-05 16:05:03 浏览: 173

好的，这里是一个 HTML 的打地鼠游戏示例代码。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打地鼠游戏</title> <style> .hole { display: inline-block; width: 80px; height: 80px; margin: 10px; background-color: #F1C40F; border-radius: 50%; text-align: center; line-height: 80px; font-size: 30px; color: #FFF; cursor: pointer; } </style> </head> <body> <h1>打地鼠游戏</h1> <p>得分：</p> <p id="score">0</p> <div id="holes"></div> <script> var holes = document.getElementById("holes"); var score = document.getElementById("score"); var points = 0; var timeLeft = 30; var timer = null; function startGame() { timer = setInterval(function() { timeLeft--; if (timeLeft == 0) { clearInterval(timer); alert("时间到！你的得分是：" + points); return; } document.title = "时间：" + timeLeft + "秒"; }, 1000); for (var i = 0; i < 9; i++) { var hole = document.createElement("div"); hole.className = "hole"; hole.onclick = function() { if (this.innerText == "🐭") { points++; score.innerText = points; } }; holes.appendChild(hole); } setInterval(function() { var holes = document.getElementsByClassName("hole"); var index = Math.floor(Math.random() * holes.length); for (var i = 0; i < holes.length; i++) { holes[i].innerText = ""; } holes[index].innerText = "🐭"; }, 1000); } startGame(); </script> </body> </html> ``` 这个游戏使用了 HTML、CSS 和 JavaScript 技术。HTML 代码定义了游戏页面的结构，CSS 代码定义了页面元素的样式，JavaScript 代码则实现了游戏的逻辑。游戏规则是，在 30 秒内，玩家需要尽可能多地点击出现在洞中的地鼠图标，每次点击得 1 分，时间结束后会弹出得分对话框。

阅读全文