html打地鼠小游戏的代码是啥

柔情只为你懂 2024-03-27 18:11 11阅读 0赞

这是一个简单的 HTML 打地鼠小游戏的代码示例：

<!DOCTYPE html>
    <html>
    <head>
      <style>
        /* 定义游戏的样式 */
        #game {
          position: relative;
          width: 400px;
          height: 300px;
          border: 1px solid black;
          overflow: hidden;
        }
    
        #hole {
          position: absolute;
          width: 50px;
          height: 50px;
          background-color: green;
          border-radius: 50%;
        }
    
        #mole {
          position: absolute;
          width: 50px;
          height: 50px;
          background-color: brown;
          border-radius: 50%;
        }
      </style>
    </head>
    <body>
      
      <div id="game">
        <div id="hole"></div>
        <div id="mole"></div>
      </div>
    
      <script>
        // 定义游戏的逻辑
        let game = document.getElementById('game');
        let hole = document.getElementById('hole');
        let mole = document.getElementById('mole');
    
        // 定义打地鼠的函数
        function whack() {
          mole.style.display = 'none';
          setTimeout(() => {
            mole.style.display = 'block';
          }, Math.random() * 2000 + 1000);
        }
    
        // 设置地鼠出现的位置
        function setMolePosition() {
          hole.style.left = Math.random() * (game.offsetWidth - hole.offsetWidth) + 'px';
          hole.style.top = Math.random() * (game.offsetHeight - hole.offsetHeight) + 'px';
          mole.style.left = hole.style.left;
          mole.style.top = hole.style.top;
        }
    
        // 开始游戏
        setMolePosition();
        mole.addEventListener('click', whack);
        setInterval(setMolePosition, 2000);
      </script>
    </body>
    </html>

在这段代码中，我们使用了 HTML、CSS 和 JavaScript 来创建一个打地鼠小游戏。

HTML 用来创建游戏的界面，其中包含了一个游戏区域和一个地鼠的图像。

CSS 用来定义游戏的样式，