JavaScript实现简单打地鼠游戏
更新时间：2021年10月09日 17:06:51 作者：风顶
这篇文章主要为大家详细介绍了JavaScript实现简单打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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打地鼠游戏
更多有趣的经典小游戏实现专题，分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript style对象与CurrentStyle对象案例详解
这篇文章主要介绍了JavaScript style对象与CurrentStyle对象案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置2010-07-07
这篇文章主要介绍Javascript如何判断数据类型和数组类型,通俗易懂,需要的朋友可以参考下。2016-06-06
这篇文章主要为大家详细介绍了JS使用Dijkstra算法求解最短路径，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
有时候我们需要使用a这个超级链接，而又不使用href来完成跳转，针对这个问题，可以采用下面的解决方案2014-04-04
下面小编就为大家带来一篇浅谈Javascript数据属性与访问器属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了js使用Replace结合正则替换重复出现的字符串功能,可实现关键词描红的功能,涉及JS重复匹配的相关操作技巧,需要的朋友可以参考下2016-12-12
本文为大家详细介绍下使用js完成节点的增删改复制等的操作，具体的实现如下，感兴趣的朋友可以参考下2014-01-01
在 Promise 中,reject 和 catch 是处理异步操作失败的两种方式,本文给大家介绍promise中reject和catch处理上区别对比分析,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了JavaScript将数组转换成CSV格式的方法,实例分析了javascript使用valueOf方法将数组值转换为csv格式字符串的技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最新评论