js写打地鼠游戏练习

最近上课写了一个打地鼠的小游戏，分享一下给大家。
以下是js的代码，完整代码链接：https://github.com/mouseGame

/*** 打地鼠游戏*/
let time = 59; //时间,默认为1分钟，即59秒
let timeBox = document.querySelector("#time"); //显示时间的盒子
let score = 0; //得分
let scoreBox = document.querySelector("#score"); //显示得分的盒子
let level = 1000; //难度，即生成地鼠的时间频率，默认为1秒，也就是1000毫秒
let laughBox = document.querySelector("#mshow"); //笑的音效盒子
let cryBox = document.querySelector("#mcry"); //哭的音效盒子
let controlBtn = document.querySelector("#begin"); //控制按钮
let maps = document.querySelectorAll(".table>div>div"); //地图，为生成地鼠的单元格(选择了16个格子)
let timerForT = null; //时间计时器
let timeForM = null; //地鼠生成计时器
/*** 时间显示函数*/
function showTime() {//显示当前时间，时间减一，判断时间是否为0，为0则清楚两个计时器（地鼠生成计时器和时间计时器），游戏结束timeBox.innerHTML = time<10 ? "0"+time : time;time--;if(time<0){clearInterval(timerForT);clearInterval(timeForM);}
}
/***随机生成地鼠*/
function showMouse() {// let pos = Math.round(Math.random()*100)%maps.length;let pos = Math.floor(Math.random()*maps.length); //随机生成一个0-15的数字for (let i = 0; i < maps.length; i++) {if(i== pos){//利用随机数和地图数组下对应关系，设置地鼠出现maps[i].innerHTML = "";//做地鼠出现的标记maps[i].setAttribute("v",1);laughBox.play();//播放笑的音效}else{//地鼠未出现的地方，清除地鼠出现的标记maps[i].innerHTML = "";maps[i].removeAttribute("v",0);//设置地鼠未出现的标记}}
}/*** 打地鼠*/
function breakMouse() {if(event.target.parentNode.getAttribute("v")==1){//判断点击的地方是否有地鼠，有则得分加一，播放哭的音效score++;event.target.src="images/break.png";cryBox.play();//刷新成绩scoreBox.innerHTML = score.toString();//立即修改该单元的v属性为0，防止连击，重复得分event.target.setAttribute("v",0);}}/*** 开始游戏*/
function gameStart() {//初始化时间和得分，设置控制按钮的状态，开始计时，随机生成地鼠time=59;score=0;scoreBox.innerHTML = score.toString();controlBtn.innerHTML = "结束游戏";controlBtn.setAttribute("s",1);//随机生成地鼠timeForM = setInterval(showMouse,level);//开始计时timerForT = setInterval(showTime,1000);}
/*** 结束游戏*/
function gameFinish() {controlBtn.innerHTML = "开始游戏";controlBtn.setAttribute("s",0);clearInterval(timerForT);clearInterval(timeForM);}/*** 游戏初始化* 功能：关联按钮的事件*/
function gameInit() {controlBtn.innerHTML = "开始游戏";controlBtn.setAttribute("s",0);//安装单元格的监听器for (let i = 0; i < maps.length; i++) {maps[i].addEventListener("click",breakMouse,false);}//安装控制按钮的监听器controlBtn.addEventListener("click",function () {if(event.target.getAttribute("s")==0){gameStart();}else{gameFinish();}});
}

效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！