JavaScript實(shí)現(xiàn)簡單打地鼠游戲
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)打地鼠游戲的具體代碼,供大家參考,具體內(nèi)容如下
效果如下:
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">時(shí)間:<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 = []; //所有的洞穴坐標(biāo) var caveCoordMark = []; var mouseOffsetX = 10; //變化成錘子后X軸的偏移 var mouseOffsetY = 15; //Y軸的偏移 var mouseTimeQueue = []; //老鼠存在的時(shí)間隊(duì)列 var nowMouseTime = []; //老鼠已經(jīng)經(jīng)過的生命周期 var bulgeQueue = []; //正在探頭的老鼠隊(duì)列 var destroyQueue = []; //真正銷毀的老鼠隊(duì)列 var maxMouseNum = 5; //最多同時(shí)存在的老鼠數(shù)量 var startLoop = undefined; //開關(guān)的啟動(dòng) var pauseFlag = false; //暫停標(biāo)志 var minTime = 10; //生存的最小時(shí)間周期 var maxTime = 15;//生存的最大時(shí)間周期 var mouseFrameNum = 5; // 圖片的幀數(shù) 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); //以計(jì)算出的洞穴長寬中最小的邊作為洞穴的長寬 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; //計(jì)算鼠標(biāo)偏移 let y = yy + mouseOffsetY; //鼠標(biāo)點(diǎn)擊的位置 // 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){//老鼠數(shù)量少于5個(gè) 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); }
項(xiàng)目資源:js打地鼠游戲
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題,分享給大家:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05BootStrap Table 分頁后重新搜索問題的解決辦法
這篇文章主要介紹了BootStrap Table 分頁后重新搜索問題的解決辦法,自定義搜索且有分頁功能,比如搜索產(chǎn)品名的功能。小編給大家?guī)砹岁P(guān)鍵代碼,非常不錯(cuò),需要的朋友可以參考下2016-08-08Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-05-05(function(){})()的用法與優(yōu)點(diǎn)
(function(){})()的用法與優(yōu)點(diǎn)...2007-03-03JavaScript實(shí)現(xiàn)文字跟隨鼠標(biāo)特效
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)文字跟隨鼠標(biāo)特效,d代碼簡單易操作,感興趣的朋友可以參考下2015-08-08微信小程序?qū)崿F(xiàn)星星評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星星評(píng)價(jià)效果,支持多個(gè)條目評(píng)價(jià),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11JavaScript遍歷數(shù)組的方法代碼實(shí)例
這篇文章主要介紹了JavaScript遍歷數(shù)組的方法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本)
這篇文章主要介紹了D3.js的基礎(chǔ)部分之?dāng)?shù)組的處理數(shù)組的排序和求值(v3版本) ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05