极客教程使用HTML、CSS和Vanilla JavaScript设计打地鼠游戏
在本文中，我们将创建一个游戏，游戏中有一个老鼠从洞中出现，我们用锤子击打老鼠以获得分数。这个游戏是使用HTML、CSS和Vanilla JavaScript设计的。
HTML代码：
- 首先，我们创建一个HTML文件（index.html）。
- 现在，在创建了HTML文件之后，我们将使用
<title>标签为我们的网页添加一个标题。它应该放在<head>标签之间。 - 然后，我们链接CSS文件，该文件提供了所有动画效果，用于我们的HTML文件。它也放在
<head>部分。 - 接下来是我们的HTML代码的body部分。
- 我们必须创建一个div来给我们的游戏添加一个主标题。
- 在第二个div中，我们放置游戏的分数。
- 在第三个div中，我们放置5个洞，并给它们分配一个特定的类。
- 在接下来的一个div中，我们放置了两个按钮，用于根据用户的兴趣来启动和停止游戏。
- 在最后一个div中，我们放置了一个锤子图片，稍后我们将把它转换为一个光标。
- 在我们的body部分的末尾，我们在
<script>标签中放置了一个指向我们JS文件的链接。
CSS代码： CSS用于为我们的HTML页面提供不同类型的动画和效果，使其对所有用户都具有交互性。在CSS中，我们需要记住以下几点 –
- 恢复所有浏览器效果。
- 使用类和id来给HTML元素添加效果。
- 使用@keyframes{}为HTML元素添加动画。
JavaScript代码： 在这个部分，我们编写以下代码 –
- 锤子的击打效果。
- 将光标更改为锤子。
- 启动/停止游戏。
- 计算击打次数。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hit-The-Mouse</title>
<link rel="stylesheet" href="style.css">
<!-- Adding google fonts to our project
to set chosen font family -->
<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">
<h1>Hit the Mouse</h1>
</div>
<div class="score">
<h3>Points: <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>
<div class="buttons">
<button class="button start">
START
</button>
<button class="button stop">
STOP
</button>
</div>
<div class="hammer">
<img src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210302112037/hammer1.png'>
</div>
<!-- linking our js file -->
<script src="script.js"></script>
</body>
</html>
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);
}
}
Javascript代码
// 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'
})
})
玩游戏的步骤：
- 点击开始按钮开始游戏。
- 点击开始按钮后，物体从洞中出来。
- 用鼠标点击物体以获取更多的分数。
- 点击停止按钮暂停游戏。
输出：
