JavaScript实现打地鼠

最新推荐文章于 2022-09-21 16:33:04 发布

风顶

最新推荐文章于 2022-09-21 16:33:04 发布

阅读量1.1k

点赞数 3

分类专栏： JavaScript 文章标签：打地鼠

本文链接：https://blog.youkuaiyun.com/qq_38865022/article/details/103735930

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了使用HTML、CSS和JavaScript实现一个简单的打地鼠游戏的过程。从游戏界面设计到功能实现，包括游戏循环、动画更新、碰撞检测等关键环节，为初学者提供了一个完整的项目案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

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);
}

项目资源：https://download.youkuaiyun.com/download/qq_38865022/12058296