基于客户端javascript技术下推箱子游戏算法剖析
摘要推箱子游戏就是设计一个人物想尽办法把箱子从设满了障碍的环境中推至目标位置。环境越复杂，越是具有挑战性。本人从各个方面对推箱子的过程进行了算法描述。
【关键词】游戏 箱子 人物 算法
1 引言
推箱子游戏就是设计一个人物想尽办法把箱子从设满了障碍的环境中推至目标位置。环境越复杂，越是具有挑战性。本人从各个方面对推箱子的过程进行了算法描述。
2 游戏环境设计
该游戏的环境设计本人采用现今比较流行的HTML+DIV技术完成，本游戏没有很复杂的环境设计，利用Javascript动态添加div即可实现。铺设环境之前首先要用其他工具如photoshop模拟出背景环境，然后就是需要准备好背景图片，并使用切割工具完成对图片切割，准备好这两样后，再使用javascript语法完成代码编写。假设背景图beijing.png，障碍物图片zhangai.png，终点目标图片mubiao.png，这些图片都放在同一个文件夹images中， arrMap是一个二维数组，是一个与游戏环境平面一一对应的二维数组，这个二维数组的设计在本游戏的环境铺设中起着非常关键的作用，要根据前面通过其他工具勾画出的环境，准确的设计每一行每一列元素的值，直接决定了本游戏的完成难度。通过javascript的for语法，结合DOM的createElement方法和appendChild方法，根据二维元素的值，直接完成环境的铺设。二维数组将游戏环境进行单元划分，方便控制人物和箱子。游戏环境中，假设设置游戏每个单位是一个38*38的正方形，设置二维元素值为1的位置放置的是障碍物，设置二维元素值为2的位置，便是箱子目标位置，其他二维元素值为0位置铺设背景图片即可。
3 游戏人物设计
人物设计关键是要准备好一张漂亮的人物图片就行，假设准备好的人物图片为role.png，也放在images文件夹中，然后将人物放在二维数组中元素值为0的任意一个位置，假设人物放在二维数组2行1列的地方，对应窗口位置就应该是距离left：0px;top：39px;，这个地方在计算的时候非常容易出错，要记住，数组下标是从0开始记的，将装载了人物图片的div直接设计在
4 游戏箱子设计
假设准备好的箱子图片为box.png，将箱子放置在二维数组中没有障碍物的位置，这里假设是m行n列的位置，那么定位其位置时计算left属性值应该是：(n-1)*39个像素，top属性应该是(m-1)*39个像素，装载箱子图片的div直接放置于body标记中。
5 游戏算法描述
算法往往就是一个程序的灵魂，算法出来了，程序便容易多了。该游戏中，需要用一个变量随时记录人物的位置，一个变量随时记录箱子的位置，假设坐标(row0,col0)表示人物的位置，（row1,col1）表示箱子的位置，row0初始值就为：2-1=1，col0初始值为：1-1=0，row1的初始值为m-1，col1初始值为n-1。
实现游戏目标，第一步，人物走到箱子边。第二步，推箱子。
第一步，人物走到箱子边，也即是说人物从出发点到箱子边要有“通路”，完成第一步后，人物就应该在箱子的左边，或者右边，或者上面，或者下面，为了便于说明问题，我们假设人物在箱子的下面，那么row0=m，col0=n-1，完成第一步的过程中需要不断的判断人物的上下左右是否有障碍物，没有障碍物便可以通过。
第二步，推箱子。仍然假设人物此时在箱子的下面，可以往上推箱子，需要判断箱子的正上方是否有障碍物，如果没有障碍物，那么箱子和人物同时向上移动，此时，row0=m-1，col0=n-1，row1=m-2，col1=n-1，如果有障碍物，那么人物就要想办法走到箱子的另外三面，假设此时走到箱子的右边，此时，人物与箱子在同一行，rol0=m-1,col0=n，人物可以左推箱子，需要判断箱子的左边是否有障碍物，如果没有障碍物，箱子和人一起左移，此时，row0=m-1，col0=n-1，row1=m-1，col1=n-2，如果有障碍物的话，人物得想办法走到箱子的上面或者左边，如果在箱子的上面，人物可以下推箱子，如果在箱子左边，人物可以右推箱子，如果目标点刚好箱子可以推动的方向上，那么推箱子成功。
6 结束语
本文的算法中主要分析了人物推箱子动作的算法，最后人物是否能推箱子成功，还与前面构建环境有很大关系，比如，如果人物到箱子旁边没有设计“通路”，根本就无法到达箱子的任何一边，更不同谈推箱子。本文算法描述已经经过本人在IE8下多次实验均没有问题。
作者简介
朱艳萍（1975-），女，湖北省应城人，大学本科学历，讲师职称，研究方向为软件开发。
作者单位
深圳技师学院广东省深圳市518000
