原生js做打地鼠游戏

           抱歉素材有点难找，这次的学习重点是在JS的实现，梳理一下打地鼠的实现逻辑，主要分为三个主要功能函数。

• 开始游戏：对分数、并根据游戏难度对游戏的倒计时和延迟进行初始化之后，利用setInterval定时器Math.random随机函数实现地鼠间隔一定时间随机出现在方块中的位置。其中表格可以使用table布局或者网格布局。
• 打地鼠：为了避免多次点击多次计算得分，用一个标志位来标志第一次点击，如果当前点击方块的itemid对应的方框里面有地鼠的样式，则得分+1
• 结束游戏：还原表格的布局之后将计算的得分反馈给用户

大概的展示如下

       

代码如下：

var startGame;//计时器
var score = 0;//总分
var time;//倒计时
var timeVal;//时间间隔
var curr_td = '';
 
//难度改变，对应其实分数改变
function changeTimeValue(){
    var diff = document.getElementById("diffculty").value;
    if(diff == 'high'){
        document.getElementById("time").value = 30;
    }else if(diff == 'normal'){
        document.getElementById("time").value = 60;
    }else{
        document.getElementById("time").value = 120;
    };
}
 
//开始游戏
function showMouse(){
    score = 0;//总分
    var diff = document.getElementById("diffculty").value;
    if(diff == 'high'){
        time = 30;
        timeVal = 500;
    }else if(diff == 'normal'){
        time = 60;
        timeVal = 1000;
    }else{
        time = 120;
        timeVal = 2000;
    }
    //开始游戏之后禁用开始游戏和选择难度
    document.getElementById("start").disabled = true;
    document.getElementById("diffculty").disabled = true;
 
    startGame = window.setInterval(function(){
        //清空所有表格里的img
        var itemArr = document.getElementsByTagName('td');
        for (var i = 0; i < itemArr.length; i++) {
            itemArr[i].style.backgroundColor = '#00ff35';
            itemArr[i].innerHTML = '';
        };
        //生成一个1~25的随机数
        var mouse = parseInt(Math.random()*25+1);
        var index = 'item_'+mouse;
 
        time = time - 1;
        document.getElementById("time").value = time;
        if(time <= 0){
            document.getElementById("score").value = 0;
            changeTimeValue();
            window.clearInterval(startGame); 
            alert('游戏结束，你的得分是'+score);
            //游戏结束之后重新启用开始游戏和选择难度
            document.getElementById("start").disabled = false;
            document.getElementById("diffculty").disabled = false;
            return false;
        }
 
        //操作dom
        document.getElementById(index).style.backgroundColor = '#ffffff';
        document.getElementById(index).innerHTML = '';
    },timeVal);
};
//停止游戏
function stop(){
    var itemArr = document.getElementsByTagName('td');
     window.clearInterval(startGame); 
     for (var i = 0; i < itemArr.length; i++) {
            itemArr[i].style.backgroundColor = '#00ff35';
            itemArr[i].innerHTML = '';
    };
    document.getElementById("score").value = 0;
    changeTimeValue();
    alert('游戏结束，你的得分是'+score); 
    //点击停止结束之后重新启用开始游戏和选择难度
    document.getElementById("start").disabled = false;
    document.getElementById("diffculty").disabled = false;
};
//打地鼠
function bump(itemid){
    //防止多次点击
    if(curr_td == itemid){
        return false;
    };
    curr_td = itemid;
 
    var itemId = 'item_' + itemid;
    //var curr_item = document.getElementById('itemId');
    if(document.getElementById(itemId).innerHTML != ''){
        score = score + 1;
        document.getElementById("score").value = score;
    };
}