下面是关于打地鼠小游戏的HTML代码,下方有代码所需要的图片.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: darkturquoise;
}
h3{
text-indent: 200px; /* 将段落的第一行缩进 200 像素 */
font-size: 50px;
color:palegoldenrod;
letter-spacing: 10px;
margin-top: 100px;
}
.main{
widows: 600px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows:200px 200px 200px;
}
.main:hover{
/* cursor修改鼠标样式 */
/* cursor: url("img/未标题-2.ico"),auto; */
cursor: url("img/锤子1.ico"),auto;
}
.item{
width: 100%;
height: 100%;
position: relative;
}
.item img{
width: 90%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: none;
}
.item .mouse{
width: 60%;
}
.item .hole{
display: block;
}
.item .boom{
width: 60%;
}
</style>
</head>
<body>
<h3>积分: <span class="score">0</span></h3>
<div class="main">
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
<div class="item">
<img src="img/边框.png" alt="" class="hole">
<img src="img/地鼠.png" alt="" class="mouse">
<img src="img/地鼠2.png" alt="" class="boom">
</div>
</div>
<script>
var mouseLists=document.querySelectorAll(".mouse");
var score=document.querySelectorAll(".score")[0]
var s=0;
for(var i=0;i<mouseLists.length;i++){
//给每个老鼠绑定点击事件,当点击老鼠的时候,让老鼠消失
mouseLists[i].onclick=function(){
this.style.display="none";
this.parentElement.lastElementChild.style.display="block";
var _that=this;//声明一个变量储存this
s+=100;
setTimeout(function(){
_that.parentElement.lastElementChild.style.display="none";
},260)
score.innerHTML=s;
}
}
setInterval(function(){
var i=Math.floor(Math.random()*9)
mouseLists[i].style.display="block";
},1000)
</script>
</body>
</html>
下面是代码实现的一张效果图,因为截图需要用到鼠标,所有鼠标修改后的样式看不见效果,因为鼠标样式图片无法上传,大家可以把修改鼠标样式的代码注销掉,或者自己去找想要的样式进行稍加修改就行。
图片1
https://ae01.alicdn.com/kf/He3f6257612544d65b7e0a422c1bc833dz.png
图片2
https://ae01.alicdn.com/kf/H1d72f88e6fd44598a2afa15b02b19a56j.png
图片3
https://ae01.alicdn.com/kf/He3f4100f7c9944e98112d73e49a8418cE.png
关于代码中需要的小锤子标志,这里因为图片格式问题无法上传,需要的话可以自己扣一下图。