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

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



这是我用最新版lufylegend.js引擎开发的，想挑战一下的朋友，可以点击下面的游戏链接试一下自己能通过几关。
http://lufylegend.com/demo/box
游戏一共6关，我在游戏里加入了排名系统，每过一关可以上传自己的成绩，跟大家比拼一下，或者您也可以将自己的过关方法心得等回复到文章下面。
制作开始
好了，废话说完了，现在来看看如何来制作这款游戏。
一，首先，你需要下载lufylegend.js引擎
下面是我在博客的lufylegend-1.6.0发布帖
/article/1360477.html

下面一步步来进入开发正题。
二，绘制背景和箱子
我们先来准备一张图，



如果我们将上面的图平均分割成5份，那么他们的序号分别为0,1,2,3,4。
我们利用上面5个小图片就可以拼接任意的房间以及房间内箱子的摆放。
比如，我博客一开始的示例图1，它是游戏第一关的截图，要绘制这个房间，首先要知道这些图片应该摆放的位置，我们预先准备一个数组。
[javascript] view plaincopy

1. var stage01 = [
2. [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
3. [-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],
4. [-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],
5. [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
6. [-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],
7. [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
8. [-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],
9. [-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],
10. [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]
11. ];

上面的-1表示不摆放，然后0,1,4等分别对应着图2中的序号。
按照这个数组来绘制房间就简单了，看下面的函数
[javascript] view plaincopy

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

这个list数组就是上面的stage01数组，参数x,y分别是数组的列和行的序号，STEP是每个小图片的长度，绘制一个小图块，其实我就是建立了一个LBitmap对象。
关于LSprite，LBitmap等对象是lufylegend.js引擎中很常用的对象，关于它们的用法，请大家参照官方的API文档，或者看我以前的一些文章来了解一下，这里不加赘述了。
当然，一开始，房间里要有箱子，箱子一开始的位置也是需要预先设置好的，我们同样建立一个数组。
[javascript] view plaincopy

1. var box01 = [
2. {x:3,y:3},
3. {x:4,y:3},
4. {x:5,y:3},
5. {x:5,y:5},
6. {x:6,y:5},
7. {x:7,y:5}
8. ];

绘制箱子的函数如下
[javascript] view plaincopy

1. function drawBox(){
2. var bitmap;
3. for(var i=0;i<boxList[stageIndex].length;i++){
4. bitmap = new LBitmap(bitmapDataList[2]);
5. bitmap.x = boxList[stageIndex][i].x*STEP;
6. bitmap.y = boxList[stageIndex][i].y*STEP;
7. boxLayer.addChild(bitmap);
8. nowBoxList.push(bitmap);
9. }
10. }

上面，我同样利用LBitmap对象来显示这些箱子，nowBoxList数组用来储存这些已经加载到游戏界面上的箱子对象，之后用来判断游戏过关。
因为stage01数组中的4就表示箱子需要还原的位置，所以在判断游戏是否过关的时候，只需要判断下这些位置是否与所有箱子的位置重合，判断方法如下。
[javascript] view plaincopy

1. function checkBox(){
2. var bitmap,x,y,win=true;
3. list = [];
4. for(var i=0;i<stageList[stageIndex].length;i++){
5. list.push(stageList[stageIndex][i].join(",").split(","));
6. }
7.
8. for(var i=0;i<nowBoxList.length;i++){
9. bitmap = nowBoxList[i];
10. x = bitmap.x / STEP;
11. y = bitmap.y / STEP;
12. if(list[y][x] == 4){
13. bitmap.bitmapData = bitmapDataList[3];
14. }else{
15. bitmap.bitmapData = bitmapDataList[2];
16. win = false;
17. }
18. list[y][x] += 10;
19. }
20. if(win)gameClearShow();
21. }

代码我是直接从程序中截取的，所以出现了些新的数组和对象。
stageList储存了所有的关卡信息，stageIndex是当前关卡的序号，stageList[stageIndex]就可以获取当前关卡的信息，bitmapDataList数组储存了图1中小图片的LBitmapData对象，这些暂且不说，关键是下面。
[javascript] view plaincopy

1. if(list[y][x] == 4){
2. bitmap.bitmapData = bitmapDataList[3];
3. }else{
4. bitmap.bitmapData = bitmapDataList[2];
5. win = false;
6. }

函数中循环了所有箱子的位置，如果他们的位置的序号为4，则表示该箱子已经归位，全部归位表示过关，否则游戏继续，返回false。
三，主人公登场，推动箱子。
同样准备一张图片，如下



人物走动动画，当然就需要lufylegend引擎中另一个重要的对象LAnimation，它专门用来顺序播放图片以形成动画，具体用法请参照官方API文档。
下面是主人公的构造器
[javascript] view plaincopy

1. /**
2. * 循环事件
3. * @param data 图片数据
4. * @param row 图片分割行数
5. * @param col 图片分割列数
6. **/
7. function Character(data,row,col){
8. base(this,LSprite,[]);
9. var self = this;
10. //设定人物动作速度
11. self.speed = 2;
12. self.speedIndex = 0;
13. //设定人物大小
14. data.setProperties(0,0,data.image.width/col,data.image.height/row);
15. //得到人物图片拆分数组
16. var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
17. //设定人物动画
18. self.anime = new LAnimation(this,data,list);
19. //设定不移动
20. self.move = false;
21. //在一个移动步长中的移动次数设定
22. self.moveIndex = 0;
23. };

主人公如何推动箱子，看下面的onmove函数
[javascript] view plaincopy

1. /**
2. * 开始移动
3. **/
4. Character.prototype.onmove = function (){
5. var self = this;
6. //设定一个移动步长中的移动次数
7. var ml_cnt = 4;
8. //计算一次移动的长度
9. var ml = STEP/ml_cnt;
10. //根据移动方向，开始移动
11. switch (self.direction){
12. case UP:
13. self.y -= ml;
14. if(box)box.y -= ml;
15. break;
16. case LEFT:
17. self.x -= ml;
18. if(box)box.x -= ml;
19. break;
20. case RIGHT:
21. self.x += ml;
22. if(box)box.x += ml;
23. break;
24. case DOWN:
25. self.y += ml;
26. if(box)box.y += ml;
27. break;
28. }
29. self.moveIndex++;
30. //当移动次数等于设定的次数，开始判断是否继续移动
31. if(self.moveIndex >= ml_cnt){
32. self.moveIndex = 0;
33. box = null;
34. self.move = false;
35. checkBox();
36. }
37. };

可以看到，箱子是不是跟着主人公一起走，关键是要看box这个变量，这个变量的值是在下面的checkRoad函数中设置的。
[javascript] view plaincopy

1. Character.prototype.checkRoad = function (dir){
2. var self = this;
3. var tox,toy;
4. //开始计算移动目的地的坐标
5. switch (dir){
6. case UP:
7. tox = 0;
8. toy = -1;
9. break;
10. case LEFT:
11. tox = -1;
12. toy = 0;
13. break;
14. case RIGHT:
15. tox = 1;
16. toy = 0;
17. break;
18. case DOWN:
19. tox = 0;
20. toy = 1;
21. break;
22. }
23. if(list[self.y/STEP + toy][self.x/STEP + tox]==1)return false;
24. if(list[self.y/STEP + toy][self.x/STEP + tox]>4){
25. if(list[self.y/STEP + toy*2][self.x/STEP + tox*2]==1 || list[self.y/STEP + toy*2][self.x/STEP + tox*2]>4)return false;
26. box = getBox(self.x + tox*STEP,self.y + toy*STEP);
27. }
28. return true;
29. };

其实，就是判断一下主人公要走的方向的前方是不是有障碍物，如果障碍物是墙则不可移动，如果是箱子的话，就要看看箱子的后面是不是有障碍物，如果有则不可移动，否则箱子就需要跟着主人公一起移动，将box设置为主人公前方的箱子即可。

上面这个函数，是在人物即将发生移动的时候被调用的，如下。
[javascript] view plaincopy

1. /**
2. * 改变人物方向，并判断是否可移动
3. **/
4. Character.prototype.changeDir = function (dir){
5. var self = this;
6. if(self.move)return;
7. self.direction = dir;
8. self.anime.setAction(dir);
9. if(!self.checkRoad(dir))return;
10. self.move = true;
11. steps.text = parseInt(steps.text) + 1;
12. };

当图1中的方向图标被按下的时候，根据点击的方向，来实现人物的移动。
点击方向图标的方法当然是鼠标事件
[javascript] view plaincopy

1. ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);

然后在onCtrl函数中根据点击的位置，来进行相应的移动。
[javascript] view plaincopy

1. function onCtrl(event){
2. var ctrlSize = 60;
3. if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){
4. if(event.selfY >= 0 && event.selfY <= ctrlSize){
5. player.changeDir(UP);
6. }else if(event.selfY >= ctrlSize*2 && event.selfY <= ctrlSize*3){
7. player.changeDir(DOWN);
8. }
9. }else if(event.selfY >= ctrlSize && event.selfY <= ctrlSize*2){
10. if(event.selfX >= 0 && event.selfX <= ctrlSize){
11. player.changeDir(LEFT);
12. }else if(event.selfX >= ctrlSize*2 && event.selfX <= ctrlSize*3){
13. player.changeDir(RIGHT);
14. }
15. }
16. }

这样，游戏的主要功能部分，就介绍完了。
四，建一个开始画面

使用lufylegend.js引擎做个界面，可以说毫无难度，代码如下。
[javascript] view plaincopy

1. function GameLogo(){
2. base(this,LSprite,[]);
3. var self = this;
4.
5. var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]];
6. var bitmap,logoLayer;
7.
8. logoLayer = new LSprite();
9. logoLayer.graphics.drawRect(6,"#FF7F50",[0,0,LGlobal.width,LGlobal.height],true,"#FFDAB9");
10. self.addChild(logoLayer);
11.
12. logoLayer = new LSprite();
13. logoLayer.x = 50;
14. logoLayer.y = 50;
15. for(var i=0;i<logolist.length;i++){
16. for(var j=0;j<logolist.length;j++){
17. bitmap = new LBitmap(bitmapDataList[logolist[i][j]]);
18. bitmap.x = j*STEP;
19. bitmap.y = i*STEP;
20. logoLayer.addChild(bitmap);
21. }
22. }
23. bitmap = new LBitmap(new LBitmapData(imglist["player"],0,0,STEP,STEP));
24. bitmap.x = STEP;
25. bitmap.y = 2*STEP;
26. logoLayer.addChild(bitmap);
27. self.addChild(logoLayer);
28.
29. labelText = new LTextField();
30. labelText.rotate = -20;
31. labelText.color = "#4B0082";
32. labelText.font = "HG行書体";
33. labelText.size = 100;
34. labelText.x = 300;
35. labelText.y = 50;
36. labelText.stroke = true;
37. labelText.lineWidth = 4;
38. labelText.text = "推";
39. self.addChild(labelText);
40.
41. labelText = new LTextField();
42. labelText.color = "#4B0082";
43. labelText.font = "HG行書体";
44. labelText.size = 100;
45. labelText.x = 450;
46. labelText.y = 60;
47. labelText.stroke = true;
48. labelText.lineWidth = 4;
49. labelText.text = "箱";
50. self.addChild(labelText);
51.
52. labelText = new LTextField();
53. labelText.rotate = 20;
54. labelText.color = "#4B0082";
55. labelText.font = "HG行書体";
56. labelText.size = 100;
57. labelText.x = 600;
58. labelText.y = 60;
59. labelText.stroke = true;
60. labelText.lineWidth = 4;
61. labelText.text = "子";
62. self.addChild(labelText);
63.
64. labelText = new LTextField();
65. labelText.color = "#B22222";
66. labelText.font = "HG行書体";
67. labelText.size = 40;
68. labelText.x = 100;
69. labelText.y = 250;
70. labelText.stroke = true;
71. labelText.lineWidth = 4;
72. labelText.text = "Click to Start Game !!";
73. self.addChild(labelText);
74.
75. var social = new Social();
76. social.x = 220;
77. social.y = 330;
78. self.addChild(social);
79.
80. labelText = new LTextField();
81. labelText.font = "HG行書体";
82. labelText.size = 14;
83. labelText.x = 400;
84. labelText.y = 390;
85. labelText.text = "- Html5 Game Engine lufylegend.js";
86. self.addChild(labelText);
87. labelText = new LTextField();
88. labelText.color = "#006400";
89. labelText.font = "HG行書体";
90. labelText.size = 14;
91. labelText.x = 400;
92. labelText.y = 410;
93. labelText.text = "http://www.lufylegend.com/lufylegend";
94. self.addChild(labelText);
95.
96. self.addEventListener(LMouseEvent.MOUSE_UP,menuShow);
97. };

就是显示几张图片，以及添加一些文字，LTextField对象的使用方法请参考官方API文档。
五，建一个选择画面
如下。
图5
代码如下。
[javascript] view plaincopy

1. function GameMenu(){
2. base(this,LSprite,[]);
3. var self = this;
4.
5. var menuLayer;
6. menuLayer = new LSprite();
7. menuLayer.graphics.drawRect(6,"#ADD8E6",[0,0,LGlobal.width,LGlobal.height],true,"#E6E6FA");
8. self.addChild(menuLayer);
9.
10. labelText = new LTextField();
11. labelText.color = "#B22222";
12. labelText.font = "HG行書体";
13. labelText.size = 40;
14. labelText.x = 200;
15. labelText.y = 30;
16. labelText.stroke = true;
17. labelText.lineWidth = 4;
18. labelText.text = "Please select !!";
19. menuLayer.addChild(labelText);
20. for(var i=0;i<stageMenu.length;i++){
21. self.stageVsMenu(stageMenu[i]);
22. }
23. };
24. GameMenu.prototype.stageVsMenu = function(obj){
25. var self = this;
26.
27. var menuButton,btn_up;
28. if(obj.open){
29. btn_up = new LSprite();
30. btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#191970");
31. labelText = new LTextField();
32. labelText.color = "#ffffff";
33. labelText.font = "HG行書体";
34. labelText.size = 20;
35. labelText.x = 40;
36. labelText.y = 5;
37. btn_up.addChild(labelText)
38. labelText.text = "第"+(obj.index+1)+"关";
39.
40. labelText = new LTextField();
41. labelText.color = "#ffffff";
42. labelText.font = "HG行書体";
43. labelText.size = 12;
44. labelText.x = 10;
45. labelText.y = 40;
46. btn_up.addChild(labelText)
47. labelText.text = "step:"+obj.step;
48. labelText = new LTextField();
49. labelText.color = "#ffffff";
50. labelText.font = "HG行書体";
51. labelText.size = 12;
52. labelText.x = 10;
53. labelText.y = 60;
54. btn_up.addChild(labelText)
55. labelText.text = "times:"+obj.times;
56.
57.
58. var btn_down = new LSprite();
59. btn_down.graphics.drawRect(2,"#000",[0,0,150,90],true,"#2F4F4F");
60. labelText = new LTextField();
61. labelText.color = "#ffffff";
62. labelText.font = "HG行書体";
63. labelText.size = 20;
64. labelText.x = 40;
65. labelText.y = 5;
66. labelText.text = "第"+(obj.index+1)+"关";
67. btn_down.addChild(labelText);
68.
69. labelText = new LTextField();
70. labelText.color = "#ffffff";
71. labelText.font = "HG行書体";
72. labelText.size = 12;
73. labelText.x = 10;
74. labelText.y = 40;
75. btn_down.addChild(labelText)
76. labelText.text = "step:"+obj.step;
77. labelText = new LTextField();
78. labelText.color = "#ffffff";
79. labelText.font = "HG行書体";
80. labelText.size = 12;
81. labelText.x = 10;
82. labelText.y = 60;
83. btn_down.addChild(labelText)
84. labelText.text = "times:"+obj.times;
85.
86. menuButton = new LButton(btn_up,btn_down);
87. menuButton.obj = obj;
88. menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){
89. gameStart(self.obj.index);
90. });
91. }else{
92. btn_up = new LSprite();
93. btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#708090");
94. labelText = new LTextField();
95. labelText.color = "#ffffff";
96. labelText.font = "HG行書体";
97. labelText.size = 20;
98. labelText.x = 40;
99. labelText.y = 5;
100. btn_up.addChild(labelText)
101. labelText.text = "???";
102. menuButton = btn_up;
103. };
104. self.addChild(menuButton);
105. menuButton.x = obj.x * 220 + 100;
106. menuButton.y = obj.y * 140 + 130;
107. }

好了，游戏主要的代码已经都贴出来了。