效果预览图
游戏规则
当灰太狼出现的时候鼠标左键点击灰太狼加10分，小灰灰出现的时候鼠标左键点小灰灰击减10分，不点击不减分不加分。
整体思路
1.把获取背景图片中每个地洞的位置，把所有位置放到一个数组中。
2.封装随机数函数，随机获取数组中洞的位置，同时给灰太狼/小灰灰图片设置定位，把灰太狼/小灰灰定位到随机的洞里。
3.设置计时器轮回图片使其达到从洞里出来到洞里去的效果。
4.设置点击事件，点击时更换状态图片，增加分数。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打地鼠</title>
<style>
* {
margin:0;
padding:0;
}
.wp {
width:320px;
height:480px;
background: url(./img/game_bg.jpg) no-repeat 0 0;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.one {
position:absolute;
left: 15px;
top: 158px;
cursor: pointer;
}
#defen{
display: block;
margin: 6px 0 0 56px;
font-size: 30px;
color: #fff;
}
.jdt{
margin-left: 63px;
margin-top: 20px;
height: 16px;
border-radius: 10px;
}
.ksyx{
width: 200px;
height: 200px;
background: linear-gradient(to right, #ff00ff, #00ffff);
border-radius: 50%;
margin: 0 auto;
color: #fff;
text-align: center;
line-height: 200px;
font-size: 30px;
margin-top: 100px;
animation: pulse 2s infinite linear;
cursor: pointer;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.yxjs{
width: 200px;
height: 200px;
background: linear-gradient(to right, #ff00ff, #00ffff);
border-radius: 50%;
margin: 0 auto;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 26px;
margin-top: 100px;
animation: pulse 2s infinite linear;
cursor: pointer;
display: none;
align-items: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="wp">
<img src="" alt="" class="one">
<var id="defen">0</var>
<img src="./img/progress.png" alt="" class="jdt">
<div class="ksyx">开始游戏</div>
<div class="yxjs">游戏结束您的得分为100点击继续游戏</div>
</div>
</body>
</html>
<script>
let timmer;
let one = document.querySelector('.one');
let defen = document.querySelector('#defen')
let jdt = document.querySelector('.jdt')
let ksyx = document.querySelector('.ksyx')
let yxjs = document.querySelector('.yxjs')
let n=0;
let dr = 1;
let jore = ['h','x'];
let dong = [ { x:96,y:112 },{ x:15,y:158 },{ x:187,y:140 },{ x:103,y:189 },{ x:30,y:292 },{ x:119,y:273 },{ x:207,y:296 },{ x:17,y:219 },{ x:200,y:212 }];
ksyx.onclick = function(){
ksyx.style.display = 'none';
timmer = setInterval(function(){
let sjgd = sj(0,8)
if(dr==0){
n--;
if (n<0) {
dr=1;
one.style.left = `${dong[sjgd].x}px`
one.style.top = `${dong[sjgd].y}px`
let dl= jore.sort(function(){
return Math.random()-0.5
})
}
}
if(dr==1){
n++;
if(n==5){
dr=0;
}
}
one.src = './img/'+jore[0]+n+'.png';
},100);
//进度条
let s = 30;
let jdtjsq ;
jdtjsq = setInterval(function(){
s--;
jdt.style.width = s*6+'px'
if (s<0) {
clearTimeout(timmer)
yxjs.style.display = 'flex';
yxjs.innerHTML = '游戏结束您的得分为'+sum+'分';
}
},1000)
//封装随机数
function sj(m,n){
return Math.floor(Math.random()*(n-m+1)+m)
}
//得分机制
let sum = 0
one.onclick = function(){
n=9;
if (jore[0]=='x') {
sum -= 10;
}
if (jore[0]=='h') {
sum += 10;
}
console.log(sum);
if (sum>=50) {
defen.style.color = '#f00'
}
defen.innerHTML = sum;
}
}
</script>
