基于html5实现的推箱子小游戏

一、游戏功能分析

1）功能需求分析

 功能需求分析如图1-1所示。

 

1. 小人推箱子：当箱子周围存在通道时，通过小人的左右移动实现推箱子功能。
2. 炸毁墙面：小人当前所在位置的四周有墙面时，按下空格可以炸毁墙面
3. 设置关卡：游戏总共有100个关卡，用户在输入框中输入1~100之间的任意一个数字可以跳转到任意一个关卡。
4. 重玩本关：用户点击该按钮时，恢复到本关最原始的状态。
5. 撤销移动：用户可以实现恢复到上一步的状态。
6. 游戏说明：显示游戏操作方法以及游戏规则。

 

二、总体设计

2.1 功能模块（或函数、类）

1) 界面设置

① 画布位置摆放及显示；

② 按钮布局排版；

③ 小人移动步数显示；

④ 关卡设置。

2）画布类

• 控制小人移动
• 小人推箱子
• 小人炸毁墙面

1. 按钮类

• 上一关
• 下一关
• 撤销移动
• 重玩本关
• 游戏说明

1. 文本框

• 关卡设置
• 显示小人移动步数
• 游戏说明简介

 

2.2总体设计层次图（或类、方法关系图）

系统总体设计层次图如图2-1所示。

 

 

2.3函数说明

Canvas类的方法如表2-1所示。

                                    表2-1 canvas类函数表

函数名	功能
getContext(“2d”)	内建的HTML5对象，用于绘制多种路径，矩形等方法。
drawImage（）	可以引入图像、画布、视频，并对其进行缩放或裁剪。
clearRect（）	清空给定矩形内的指定像素
Save()	保存CanvasRenderingContext2d对象的属性、剪切区域和变换矩阵
Restore()	为画布重置为最近保存的图像状态

 

定时器方法如表2-2所示。

                                               表2-2 定时器方法表

函数名	功能
setInterval ( code, milliseconds[, args...] )	Code:需要执行的函数或js代码。 Milliseconds：执行函数或代码的间隔时间，单位为毫秒。 Args：可选参数用于给被调用的函数传递参数，参数可以有多个
clearInterval(intervalID);	取消指定定时器

 

Html标签如表2-3所示。

                                                      表2-3 html5标签表

标签名	功能
<div>	<div> 是一个块级元素。它的内容自动地开始一个新行。换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
<img>	img 元素向网页中嵌入一幅图像。
<input>	根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、按钮等等。
<button>	<button> 标签定义一个按钮。
<h1>	定义标题。<h1> 定义最大的标题。
<script>	<script> 标签用于定义客户端脚本，比如 JavaScript。

 

3.1 主要实现原理

1）游戏处理流程

推箱子游戏处理过程如图3-1所示。

 

                                           图3-1 推箱子游戏过程演示图

 

3.2 基本界面

主界面设计如图3-2所示。

1. 首先设置布局，采用绝对定位调整布局。在左边添加一个canvas画布用于显示游戏操作界面，默认情况下为第一关。右上部分设置一个input用于显示当前关卡数以及小人移动步数，点击游戏说明时，还可以显示游戏规则。右下部分为按钮类和关卡设置。
2. 画布类具体说明：在js文件中设置游戏关卡的页面布局，用一个二维数组表示，不同数字分别表示不同的元素，（0）表示通道，（1）表示墙，（2）表示目的地，（3）表示箱子，（4）表示工人，（5）目的地的箱子。小人推箱子的原理图如图3-3所示

预先准备好P1，P2的坐标，分成一下几种情况讨论：

1. 若P1出界，则小人不能前进；
2. 若P1为墙，则小人不能前进；
3. 若P1为箱子进一步讨论：

1. P2为通道，则小人可以将箱子推到P2位置；
2. 若P2为目的地，则小人可以将箱子推到P2位置，并且将P2变成目的地箱子的样式。

对照原始图片，若原先目的地的位置都变为箱子时，则说明闯关成功，用户可以点击下一关。用户每操作一次先判断是否可以前进，如果可以则修改游戏界面所对应的二维数组，接着重绘画布。当闯关成功时，弹出一个消息框用于提示用户。

1. 文本框的显示：当用户未点游戏说明时，显示当前关卡数和小人移动次数。当用户点击游戏说明时则显示游戏规则。上述两类显示均采用同一种方法innerHTML。
2. 按钮类：当鼠标未移动到按钮上时按钮背景为白色，当鼠标移动到按钮上时按钮背景色为彩色，使用css样式实现上述功能，对每个按钮设置两类样式，一类为鼠标未移动到按钮上的样式，另一类用hover方法定义的一种样式。
3. 关卡搜索跳转功能：用户在文本框中输入关卡数，按下enter键或者点击search按钮跳转到相应的关卡。用js获得搜索框中的数据，用一个变量curLevel记录当前的关卡数，改变curLevel值，从记录所有关卡的js文件中取出对应下标-1的地图，调用drawImage重绘。

3.3 游戏元素及特效

3.3.1炸毁墙面的实现

首先分别判断小人的四周（上下左右）是否有墙，若某个方向有墙，则创建bomb类型的变量，该类中含有炸弹图片，墙的位置等信息。创建定时器，每隔1000/60ms调用draw2函数，用switch...case语句判断当前哪个方向有墙，由于要实现一个爆炸的动画，选取一张含有爆炸变化过程6个状态的图片，用一个该类的成员变量frm来记录当前当前炸弹处于哪个状态，切割对应的爆炸状态。若frm的值大于等于6时，说明炸弹动画已执行完毕，清除定时器，将被炸弹炸毁的墙面更改为通道，清除画布进行重绘，将成语变量frm重新置0，以便后续操作。当需要同时炸毁多面墙时，会启用多个定时器，相当于操作系统中的多道程序系统，有多个作业同时进入内存，实现进程的并发执行，提高操作系统的吞吐量。此处的定时器也是同样的道理。执行前中后的效果如图3-4，3-5，3-6所示。

3.4 事件处理

小人移动事件处理如图3-7所示。

小人推箱子以及是否闯关成功事件处理如图3-8所示。

• 设计总结

本次推箱子小游戏的设计，用html5设计界面整体，用css样式排版界面以及适当的修饰美化，再结合JavaScript控制整个游戏的功能实现。游戏中看似复杂的逻辑其实并不难，只要理清游戏的整个控制流程以及罗列出游戏进行过程中的所有可能性，通过switch...case语句将所有可能出现的情况一一实现即可。本游戏中爆炸特效的制作，采用设置定时器以及清除定时器来实现一个爆炸过程的动画效果，这是区别于其他推箱子小游戏的一个特点。正如我们所知，推箱子是一个益智类的游戏，随着关卡数的增加，游戏难度系数越来越高，对玩家来说是一个巨大的思维考验，设置爆炸功能，可以给玩家多一个解决方案，若可以无限制的使用炸弹，则失去了益智类游戏的意义，因此，设置使用炸弹次数最多为3次，使得玩家在经过深思熟虑之后再使用。

本实验难点在于如何设计游戏地图使得此游戏的每个关卡均有解，这个参考了夏敏捷编著的HTML5网页游戏设计从基础到开发。

 

实现代码：https://download.csdn.net/download/Exaggeration08/12074443