首页html+js打地鼠代码

html+js打地鼠代码

时间: 2024-09-20 07:09:54 浏览: 28

HTML 和 JavaScript 的结合常常用于创建动态网页和简单的游戏，比如打地鼠（Whac-a-Mole）游戏。在这个游戏中，通常有一个显示多个“地鼠洞”的区域，玩家需要点击快速出现的地鼠头。以下是简化的 HTML 和 JavaScript 示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>打地鼠游戏</title> <style> .mole { display: none; transition: all 0.5s; } </style> </head> <body> <div id="gameArea"> <div class="mole" onclick="hitMole(this)"></div>  </div> <button onclick="startGame()">开始游戏</button> <script> let moleCount = 5; // 地鼠数量 function startGame() { for (let i = 0; i < moleCount; i++) { const mole = document.querySelector('.mole'); mole.style.display = 'block'; setTimeout(() => { mole.style.display = 'none'; }, Math.floor(Math.random() * 1500) + 500); // 随机出现时间 } } function hitMole(mole) { mole.classList.add('hit'); // 模拟击中效果 } </script> </body> </html> ``` 这个示例只是一个基础框架，实际的游戏可能会更复杂，包括计分、动画效果和音效。

阅读全文