首页给我一个html漂亮炫酷的小游戏代码，好玩的

给我一个html漂亮炫酷的小游戏代码，好玩的

时间: 2023-07-16 12:11:53 浏览: 120

以下是一个简单的 HTML 游戏，叫做“打地鼠”： ```html <!DOCTYPE html> <html> <head> <title>打地鼠游戏</title> <style> body { background-color: #333; color: white; font-family: Arial, sans-serif; text-align: center; } h1 { font-size: 3em; margin-top: 50px; } #game { margin: 50px auto; width: 500px; height: 500px; position: relative; background-image: url('https://i.imgur.com/0v2jKPY.png'); background-size: contain; background-repeat: no-repeat; } #hole { width: 100px; height: 100px; position: absolute; top: 200px; left: 200px; background-image: url('https://i.imgur.com/7KJHjE5.png'); background-size: contain; background-repeat: no-repeat; cursor: pointer; } </style> </head> <body> <h1>打地鼠游戏</h1> <div id="game"> <div id="hole"></div> </div> <script> var score = 0; var holes = [ { top: 50, left: 50 }, { top: 200, left: 200 }, { top: 350, left: 350 } ]; function randomHole() { return holes[Math.floor(Math.random() * holes.length)]; } function showMole() { var hole = randomHole(); document.querySelector('#hole').style.top = hole.top + 'px'; document.querySelector('#hole').style.left = hole.left + 'px'; document.querySelector('#hole').style.display = 'block'; setTimeout(hideMole, 1000); } function hideMole() { document.querySelector('#hole').style.display = 'none'; setTimeout(showMole, 500); } function hitMole() { score++; document.querySelector('#score').textContent = score; } document.querySelector('#hole').addEventListener('click', hitMole); showMole(); </script> <p>得分：<span id="score">0</span></p> </body> </html> ``` 这个游戏有三个地鼠洞，每秒钟会随机出现一个地鼠，玩家需要在1秒内点击它，每次点击得1分。可以根据自己的需求调整游戏难度和样式。

阅读全文