推箱子游戏简介
小游戏”推箱子”就是个超级考验脑力的游戏，起源于日本！你得把箱子移动到指定地方，但切记只能推不能拉。这种玩法让人玩得停不下来，而且还能提升我们的逻辑能力！这个有趣的小游戏不仅在日本火爆得不得了，全世界都有很多人都喜欢玩它。
使用lufylegend.js引擎开发推箱子游戏
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] ];
最近，那个叫lufylegend.js的引擎升级到了1.6版，给有些人带来了更多好用又强大的新玩意儿。有个程序猿说了，要靠这新引擎做出几个好玩的大制作，就像那个老得不能再老但玩不腻的推箱子那样。他做出来的那个推箱子 Game不仅保留了原来的味道，还有些新的花样，像排名什么的，让大家玩得更爽快！
绘制游戏界面
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);
}
咱们做推箱子游戏得先画个画面呀。直接用那些预设好的数字，就把图片放在对应的地方了。然后，就挑几个lsprite和lbmp这些lufylegend引擎里的小玩意儿，给画面添点色彩。别忘了放上小箱子，还得专门弄个数组存起来，后面判断能不能通关就要靠它们！
判断游戏通关条件
var box01 = [
{x:3,y:3},
{x:4,y:3},
{x:5,y:3},
{x:5,y:5},
{x:6,y:5},
{x:7,y:5}
];
function drawBox(){
var bitmap;
for(var i=0;i<boxList[stageIndex].length;i++){
bitmap = new LBitmap(bitmapDataList[2]);
bitmap.x = boxList[stageIndex][i].x*STEP;
bitmap.y = boxList[stageIndex][i].y*STEP;
boxLayer.addChild(bitmap);
nowBoxList.push(bitmap);
}
}
想知道你是不是闯关成功？看所有的箱子是不是都回到了该去的地方。只要循环一圈看看每个箱子在哪儿，跟目标地点对个照，要是所有的箱子都正确落地，那就恭喜通关！这样的设计既保留了游戏的挑战性又让你乐在其中。
人物移动及动画效果
function checkBox(){
var bitmap,x,y,win=true;
list = [];
for(var i=0;i<stageList[stageIndex].length;i++){
list.push(stageList[stageIndex][i].join(",").split(","));
}
for(var i=0;i<nowBoxList.length;i++){
bitmap = nowBoxList[i];
x = bitmap.x / STEP;
y = bitmap.y / STEP;
if(list[y][x] == 4){
bitmap.bitmapData = bitmapDataList[3];
}else{
bitmap.bitmapData = bitmapDataList[2];
win = false;
}
list[y][x] += 10;
}
if(win)gameClearShow();
}
当你玩推箱子游戏时，角色是跟着你操控跑的！但你知道吗？想要让它移动得更有趣，就用 lufylegend.js引擎里的LAnimation对象！只要设置好方向和激活移动事件，就能看到生动活泼的人物走路画面了，真的很棒！
交互设计与优化
if(list[y][x] == 4){
bitmap.bitmapData = bitmapDataList[3];
}else{
bitmap.bitmapData = bitmapDataList[2];
win = false;
}
除了简单的玩法和规矩，一款好的推箱子游戏还要重视用户体验和互动设计。就要想办法让大家玩得轻松，懂规则又会玩，不能让游戏卡住或者变得繁琐。反复试玩和调整就能逐渐改善用户体验！
完整源代码分享
你别急，看到最后就能找到推箱子游戏的源码！读完这篇文章，你还能了解到它是怎么做出来的，以及lufylegend.js引擎是怎么用的~
结语与展望
/**
* 循环事件
* @param data 图片数据
* @param row 图片分割行数
* @param col 图片分割列数
**/
function Character(data,row,col){
base(this,LSprite,[]);
var self = this;
//设定人物动作速度
self.speed = 2;
self.speedIndex = 0;
//设定人物大小
data.setProperties(0,0,data.image.width/col,data.image.height/row);
//得到人物图片拆分数组
var list = LGlobal.pideCoordinate(data.image.width,data.image.height,row,col);
//设定人物动画
self.anime = new LAnimation(this,data,list);
//设定不移动
self.move = false;
//在一个移动步长中的移动次数设定
self.moveIndex = 0;
};
今天我就要来给你扒一扒用lufylegend.js引擎做推箱子游戏是怎么回事，希望能帮到那些喜欢html5和玩游戏的小伙伴~以后，这个引擎会越来越牛逼，肯定能做出好多好玩的东西，真是期待！
/**
* 开始移动
**/
Character.prototype.onmove = function (){
var self = this;
//设定一个移动步长中的移动次数
var ml_cnt = 4;
//计算一次移动的长度
var ml = STEP/ml_cnt;
//根据移动方向，开始移动
switch (self.direction){
case UP:
self.y -= ml;
if(box)box.y -= ml;
break;
case LEFT:
self.x -= ml;
if(box)box.x -= ml;
break;
case RIGHT:
self.x += ml;
if(box)box.x += ml;
break;
case DOWN:
self.y += ml;
if(box)box.y += ml;
break;
}
self.moveIndex++;
//当移动次数等于设定的次数，开始判断是否继续移动
if(self.moveIndex >= ml_cnt){
self.moveIndex = 0;
box = null;
self.move = false;
checkBox();
}
};
。
评论0