原生js实现推箱子代码和思路

最新推荐文章于 2024-06-11 15:46:59 发布

落花有意，树无情

最新推荐文章于 2024-06-11 15:46:59 发布

阅读量2.6k

点赞数 2

分类专栏： # javascript 文章标签： js实现的小游戏

本文链接：https://blog.csdn.net/q918922703_1/article/details/100365299

版权

一思路
1.获取img图片
2.创建map-10x10(必须将两个个图创好)(方便构建对象来使用)
创建map的时候要返回人物的对象
插入元素的时候将地图利用成二维数组
并将人物的位置封装成对象
copy节点直接创造节点或者声明创造节点的函数（）//第一种占内存第二种占运存
*添加任务旋转的时候回在map函数中加对象
3.获取键盘上的值
将键盘上的值封装起来转换成一个方向，再通过方向判断人物和盒子的去留
在调用函数前面
4.分析推箱子的步骤
大体如下几步：
1.人推空白
2.人进终点
3.人出终点
4.人在空白推箱子，箱子进空白；
5.人在空白推箱子，箱子进终点；
6.人在终点推箱子，箱子在终点进空白；
7.人在终点推箱子，箱子在空白进空白；
8.人在终点推箱子，箱子在终点推终点；
9.人在空白推箱子，箱子在空白推终点
…
（此方法不用判断是否撞墙）；
5.设置定时器检测事件随机事件的触发（箱子全部在终点）
定时器进行跳关
和通关事件;
6.添加鼠标点击的按钮功能
1.获取元素
2.绑定事件
3.给每个元素弄方向
4.调用函数（将move函数放进去）；
7.添加跳关功能
1.获取元素
2.绑定事件
3.进行调用函数（将deepclone的初始数组copy进去);
8.添加上一步功能
1.获取元素
2.绑定事件
3.进行调用函数（将deepclone的上一步函数放到move前，并在执行此函数的时候调用函数）

*封装功能可以方便后面的代码和功能的实现
html 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>推箱子</title>
		<link rel="stylesheet" href="css/tuixiangzi.css" />
		<script src="js/mapxinxi.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--居中-->
		<div class="center">
			<!--地图模块-->
			<div class="map">
			</div>
			<!--控制模块-->
			<div class="control">
				<div>
					请选择第<input type="text"  class="select" style="width: 100px;">关 <input type="button" id="btns" value="确定" />
				</div>
				<div class="fangxiang">
					<a href="#"><img src="" class="touming"/></a>
					<a href="#" class="cf"><img src="img/up.png" ></a><!--上-->
					<a href="#" ><img src="" class="touming"/></a>
					<a href="#" class="cf"><img src="img/left.png"></a><!--下-->
					<a href="#" class="cf"><img src="img/down.png"></a><!--左-->
					<a href="#" class="cf"><img src="img/right.png"></a><!--右-->
				</div>
				<a href="#" class="replay"><img src="img/replay.png"></a><!--重来-->
				<a href="#" class="prevstep"><img src="img/backStep.png"/></a><!--上一步-->
			</div>
			<!--通关成功模块-->
		</div>
		<script src="js/map.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/other.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

css样式

*{
	margin: 0px;
	padding: 0px;
}
body{
	background-color: rgba(180,180,180,0.5);
}
ul,li{
	list-style: none;
}
a{
	text-align: center;
}
.center{
	width: 800px;
	height: 520px;
	margin: 30px auto;
	background-color: blue;
	position: relative;
}
.map{
	width: 500px;
	height: 500px;
	background-image: url(../img/ground.png);
	left: 0;
	top: 0;
	border: 10px solid black;
}
/*地图模块结束*/

.control{
	position: absolute;
	width: 280px;
	height: 520px;
	background-color: mistyrose;
	left: 520px;
	top: 0px;
}
.control .fangxiang{
	width: 100%;
	height: 180px;
	margin-top: 100px;
}
#up{
	display: block;
	width: 100%;
	height: 80px;
}
.control img{
	/*margin: -1px;*/
	width: 80px;
	height: 80px;
	border: none;
	/*opacity: 0;*/
}
.touming{
	opacity: 0;
}
.up{
	transform:rotate(90deg);
}
.right{
	transform: rotateY(180deg);
}
.down{
	transform: rotate(-90deg);
}

地图js信息模块

var mapobj={
	map0:[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,3,3,3,3,3,0,0],
	[0,3,3,3,0,0,0,0,3,0],
	[3,3,1,0,4,3,3,0,3,3],
	[3,1,1,4,0,4,0,0,5,3],
	[3,1,1,0,4,0,4,0,3,3],
	[3,3,3,3,3,3,0,0,3,0],
	[0,0,0,0,0,3,3,3,3,0],
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
],
	map1:[
	[0,0,0,0,0,0,0,0,0,0],
	[0,0,0,3,3,3,0,0,0,0],
	[0,0,0,3,1,3,0,0,0,0],
	[0,0,0,3,0,3,3,3,3,0],
	[0,3,3,3,4,0,4,1,3,0],
	[0,3,1,0,4,5,3,3,3,0],
	[0,3,3,3,3,4,3,0,0,0],
	[0,0,0,0,3,1,3,0,0,0],
	[0,0,0,0,3,3,3,0,0,0],
	[0,0,0,0,0,0,0,0,0,0]
],
	map2:[
	[0,0,0,0,0,0,0,0

最低0.47元/天解锁文章

落花有意，树无情

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
原生js实现推箱子代码和思路

一思路1.获取img图片2.创建map-10x10(必须将两个个图创好)(方便构建对象来使用)创建map的时候要返回人物的对象插入元素的时候将地图利用成二维数组并将人物的位置封装成对象copy节点直接创造节点或者声明创造节点的函数（）//第一种占内存第二种占运存*添加任务旋转的时候回在map函数中加对象3.获取键盘上的值将键盘上的值封装起来转换成一个方向，再通过方向判...
复制链接

扫一扫