如何使用 HTML、CSS 和 JavaScript 设计打地鼠游戏？

在本教程中，我们将使用 HTML、CSS 和原生 JavaScript 构建著名的 打地鼠游戏。你们中的许多人可能想知道什么是原生 JavaScript，它仅仅是指不使用任何库的纯 JavaScript。在打地鼠游戏中，玩家需要用锤子击打老鼠以获得分数并赢得游戏。

方法

要设计打地鼠游戏，我们需要使用 HTML、CSS 和 JavaScript 编写代码。

步骤 1 − 首先，让我们看一下代码的 HTML 部分；在此部分中，我们通过指定背景、标题和玩家的分数显示来为游戏提供基本设计。我们还提供了两个按钮来启动和停止游戏，最后我们设计了用于击打老鼠的锤子。

步骤 2 − 在下一步中，我们编写游戏的 CSS 部分，在其中我们通过添加动画和其他各种效果来为游戏提供样式，还定义背景和文本的颜色，以及为文本提供大小和锤子的旋转。

步骤 3 − 在最后一部分中，我们编写原生 JavaScript，在其中我们执行一些任务，例如计算分数、启动和停止游戏循环，以及将光标转换为锤子，以便我们可以像移动光标一样移动它来击打老鼠。

示例

在下面的示例中，我们使用 HTML、CSS 和原生 JavaScript 设计了一个打地鼠游戏。我们在方法中讨论了所有步骤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Hit-The-Mouse</title>
   <style>/* Restoring all the browser effects */
   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Dancing Script', cursive;
      cursor: none;
   }
   /* Setting up the bg-color, text-color
   and alignment to all body elements */
   body {
      background-color: red;
      color: yellow;
      justify-content: center;
   }
   .heading {
      font-size: 2em;
      margin: 1em 0;
      text-align: center;
   }
   .score {
      font-size: 1.3em;
      margin: 1em;
      text-align: center;
   }
   .holes {
      width: 600px;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
   }
   .hole {
      flex: 1 0 33.33%;
      overflow: hidden;
      position: relative;
   }

   /* Use of pseudo classes */
   .hole:after {
      display: block;
      background: url('https://www.pngkey.com/png/full/60-608187_hole-hole-in-ground-png.png')
      bottom center no-repeat;
      background-size: contain;
      content: '';
      width: 100%;
      height: 70px;
      position: absolute;
      z-index: 20;
      bottom: -30px;
   }
   .rat {
      position: absolute;
      z-index: 20;
      height: 10vh;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      animation: move 0.5s linear;
   }
   .buttons {
      margin: 3em 0 0 0;
      text-align: center;
   }
   .button {
      background-color: inherit;
      padding: 15px 45px;
      border: #fff 2px solid;
      border-radius: 4px;
      color: rgb(21, 14, 235);
      font-size: 0.8em;
      font-weight: 900;
      outline: none;
   }
   .stop {
      display: none;
   }
   .hammer img {
      position: absolute;
      height: 125px;
      z-index: 400;
      transform: translate(-20px, -50px);
      pointer-events: none;
      animation: marne_wale_effects 0.1s ease;
   }
   @keyframes move {
      from {
         bottom: -60px;
      }
      to {
         bottom: 0;
      }
   }
   @keyframes marne_wale_effects {
      from {
         transform: rotate(0deg);
      }
      to {
         transform: rotate(-40deg);
      }
   }
   </style>
   <link href= "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
   <div class="heading">
      <h3>Hit the mouse with a hammer</h3>
   </div>
   
   <div class="score">
      <h3>Score--> <span>0</span></h3>
   </div>
   
   <div class="holes">
      <div class="hole hole1"></div>
      <div class="hole hole2"></div>
      <div class="hole hole3"></div>
      <div class="hole hole4"></div>
      <div class="hole hole5"></div>
      <div class="hole hole6"></div>
   </div>
   
   <div class="buttons">
      <button class="button start">
         ON
      </button>
   
      <button class="button stop">
         OFF
      </button>
   </div>

   <div class="hammer">
      <img src= 'https://i.pinimg.com/originals/08/d4/c4/08d4c4232ad5c3b152835810d8339de9.png'>
   </div>

   <script>
      const score = document.querySelector('.score span')
      const holes = document.querySelectorAll('.hole')
      const start_btn = document.querySelector('.buttons .start')
      const stop_btn = document.querySelector('.buttons .stop')
      const cursor = document.querySelector('.hammer img')

      // Here we changing our default cursor to hammer
      // (e) refers to event handler
      window.addEventListener('mousemove', (e) => {
         cursor.style.top = e.pageY + "px"
         cursor.style.left = e.pageX + "px"
      })

      // It is used to give the animation to
      // our hammer every time we click it
      // on our screen
      window.addEventListener('click', () => {
         cursor.style.animation = 'none'
         setTimeout(() => {
            cursor.style.animation = ''
         }, 101)
      })

      // From this part our game starts when
      // we click on the start button
      start_btn.addEventListener('click', () => {
         start_btn.style.display = 'none'
         stop_btn.style.display = 'inline-block'
         
         let holee
         let points = 0
         
         const game = setInterval(() => {
         
            // Here we are taking a random hole
            // from where mouse comes out
            let ran = Math.floor(Math.random() * 6)
            holee = holes[ran]
      
            // This part is used for taking the
            // mouse up to the desired hole
            let set_img = document.createElement('img')
            set_img.setAttribute('src','https://image.similarpng.com/very-thumbnail/2021/12/Rat-isolated-on-transparent-background-PNG.png')
            set_img.setAttribute('class', 'rat')
            holee.appendChild(set_img)
         
            // This part is used for taking
            // the mouse back to the hole
            setTimeout(() => {
               holee.removeChild(set_img)
            }, 700);
         }, 800)
   
         // It is used for adding our points
         // to 0 when we hit to the mouse
         window.addEventListener('click', (e) => {
            if (e.target === holee)
               score.innerText = ++points;
         })
      
         stop_btn.addEventListener('click', () => {
            clearInterval(game)
            stop_btn.style.display = 'none'
            start_btn.style.display = 'inline-block'
            score.innerHTML = '0'
         })
      })
   </script>
</body>
</html>

要开始游戏，请用锤子点击“开”按钮。游戏开始后，老鼠会从六个洞中的任何一个出现。你必须在它消失之前击打老鼠。当你击打老鼠时，分数会增加 1。要停止游戏，请用锤子点击“关”按钮。

更新于： 2022 年 10 月 18 日

535 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告