当前位置:编程学习 > html/css >>

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

开言:
lufylegend.js引擎已经更新到1.6以上了,虽然我陆陆续续发布了一些教程,也提供了一些简单的游戏示例,但是一直以来也没有制作几款完整的作品来,实在也是自己一个人时间太有限了,接下来的时间,我会尽可能的使用lufylegend.js引擎开发几款完整的作品,来增加一下这个引擎的说服力,希望喜欢html5,喜欢游戏开发的朋友多提些意见。
这一次先来看一个经典的推箱子游戏,相信大家也都知道这款游戏,推箱子游戏最早源于日本,是一款极其锻炼逻辑思考能力的游戏,箱子只能推不能拉,玩家必须在一个有限的空间里,将所有的箱子归位,如下图所示。
350
图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,它是游戏第一关的截图,要绘制这个房间,首先要知道这些图片应该摆放的位置,我们预先准备一个数组。
[javascript]  
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中的序号。
按照这个数组来绘制房间就简单了,看下面的函数
[javascript]  
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文档,或者看我以前的一些文章来了解一下,这里不加赘述了。
当然,一开始,房间里要有箱子,箱子一开始的位置也是需要预先设置好的,我们同样建立一个数组。
[javascript 
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}  
];  
绘制箱子的函数如下
[javascript]  
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);  
    }  
}  
上面,我同样利用LBitmap对象来显示这些箱子,nowBoxList数组用来储存这些已经加载到游戏界面上的箱子对象,之后用来判断游戏过关。
因为stage01数组中的4就表示箱子需要还原的位置,所以在判断游戏是否过关的时候,只需要判断下这些位置是否与所有箱子的位置重合,判断方法如下。
[javascript]  
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();  
}  
代码我是直接从程序中截取的,所以出现了些新的数组和对象。
stageList储存了所有的关卡信息,stageIndex是当前关卡的序号,stageList[stageIndex]就可以获取当前关卡的信息,bitmapDataList数组储存了图1中小图片的LBitmapData对象,这些暂且不说,关键是下面。
[javascript] 
if(list[y][x] == 4){  
    bitmap.bitmapData = bitmapDataList[3];  
}else{  
    bitmap.bitmapData = bitmapDataList[2];  
    win = false;  
}  
函数中循环了所有箱子的位置,如果他们的位置的序号为4,则表示该箱子已经归位,全部归位表示过关,否则游戏继续,返回false。
三,主人公登场,推动箱子。
同样准备一张图片,如下
图3
人物走动动画,当然就需要lufylegend引擎中另一个重要的对象LAnimation,它专门用来顺序播放图片以形成动画,具体用法请参照官方API文档。
下面是主人公的构造器
[javascript] 
/** 
 * 循环事件  
 * @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.divideCoordinate(data.image.width,data.image.height,row,col);  
    //设定人物动画  
    self.易做图 = new LAnimation(this,data,list);  
    //设定不移动  
    self.move = false;  
    //在一个移动步长中的移动次数设定  
    s
补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,