js打地鼠游戏

时间:2022-05-22 风顶人气:0

效果如下：

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打地鼠游戏

更多有趣的经典小游戏实现专题，分享给大家：

加载全部内容