使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏

在本文中，我们将创建一个游戏，其中鼠标从孔中出来，我们用锤子敲击鼠标以获得积分。它是通过使用 HTML、CSS 和 Vanilla JavaScript 设计的。

HTML代码：

• 首先，我们创建一个 HTML 文件 (index.html)。
• 现在在创建 HTML 文件后，我们将使用                               
          

  Hit the Mouse

      
         
          

  Points: 0

      
         
          

          

          

          

          

      
      
                       START                                  STOP              
         
               
                     

---

style.css

/* 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: green;
    color: white;
    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: 400px;
    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://media.geeksforgeeks.org/wp-content/uploads/20210302112038/hole2.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: 10;
    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;
}
  
/* It is used because we want to 
display single button at a time
on the screen */
  
/* This functionally is moreover 
controlled by JS */
.stop {
    display: none;
}
  
.hammer img {
    position: absolute;
    height: 125px;
    z-index: 40;
    transform: translate(-20px, -50px);
    pointer-events: none;
    animation: marne_wale_effects 0.1s ease;
}
  
/* Giving animation to our rat */
@keyframes move {
    from {
        bottom: -60px;
    }
    to {
        bottom: 0;
    }
}
  
/* Giving effects to hammer when 
we hit on the rat */
@keyframes marne_wale_effects {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-40deg);
    }
}

script.js

// Selection of all the CSS selectors 
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() * 5)
        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://media.geeksforgeeks.org/wp-content/uploads/20210303135621/rat.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;
    })
  
    // This is coded for changing the score
    // to 0 and change the stop button
    // again to the start button!
    stop_btn.addEventListener('click', () => {
        clearInterval(game)
        stop_btn.style.display = 'none'
        start_btn.style.display = 'inline-block'
        score.innerHTML = '0'
    })
})