使用JS，H5编写经典游戏-推箱子

最新推荐文章于 2024-08-09 02:16:38 发布

Daniel李

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量6.1k

点赞数 2

分类专栏： JS 文章标签：推箱子 JavaScript html5 游戏

本文链接：https://blog.csdn.net/weixin_39369911/article/details/79572157

版权

初学者通过JS和HTML5实现推箱子小游戏的简易版，详细介绍了从需求分析到逻辑实现的过程，包括创建对象、绘制地图、游戏逻辑和音效。文章强调了合理规划和使用二维数组在游戏设计中的重要性。

摘要由CSDN通过智能技术生成

初学JS，使用JS、H5编写推箱子小游戏简易版

推箱子小游戏是一款多年前很流行的小游戏（即使现在也有很多人玩），游戏目的很简单，就是人推箱子，把所有的箱子推到目的地，就游戏成功：

看似跟简单的逻辑，其实还是有一定难度的，我也是依靠了别人的帮助才完成的，现在开始介绍如何用js，html5编写该游戏（方便起见我们把人用一个粉圆形代替）：

一.能力要求

JavaScript，HTML画布，面向对象的基本思想，合理的编程逻辑。

二.编写顺序

1.pushBox.html文件

2.pojo.js文件（用来存放所有的对象）

3.paint.js文件（用来写画画的语句）

4.game.js文件（用来写运行逻辑部分）

5.allLevels.js文件（用来存放关卡）

*注：这是我的书写习惯，按内容和功能将个各类分开，如有更好地写法欢迎评论

三.开始编写

1.建立基本的pushBox.html文件：

内容很简单，<body>里面仅仅需要<canvas>标签，设置id，其后的<audio>文件在逻辑部分做完后再加进去：

<body>
	<canvas id='can1' width=1536 height=733></canvas>
	<audio id="walk" autoplay></audio>
	<audio id="push" autoplay></audio>
	<audio id="win" autoplay></audio>
</body>

<script type="text/javascript" src="pojo.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="paint.js"></script>
<script type="text/javascript" src="allLevels.js"></script>
<script>
	window.onload = function(){
		run();
	}
</script>

2.写pojo类：

首先我们需要知道总共有这些类：

人，箱子，目标点，砖块和围墙，很简单，所有的类都有color(颜色)，size(边长/半径)，x（横坐标），y（纵坐标）这些属性。然后我们要记得，人和砖块可能和目标点重合，所以在箱子和人的类里面要加上isOnTarget（是否和目标点重合）属性，这样就完成了：

//人类
function Person(x, y){
	this.color = 'pink';
	this.size = 20;
	this.x = x;
	this.y = y;
	//判断这个人是否在目标点上
	this.isOnTarget = false;
}
//箱子类
function Box(x, y){
	this.color = 'yellow';
	this.size = 40;
	this.x = x;
	this.y = y;
	//判断某个箱子是否在目标点上
	this.isOnTarget = false;
}
//目标点类
function Target(x, y){
	this.size = 12;
	this.x = x;
	this.y = y;
	this.color = 'lime';
}
//地砖类
function Brick(x, y){
	this.x = x;
	this.y = y;
	this.size = 40;
}
//围墙类
function Wall(x, y){
	this.x = x;
	this.y = y;
	this.size = 40;
}

3.编写paint.js类

我们需要对刚刚在pojo.js类中写的所有类写出画的方法：