如何使用 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 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告