2022最实用的HTML+JS实现推箱子游戏实例

村头老杨头

已于 2022-02-09 15:21:31 修改

阅读量2.3k

点赞数 3

文章标签： HTML javascript 游戏前端 css

于 2019-08-06 18:17:57 首次发布

本文链接：https://blog.csdn.net/qq_33670882/article/details/98642384

版权

HTML+JS+CSS制作推箱子小游戏，最新实用，简单方便，易理解。

HTML片段

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
            //创建地图
			var arr=[
				[0,0,0,0,0,0,1,1,1,1,1,1,1,1,1],
				[0,0,0,0,0,0,1,0,0,0,0,0,0,0,1],
				[0,0,0,0,0,0,1,0,1,0,1,0,1,0,1],
				[0,0,0,0,0,0,1,0,0,2,0,2,1,0,1],
				[1,1,1,1,1,1,1,0,0,0,2,0,0,0,1],
				[1,3,3,1,0,0,1,1,0,2,0,2,1,0,1],
				[1,3,3,0,0,0,1,1,0,2,0,2,0,0,1],
				[1,3,3,1,0,0,1,1,0,1,1,1,1,1,1],
				[1,3,3,1,0,1,0,2,0,2,0,1,0,0,0],
				[1,3,3,0,0,0,0,0,2,0,0,1,0,0,0],
				[1,0,0,1,1,1,5,0,0,1,1,1,0,0,0],
				[1,1,1,1,0,1,1,1,1,1,0,0,0,0,0]
			];
		</script>
		<script type="text/javascript" src="js/index.js"></script>
		<style>
			#box>div{
				float: left;
				background-repeat: no-repeat;
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>

JS片段：

//创建地图

//人物的坐标
let x, y;

//判断是否结束
function falg(){
	for(let i=0; i<arr.length; i++){
		for(let j=0; j<arr[i].length; j++){
			if(arr[i][j]==2){
				return false;
			}
		}
	}
	return true;
}
//求人物坐标
function getPersonXY(){
	for(let i=0; i<arr.length; i++){
		for(let j=0; j<arr[i].length; j++){
			if(arr[i][j]==5){
				x = i;
				y = j;
				return;
			}
		}
	}
}

//创建元素
function createEl(e){
	//创建一个div元素
	var div = document.createElement("div");
	//给元素设置宽高
	div.style.width = "50px";
	div.style.height = "50px";
	switch(e){
		case 0:
		//空白
		div.style.backgroundColor = "rgba(255,255,255,0)";
		break;
		case 1:
		//墙
		div.style.backgroundImage = "url(./img/wall.jpg)";
		break;
		case 2:
		//箱子
		div.style.backgroundImage = "url(./img/box.png)";
		break;
		case 3:
		//空位
		div.style.backgroundColor = "pink";
		div.style.borderRadius ="50%";
		break;
		case 4:
		//占位
		div.style.backgroundImage = "url(./img/over_box.png)";
		break;
		case 5:
		//人物
		div.style.backgroundImage = "url(./img/player.png)";
		break;
	}
	return div;
}
//画图
function draw(){
	//获得地图容器
	var box = document.getElementById("box");
	//清空容器
	box.innerHTML = "";
	box.style.width = 50*arr[0].length+"px"
	//遍历地图
	for(let i=0; i<arr.length; i++){
		for(let j=0; j<arr[i].length; j++){
			box.appendChild(createEl(arr[i][j]));
		}
	}
}
let tmp = 0;
window.onload = function(){
	//查询人物坐标
	getPersonXY();
	//画图
	draw();
	//键盘按下事件
	document.onkeydown = function(e){
		switch(e.keyCode){
			case 65:
			case 37:
			//左
			if(arr[x][y-1]==1|| //左边第一个墙
				(arr[x][y-1] == 2 && arr[x][y-2] ==1) || 
				(arr[x][y-1] == 2 && arr[x][y-2] ==2) ||
				(arr[x][y-1] == 2 && arr[x][y-2] ==4) ||
				(arr[x][y-1] == 4 && arr[x][y-2] ==1) ||
				(arr[x][y-1] == 4 && arr[x][y-2] ==2) ||
				(arr[x][y-1] == 4 && arr[x][y-2] ==4)
			){
				return;
			}
			if(arr[x][y-1]==0){
				arr[x][y-1] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x][y-1]==2){
				if(arr[x][y-2]==3){
					arr[x][y-2] = 4
				}else{
					arr[x][y-2] = 2;	
				}
				arr[x][y-1] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x][y-1]==3){
				arr[x][y-1] = 5;
				arr[x][y] = tmp;
				tmp = 3;
			}else if(arr[x][y-1]==4){
				if(arr[x][y-2]==0){
					arr[x][y-2] = 2;
				}else{
					arr[x][y-2] = 4; 
				}
				arr[x][y-1]=5;
				arr[x][y] = tmp;
				tmp = 3;
			}
			y--;
			break;
			case 68:
			case 39:
			//右
			if(  arr[x][y+1]==1||
				(arr[x][y+1] == 2 && arr[x][y+2] ==1) ||
				(arr[x][y+1] == 2 && arr[x][y+2] ==2) ||
				(arr[x][y+1] == 2 && arr[x][y+2] ==4) ||
				(arr[x][y+1] == 4 && arr[x][y+2] ==1) ||
				(arr[x][y+1] == 4 && arr[x][y+2] ==2) ||
				(arr[x][y+1] == 4 && arr[x][y+2] ==4)
			){
				return;
			}
			if(arr[x][y+1]==0){
				arr[x][y+1] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x][y+1]==2){
				if(arr[x][y+2]==3){
					arr[x][y+2] = 4
				}else{
					arr[x][y+2] = 2;	
				}
				arr[x][y+1] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x][y+1]==3){
				arr[x][y+1] = 5;
				arr[x][y] = tmp;
				tmp = 3;
			}else if(arr[x][y+1]==4){
				if(arr[x][y+2]==0){
					arr[x][y+2] = 2;
				}else{
					arr[x][y+2] = 4; 
				}
				arr[x][y+1]=5;
				arr[x][y] = tmp;
				tmp = 3;
			}
			y++;
			break;
			case 87:
			case 38:
			//上
			if(  arr[x-1][y]==1||
				(arr[x-1][y] == 2 && arr[x-2][y] ==1) ||
				(arr[x-1][y] == 2 && arr[x-2][y] ==2) ||
				(arr[x-1][y] == 2 && arr[x-2][y] ==4) ||
				(arr[x-1][y] == 4 && arr[x-2][y] ==1) ||
				(arr[x-1][y] == 4 && arr[x-2][y] ==2) ||
				(arr[x-1][y] == 4 && arr[x-2][y] ==4)
			){
				return;
			}
			if(arr[x-1][y]==0){
				arr[x-1][y] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x-1][y]==2){
				if(arr[x-2][y]==3){
					arr[x-2][y] = 4
				}else{
					arr[x-2][y] = 2;	
				}
				arr[x-1][y] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x-1][y]==3){
				arr[x-1][y] = 5;
				arr[x][y] = tmp;
				tmp = 3;
			}else if(arr[x-1][y]==4){
				if(arr[x-2][y]==0){
					arr[x-2][y] = 2;
				}else{
					arr[x-2][y] = 4; 
				}
				arr[x-1][y]=5;
				arr[x][y] = tmp;
				tmp = 3;
			}
			x--;
			break;
			case 83:
			case 40:
			//下
			if(  arr[x+1][y]==1||
				(arr[x+1][y] == 2 && arr[x+2][y] ==1) ||
				(arr[x+1][y] == 2 && arr[x+2][y] ==2) ||
				(arr[x+1][y] == 2 && arr[x+2][y] ==4) ||
				(arr[x+1][y] == 4 && arr[x+2][y] ==1) ||
				(arr[x+1][y] == 4 && arr[x+2][y] ==2) ||
				(arr[x+1][y] == 4 && arr[x+2][y] ==4)
			){
				return;
			}
			if(arr[x+1][y]==0){
				arr[x+1][y] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x+1][y]==2){
				if(arr[x+2][y]==3){
					arr[x+2][y] = 4
				}else{
					arr[x+2][y] = 2;	
				}
				arr[x+1][y] = 5;
				arr[x][y] = tmp;
				tmp = 0;
			}else if(arr[x+1][y]==3){
				arr[x+1][y] = 5;
				arr[x][y] = tmp;
				tmp = 3;
			}else if(arr[x+1][y]==4){
				if(arr[x+2][y]==0){
					arr[x+2][y] = 2;
				}else{
					arr[x+2][y] = 4; 
				}
				arr[x+1][y]=5;
				arr[x][y] = tmp;
				tmp = 3;
			}
			x++;
			break;
		}
		//画图
		draw();
		setTimeout(function(){
			if(falg()){
				alert("恭喜闯关成功");
			}
		},200);
	}
}

资源下载：推箱子2.rar_用HTML5+原生js实现的推箱子游戏-Javascript代码类资源-CSDN下载

以上是利用HTML+JAVASCRIPT+CSS实现的推箱子游戏