📜  使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏
📅  最后修改于: 2021-08-30 11:45:59             🧑  作者: Mango
在本文中,我们将创建一个游戏,其中鼠标从孔中出来,我们用锤子敲击鼠标以获得积分。它是通过使用 HTML、CSS 和 Vanilla JavaScript 设计的。
HTML代码:
- 首先,我们创建一个 HTML 文件 (index.html)。
- 现在在创建 HTML 文件后,我们将使用 标签为我们的网页提供标题。它应该放在 标签之间。
- 然后我们将提供所有动画效果的 CSS 文件链接到我们的 html。它也放置在 部分内。
- 来到我们 HTML 代码的正文部分。
- 我们必须创建一个 div 来为我们的游戏提供主标题。
- 在第二个 div 中,我们为我们的游戏放置点数。
- 在最有趣的第三个 div 中,我们放置了 5 个孔并为它们分配了特定的类。
- 在下一个中,我们根据用户的兴趣放置 2 个按钮来启动和停止我们的游戏。
- 在最后的 div 中,我们放置了一个锤子图像,稍后我们将其转换为光标。
- 在正文部分的末尾,我们将 JS 文件的链接放在
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'
})
})