js案例：打地鼠游戏（打灰太狼）

效果预览图

游戏规则

当灰太狼出现的时候鼠标左键点击灰太狼加10分，小灰灰出现的时候鼠标左键点小灰灰击减10分，不点击不减分不加分。

整体思路

1.把获取背景图片中每个地洞的位置，把所有位置放到一个数组中。

2.封装随机数函数，随机获取数组中洞的位置，同时给灰太狼/小灰灰图片设置定位，把灰太狼/小灰灰定位到随机的洞里。

3.设置计时器轮回图片使其达到从洞里出来到洞里去的效果。

4.设置点击事件，点击时更换状态图片，增加分数。

完整代码

html 复制代码

<!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>