[html5游戏开发]经典的推箱子

开言：

lufylegend.js引擎已经更新到1.6以上了，虽然我陆陆续续发布了一些教程，也提供了一些简单的游戏示例，但是一直以来也没有制作几款完整的作品来，实在也是自己一个人时间太有限了，接下来的时间，我会尽可能的使用lufylegend.js引擎开发几款完整的作品，来增加一下这个引擎的说服力，希望喜欢html5，喜欢游戏开发的朋友多提些意见。

这一次先来看一个经典的推箱子游戏，相信大家也都知道这款游戏，推箱子游戏最早源于日本，是一款极其锻炼逻辑思考能力的游戏，箱子只能推不能拉，玩家必须在一个有限的空间里，将所有的箱子归位，如下图所示。

图1

这是我用最新版lufylegend.js引擎开发的，想挑战一下的朋友，可以点击下面的游戏链接试一下自己能通过几关。

http://lufylegend.com/demo/box

游戏一共6关，我在游戏里加入了排名系统，每过一关可以上传自己的成绩，跟大家比拼一下，或者您也可以将自己的过关方法心得等回复到文章下面。

制作开始

好了，废话说完了，现在来看看如何来制作这款游戏。

一，首先，你需要下载lufylegend.js引擎

下面是我在博客的lufylegend-1.6.0发布帖

http://blog.csdn.net/lufy_legend/article/details/8593968

下面一步步来进入开发正题。

二，绘制背景和箱子

我们先来准备一张图，

图2

如果我们将上面的图平均分割成5份，那么他们的序号分别为0,1,2,3,4。

我们利用上面5个小图片就可以拼接任意的房间以及房间内箱子的摆放。

比如，我博客一开始的示例图1，它是游戏第一关的截图，要绘制这个房间，首先要知道这些图片应该摆放的位置，我们预先准备一个数组。

var stage01 = [
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],
[-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],
[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
[-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],
[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
[-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],
[-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]
];

上面的-1表示不摆放，然后0,1,4等分别对应着 图2中的序号。

按照这个数组来绘制房间就简单了，看下面的函数

function drawFloor(x,y){
	if(list[y][x] < 0)return;
	var bitmap = new LBitmap(bitmapDataList[list[y][x]]);
	bitmap.x = x*STEP;
	bitmap.y = y*STEP;
	boxLayer.addChild(bitmap);
}

这个list数组就是上面的stage01数组，参数x,y分别是数组的列和行的序号，STEP是每个小图片的长度，绘制一个小图块，其实我就是建立了一个LBitmap对象。

关于LSprite，LBitmap等对象是lufylegend.js引擎中很常用的对象，关于它们的用法，请大家参照官方的API文档，或者看我以前的一些文章来了解一下，这里不加赘述了。

当然，一开始，房间里要有箱子，箱子一开始的位置也是需要预先设置好的，我们同样建立一个数组。

var box01 = [
{x:3,y:3},
{x:4,y:3},
{x:5,y:3},
{x:5,y:5},
{x:6,y:5},
{x