js案例：打地鼠游戏（打灰太狼）
效果预览图
游戏规则
当灰太狼出现的时候鼠标左键点击灰太狼加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>