基于客户端java script 技术下推箱子游戏算法剖析
文/朱艳萍
摘要：推箱子游戏就是设计一个人
物想尽办法把箱子从设满了障碍
的环境中推至目标位置。环境越
复杂，越是具有挑战性。本人从
各个方面对推箱子的过程进行了
算法描述。
【关键词】游戏 箱子 人物 算法
1 引言
推箱子游戏就是设计一个人物想尽办法
把箱子从设满了障碍的环境中推至目标位置。
环境越复杂，越是具有挑战性。本人从各个方
面对推箱子的过程进行了算法描述。
2 游戏环境设计
该游戏的环境设计本人采用现今比较流
行的HTML+DIV 技术完成，本游戏没有很复
杂的环境设计，利用java script 动态添加div
即可实现。铺设环境之前首先要用其他工具
如photoshop 模拟出背景环境，然后就是需要
准备好背景图片，并使用切割工具完成对图片
切割，准备好这两样后，再使用java script 语
法完成代码编写。假设背景图beijing.png，障
碍物图片zhangai.png，终点目标图片mubiao.
png，这些图片都放在同一个文件夹images中， arrMap 是一个二维数组，是一个与游戏
环境平面一一对应的二维数组，这个二维数组
的设计在本游戏的环境铺设中起着非常关键
的作用，要根据前面通过其他工具勾画出的环
境，准确的设计每一行每一列元素的值，直接
决定了本游戏的完成难度。通过java script 的
for 语法，结合DOM 的createElement 方法和
appendChild 方法，根据二维元素的值，直接
完成环境的铺设。二维数组将游戏环境进行单
元划分，方便控制人物和箱子。游戏环境中，
假设设置游戏每个单位是一个38*38 的正方
形，设置二维元素值为1 的位置放置的是障碍
物，设置二维元素值为2 的位置，便是箱子目
标位置，其他二维元素值为0 位置铺设背景图
片即可。
3 游戏人物设计
人物设计关键是要准备好一张漂亮的人
物图片就行，假设准备好的人物图片为role.
png，也放在images 文件夹中，然后将人物放
在二维数组中元素值为0 的任意一个位置，假
设人物放在二维数组2 行1 列的地方，对应窗
口位置就应该是距离left：0px;top：39px;，这
个地方在计算的时候非常容易出错，要记住，
数组下标是从0 开始记的，将装载了人物图片
的div 直接设计在<body></body> 标记里就行。
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
85597153
