原生js打地鼠

我们要做的是一个打地鼠的游戏，只用原生js

1.导入需要的图片

2.编写页面css样式demo.css

*{
    margin:0;
    padding:0;
}
.game{
    position: relative;
    width:750px;
    height:600px;
    margin:100px auto;
}
.ground{
    position: relative;
    width: 750px;
    height:550px;
    background:url('./images/bg_canvas.png');
    cursor:url("./images/hammer.png"),auto;
}
.score{
    position: absolute;
    width:300px;
    height:30px;
    left:420px;
    top:180px;
}
.live{
    position: absolute;
    top:180px;
    right:100px;
}
.score span,
.live span{
    color:#fff;
    line-height:30px;
    font-size:24px;
    vertical-align: top;
    margin-left:10px;
}

.mask{
    position: absolute;
    width:140px;
    height:125px;
    /* border:1px solid #000; */
    overflow: hidden;
}
.mouse{
    position: absolute;
    width:110px;
    height:110px;
    overflow: hidden;
    left:0;
    top:20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: top 0.5s;
    overflow: hidden;
}

@keyframes moveTop {
    0% {
        top: 70px;
    }
    100% {
        top: 20px;
    }
}

编写页面效果

编写js(demo.js)

var ground;
// 地鼠出现位置坐标
var coordinate = [{x: 130, y:173}, {x: 320, y:171}, {x: 515, y:175}, {x: 105, y: 265}, {x: 320, y: 256}, {x: 522, y: 256}, {x: 96, y: 350}, {x: 320, y: 355}, {x: 540, y: 358}];//洞口坐标
// 地鼠出现定时器
var gametimer;
var mask = [];
var mouse = new Array(9);
// 最大地鼠数
var maxCount = 2;
// 分数  点中一个加10
var score = 0;
// 生命 自由下落一个减一
var life = 10;
window.onload = function(){
    ground = document.getElementsByClassName('ground')[0];
    ground.onmousedown = function(){
        ground.style.cursor = 'url("./images/hammer2.png"), auto'
    };
    ground.onmouseup = function(){
        ground.style.cursor = 'url("./images/hammer.png"), auto'
    };
    init();
}

function init(){
    // 创建地鼠出现位置
    createMask();
    // 每隔一段时间出现一个地鼠
    gameTimer = setInterval(function(){
        // 创建每一个地鼠
        // createMouse();
        controlMouse();
        // 每次生成后判断是否结束
        if(life <= 0){
            clearInterval(gameTimer);
            alert('游戏结束：得分：' + score);
        }
        document.getElementsByClassName('scoreCon')[0].innerHTML = score;
        document.getElementsByClassName('life')[0].innerHTML = life;
        // 最大数++
        maxCount = score / 100 + 1;
    },50);
}

function createMask(){
    // 根据坐标生成洞穴位置
    for(var i = 0; i < coordinate.length;i ++){
        // 创建div  将来插入地鼠
        var temp = document.createElement('div');
        temp.classList.add('mask');
        // 确定每一个地鼠巢穴位置
        temp.style.left = coordinate[i].x + 'px';
        temp.style.top = coordinate[i].y + 'px';

        // 创建草坪遮盖
        var img = document.createElement('div');
        img.classList.add('mask');
        // 设置遮罩层背景  每一个洞穴背景不一样
        img.style.background = 'url("./images/mask'+i+'.png")';
        // 控制层级  草坪在地鼠身上
        // img.style.zIndex = 100;
        img.style.zIndex = i * 2 +1;

        // 将元素放置在数组中
        mask[i] = temp;
        temp.appendChild(img);
        // 将创建div插入父级
        ground.appendChild(temp);
        // 记录点击的位置
        temp.index = i;
        // 点击每一个消失
        temp.onclick = function(){

            disappear(this.index,true);
        }
    }
}

// 创建地鼠
function createMouse(i){
    // 随机的背景图片
    var num = Math.floor(Math.random() * 4);
    mouse[i] = num;
    var temp = document.createElement('div');
    temp.classList.add('mouse');
    // 设置地鼠出现的背景图片
    temp.style.background = 'url("./images/mouse'+num+'.png")';

    // 每一个地鼠需要出现在指定的位置  在对应洞穴上出现一只地鼠
    // 用两个数组对应  一个存放着洞穴  一个存放地鼠
    mouse[i] = temp;
    temp.style.zIndex = i * 2 ;
    temp.style.animation = "moveTop 0.5s linear";

    mask[i].appendChild(temp);
    var timer = setTimeout(function(){
        disappear(i,false);
    },2000);
    temp.timer = timer;
}
// 控制生称帝书的条件
function controlMouse(){
    // 随机出现位置  并且同时出现的地鼠个数不大于最大个数  同一个位置不能出现两只
    var num = Math.floor(Math.random()*9);
    if(mouse.filter(function (item){
        return item;
        // 限制出现的最大数和出现的位置
    }).length < maxCount && mouse[num] == null){
        createMouse(num);
    }
}

// 消失函数
function disappear(i,isHit){
    if(mouse[i]){
        // 无论是否被打均缩回洞里  通过改变top值
        mouse[i].style.top = '70px';
        // 被打 改变样式 添加打懵圈的小星星 改变背景图片
        if(isHit){
            // 打中分数加十
            score += 10;
            // 创建包含懵圈小星星的元素
            var bomp = document.createElement('img');
            bomp.classList.add('mouse');
            bomp.style.top = '-40px';
            // 添加gif动图为背景显示
            bomp.src = "./images/bomb.gif";
            // 替换掉当前老鼠的图片
            mouse[i].style.backgorund = 'url("./images/hit'+mouse[i].num +'")';
            // 插入到当前点击的位置
            mouse[i].appendChild(bomp);
            // 清除自身的下落
            clearTimeout(mouse[i].timer);
        }else{
            // 没有被打  自己缩回生命减一
            life -= 1;
        }
        setTimeout(function(){
            if(mouse[i]){
                mask[i].removeChild(mouse[i]);
            }
            mouse[i] = null;
        },500);
    }
}

接下来我们看看最后效果

游戏规则是，每砸中一个地鼠分数加10，少砸一个地鼠生命减1，生命为0计算总分数，地鼠会随机出现，砸的越快出现的也就越快，

需要测试效果的，复制代码就可以了。