jQuery推箱子小游戏

最新推荐文章于 2023-06-06 18:29:33 发布

终身成长型

最新推荐文章于 2023-06-06 18:29:33 发布

阅读量766

点赞数

分类专栏：前端开发文章标签： jquery css3 javascript

本文链接：https://blog.csdn.net/weixin_45675581/article/details/122767501

版权

使用jquery来完成的推箱子小游戏案例。主要功能点有，使用map来构建数组，从而数据来创建地图，并且渲染地图，使用使用keydown来完成人物的移动位置，使用判断来判断是否是墙，通过数组判断墙的位置，并且人物移动箱子是通过检测碰撞判断箱子移动以及人物位置和判断箱子前面是不是墙和是不是俩的箱子的逻辑问题。

视频教程：https://xuexiluxian.cn/course/detail/36ce15bada2b461d8e1a227b77120f17

HTML代码：

<body>
<div id='container'></div>
<script type="text/javascript" src='js/jquery-1.11.min.js'></script>
<script type="text/javascript" src='js/script.js'></script>
</body>

CSS代码：

<style type="text/css">
	*{margin: 0;padding:0;}
	#container{
		position: relative;
		margin:50px auto;
	}
	.pos0{
		float:left;
		width:50px;
		height: 50px;
		background: blue;
	}
	.pos1{
		float:left;
		width:50px;
		height: 50px;
		background: #666;
	}
	.pos2{
		float:left;
		width:50px;
		height: 50px;
		background: url(images/wall.png) no-repeat;
	}
	.pos3{
		float:left;
		width:50px;
		height: 50px;
		background:red;
	}
	.box{
		position: absolute;
		width:50px;
		height: 50px;
		background: url(images/box.png) no-repeat;
	}
	.person{
		position: absolute;
		width:50px;
		height: 50px;
		background: url(images/person.png) no-repeat;
	}
	</style>

JS代码：

最低0.47元/天解锁文章

终身成长型

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jQuery推箱子小游戏

使用jquery来完成的推箱子小游戏案例。主要功能点有，使用map来构建数组，从而数据来创建地图，并且渲染地图，使用使用keydown来完成人物的移动位置，使用判断来判断是否是墙，通过数组判断墙的位置，并且人物移动箱子是通过检测碰撞判断箱子移动以及人物位置和判断箱子前面是不是墙和是不是俩的箱子的逻辑问题。视频教程：https://xuexiluxian.cn/course/detail/36ce15bada2b461d8e1a227b77120f17HTML代码：<body><
复制链接

扫一扫