| 本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码，供大家参考，具体内容如下 效果如下： 
html代码： <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="css/index.css" /> <style type="text/css"> </style> </head> <body> <div id="controlCenter"> <div class="buttons"> <button class="buttonCss" onclick="startGame()">开始</button> <button class="buttonCss" onclick="pauseGame()">暂停</button> <button class="buttonCss" onclick="stopGame()">停止</button> </div> <div class="buttons"> <div class="score"><span>得分:</span><span class="spanCss" id="scoreId">0</span></div> <div class="score">时间:<span class="spanCss" id="timeId">00:00</span></div> </div> </div> <div id="mainFrame" class="mouseMiddle"> </div> </body></html> js代码： var columns = 4;var rows = 3;var gameFrameWidth = 0;var gameFrameHeight = 0;var caveWidth = 0;var caveHeight = 0;var caveCoord = []; //所有的洞穴坐标var caveCoordMark = [];var mouseOffsetX = 10; //变化成锤子后X轴的偏移var mouseOffsetY = 15; //Y轴的偏移 var mouseTimeQueue = []; //老鼠存在的时间队列var nowMouseTime = []; //老鼠已经经过的生命周期var bulgeQueue = []; //正在探头的老鼠队列var destroyQueue = []; //真正销毁的老鼠队列var maxMouseNum = 5; //最多同时存在的老鼠数量var startLoop = undefined; //开关的启动var pauseFlag = false; //暂停标志var minTime = 10; //生存的最小时间周期var maxTime = 15;//生存的最大时间周期var mouseFrameNum = 5; // 图片的帧数var leftWidth = 0;var topHeight = 0;//var preTimeStamp = 0; var score = 0; window.onload = function() { init(); mainFrameOnclick();} function init() {// preTimeStamp = Date.parse(new Date()); gameFrameWidth = mainFrame.offsetWidth; gameFrameHeight = mainFrame.offsetHeight; caveWidth = Math.floor(gameFrameWidth / (columns + 2)); caveHeight = Math.floor(gameFrameHeight / (rows + 2)); caveHeight = caveWidth = Math.min(caveHeight, caveWidth); //以计算出的洞穴长宽中最小的边作为洞穴的长宽 caveCoord = drawCave(); mouseAnimationUpdate(); scoreAutomationChange();} function timeChange(){ let timestamp = Date.parse(new Date()); let time = document.getElementById("timeId"); let m = 0; let s = 0; setInterval(()=>{ let now = Date.parse(new Date()); let v = (now - timestamp)/1000;// console.log(v); let str = ""; s = v % 60; m = Math.floor(v/60); str = str + (m>9?m:"0"+m); str = str + ":"; str = str + (s>9?s:"0"+s); time.innerText = str; },1000);} function scoreAutomationChange(){ leftWidth = mainFrame.getBoundingClientRect().left; topHeight = mainFrame.getBoundingClientRect().top; mainFrame.addEventListener("click",(event)=>{ CheckHitMouse(event.pageX,event.pageY);// CheckHitMouse(event.pageX - left,event.pageY - top); });} function CheckHitMouse(xx,yy) { let x = xx + mouseOffsetX; //计算鼠标偏移 let y = yy + mouseOffsetY; //鼠标点击的位置// let c = document.createElement("div");// c.style.backgroundColor = "red";// c.style.width = "10px";// c.style.height = "10px";// c.style.left = x-5 + "px";// c.style.top = y-5 + "px";// c.style.position = "absolute";// mainFrame.appendChild(c);// console.log("**"+x+" "+y); let flag = false; for(let i = 0; i < bulgeQueue.length; i ++ ){ let mouse = document.getElementById("mouseId"+bulgeQueue[i][2]); let left = mouse.getBoundingClientRect().left; let top = mouse.getBoundingClientRect().top; console.log(left+" "+top); if(x>left&&x<left+caveWidth&&y>top&&y<top+caveHeight){ playHitAnimation(xx-leftWidth,yy-topHeight,i); score+=1; document.getElementById("scoreId").innerText = score; } }} function playHitAnimation(x,y,index){ let a = document.createElement("img"); a.src = "img/4.png"; a.width = caveWidth; a.hheight = caveHeight; a.classList.add("caveCss"); a.style.left = x-5 +"px"; a.style.top = y-5 + "px"; mainFrame.appendChild(a); setTimeout(()=>{ mainFrame.removeChild(a); let v = bulgeQueue[index]; let element = document.getElementById("mouseId"+v[2]); element.src = "img/mouse0.png"; caveCoord.push(v); bulgeQueue.splice(index,1); nowMouseTime.splice(index,1); mouseTimeQueue.splice(index,1); },100);} function startGame() { pauseFlag = false; window.clearInterval(); timeChange(); startLoop = setInterval(()=>{ if(pauseFlag) return; for(let i = 0; i < bulgeQueue.length; i ++ ){ if(nowMouseTime[i] >= mouseFrameNum && nowMouseTime[i] <= mouseTimeQueue[i]){ nowMouseTime[i]+=1; } } if(bulgeQueue.length<maxMouseNum){//老鼠数量少于5个 let index = getRandom(caveCoord.length); bulgeQueue.push(caveCoord[index]); caveCoord.splice(index,1); mouseTimeQueue.push(getRandomTime()); nowMouseTime.push(0); } },500);} function mouseAnimationUpdate(){ setInterval(()=>{ if(pauseFlag) return; for(let i = 0; i < bulgeQueue.length; i ++ ){ if(nowMouseTime[i]<mouseFrameNum){ nowMouseTime[i]+=1; let mouse = bulgeQueue[i]; let element = document.getElementById("mouseId"+mouse[2]); element.src = "img/mouse"+nowMouseTime[i]+".png"; } else if(nowMouseTime[i]>mouseTimeQueue[i]){ let mouse = bulgeQueue[i]; let element = document.getElementById("mouseId"+mouse[2]); if(nowMouseTime[i]-mouseTimeQueue[i] >= mouseFrameNum+1){ caveCoord.push(bulgeQueue[i]); bulgeQueue.splice(i,1); nowMouseTime.splice(i,1); mouseTimeQueue.splice(i,1); break; } element.src = "img/mouse"+(mouseFrameNum-nowMouseTime[i]+mouseTimeQueue[i])+".png"; nowMouseTime[i]+=1; } } },200);} function pauseGame() { pauseFlag = pauseFlag ? false : true;} function stopGame() { location.reload();} function getRandomTime(){ return minTime + getRandom(maxTime - minTime);} function mainFrameOnclick() { let mf = document.getElementById("mainFrame"); mf.onclick = function(e) { mf.style.cursor = "url(img/01.ico),auto"; setTimeout(() => { mf.style.cursor = "url(img/21.ico),auto"; }, 200); setTimeout(() => { mf.style.cursor = "url(img/11.ico),auto"; }, 400); }} function drawCave() { let coord = getAxialCoord(); let count = getRandom(2) + 1; let mark = []; let newCoord = []; for(let i = 0; i < count; i++) { mark[getRandom(columns * rows)] = true; } for(let i = 0; i < coord.length; i++) if(mark[i] == undefined) { coord[i].push(i); newCoord.push(coord[i]); CreateCaveElement(coord[i][0], coord[i][1],i); } return newCoord;} function CreateCaveElement(axialX, axialY,index) { let createImg = document.createElement("img"); createImg.width = caveWidth; createImg.height = caveHeight; createImg.style.left = axialX + "px"; createImg.style.top = axialY + "px"; createImg.classList.add("caveCss"); createImg.id = "mouseId"+index; createImg.src = "img/mouse0.png"; mainFrame.appendChild(createImg);} function getAxialCoord() { let location = []; let xWidth = Math.floor(gameFrameWidth / columns); let xRange = xWidth - caveWidth; let yHeight = Math.floor(gameFrameHeight / rows); let yRange = yHeight - caveHeight; for(let i = 0; i < rows; i++) { for(let j = 0; j < columns; j++) { let coord = []; coord.push(j * xWidth + getRandom(xRange)); coord.push(i * yHeight + getRandom(yRange)); location.push(coord); } } return location;} function getRandom(max) { let a = Math.random(); return Math.floor(a * max);} 项目资源：js打地鼠游戏 更多有趣的经典小游戏实现专题，分享给大家： C++经典小游戏汇总 python经典小游戏汇总 python俄罗斯方块游戏集合 JavaScript经典游戏 玩不停 java经典小游戏汇总 javascript经典小游戏汇总 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
JavaScript实现打地鼠游戏
vue3:setup的两个注意点详解 |
