JavaScript实现简单打地鼠游戏 JavaScript实现简单打地鼠游戏

本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码，供大家参考，具体内容如下
效果如下：

【JavaScript实现简单打地鼠游戏】html代码：

- 锐客网得分:0时间:00:00

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&&xtop&&y{mainFrame.removeChild(a); let v = bulgeQueue[index]; let element = document.getElementById("mouseId"+v[2]); element.src = "https://www.it610.com/article/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{if(pauseFlag) return; for(let i = 0; i < bulgeQueue.length; i ++ ){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 = "https://www.it610.com/article/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 = "https://www.it610.com/article/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经典小游戏汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。