JavaScript实现简单打地鼠游戏

2024-09-30 03:05:56

本文实例为大家分享了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经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript实现打地鼠游戏

本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下游戏说明: 点击"开始游戏"按钮,在图中随机产生老鼠,老鼠消失前单击老鼠进行击打,打中一次即可获得100的积分,没有打中老鼠,扣取100积分 css模块 <style> #div0{ text-align: center; width: 1360px; height: 600px; margin: 60px auto; background-image: url("imag
JavaScript实现打地鼠小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
js实现打地鼠小游戏

话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {
JavaScript 打地鼠游戏代码说明

演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码代码如下: <style> #panel{height:300px;width:300px;background:#cc
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编
JavaScript实现简单打地鼠游戏

本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下效果如下: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/index.js"></script> <link rel="s
QT实现简单打地鼠游戏

本文实例为大家分享了QT实现简单打地鼠游戏的具体代码,供大家参考,具体内容如下开发工具:VS2017,qt5.9.8 开发语言:c++ 实现功能: 有若干地鼠洞,每次出现一只地鼠,当击中地鼠后,分数加1,地鼠更换位置.当分数大于20时,游戏结束. 实现思路: 1.先初始化一个页面,放一只地鼠和若干个地鼠洞,为地鼠和地鼠洞添加槽函数. 2.当点击时就执行相应函数.判断是否击中,从而对其进行加分或者减分. 3.当击中地鼠后,应该刷新页面,让地鼠换个位置出现. 4.重复2.3,直到分数到达一定
原生JavaScript实现简单五子棋游戏

本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面注释都很明确了,大家好好学习. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=d
利用原生的JavaScript实现简单拼图游戏

前言本篇主要讲解,如何利用原生的 JavaScript 来实现一个简单的拼图小游戏. 一.游戏的基础逻辑想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制.交互的处理.定时器等. 1.图形绘制图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制.即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做
javascript实现简单打字游戏

本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>传智打字游戏</title> <style type="text/css"> .label{ position:a
基于JavaScript实现简单扫雷游戏

对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
javascript实现简单的贪吃蛇游戏

javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;
javascript实现数字配对游戏的实例讲解

游戏效果如下图所示: 规则: 在4X5的格子中,有随机的互不相等的10个数,每个数据有两份(也就是20个数,有两两相等的十对),随机分布在20个格子中.游戏开始,弹出二十个数的序列.每次点击格子会显示当前格子中的数据并暂时保留显示,直到下一次点击,如果下一次点击显示的数据与保留的数据不同,则之前点击保留的数据会消失(仍然存在于该格子但不显示).如果连续点击显示的两个数据一样,则两个数据都会显示并且不会再消失. 直到所有数据都通过连续点击相同数据的方式显示出来,就算游戏结束,报出游戏用时.此时可以

JavaScript实现简单打地鼠游戏

相关推荐

随机推荐