How to design hit the mouse game using HTML, CSS and JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we are going to build the famous hit the mouse game using HTML, CSS, and vanilla JavaScript. Many of you wondering what is Vanilla JavaScript, it is nothing just plain JavaScript written without the use of any libraries. In the hit the mouse game, the player needs to hit the mouse with the hammer in order to earn points and win the game.

Approach

To design the mouse game, we need to write the code IN HTML, CSS, and JavaScript.

Step 1 − Firstly, let us look into the HTML part of the code; in this part, we give the base design to the game by signifying the background, heading and points display for the player. We are also providing two buttons to start and stop the game and at last we design the hammer to be used to hit the mouse.

Step 2 − In the next step we write the CSS part of the game where we provide styling to the game by giving animations and other various effects also defining the colors to the background and text as well as providing size to the text and rotation to the hammer.

Step 3 − In the last part we write Vanilla JavaScript where we are doing some tasks like calculating the points, start and stop loop of the game also converting the cursor into the hammer so that we can move it like a cursor to hit the mouse.

Example

In the below example, we design a hit-the-mouse game using HTML, CSS, and Vanilla JavaScript. We took all steps discussed above in the approach.


<!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>

To start the game, please hit the "ON" button with the hammer. When the game starts, the mouse appears from any of the six holes. You have to hit the mouse before it disappears. When you hit the mouse, the score increases by 1. To stop the game hit the "OFF" button with the hammer.

Prince Varshney

Updated on: 18-Oct-2022

383 Views

Kickstart Your Career

Get certified by completing the course

Get Started