rpg游戏html用哪个打开,HTML 5开发RPG游戏之二(跑起来吧英雄)

2d886065b8188e1ef3a0d23e72b41584.gif

之所以添加点击状态,是因为,当我们按下移动按钮没有抬起的时候,人物应该始终处于移动状态,所以用这个变量来区分,我们是否按下或者抬起好了,做好了准备工作,现在就开始添加移动事件

//添加点击控制事件

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);

backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);

functionondown(event){

//根据点击位置,判断移动方向

if(event.offsetX >= ctrlLayer.x + 40 && event.offsetX <= ctrlLayer.x+80){

if(event.offsetY >= ctrlLayer.y && event.offsetY <= ctrlLayer.y+40){

player.changeDir(UP);

}elseif(event.offsetY >= ctrlLayer.y+80 && event.offsetY <= ctrlLayer.y+120){

player.changeDir(DOWN);

}

}elseif(event.offsetX >= ctrlLayer.x && event.offsetX <= ctrlLayer.x+40){

if(event.offsetY >= ctrlLayer.y +40 && event.offsetY <= ctrlLayer.y+80){

player.changeDir(LEFT);

}

}elseif(event.offsetX >= ctrlLayer.x+80 && event.offsetX <= ctrlLayer.x+120){

if(event.offsetY >= ctrlLayer.y +40 && event.offsetY <= ctrlLayer.y+80){

player.changeDir(RIGHT);

}

}

isKeyDown =true;

}

functiononup(event){

isKeyDown =false;

}

这里需要知道的是,在智能手机里,其实点击事件是TOUCH_START,TOUCH_MOVE,TOUCH_END事件

使用legendForHtml5Programming库件的时候,只需要添加MOUSE_DOWN,MOUSE_MOVE,MOUSE_UP事件,然后库件会自动判断是加载TOUCH事件还是MOUSE事件

在ondown方法中,我们将isKeyDown的状态变为true,表示我们正处于按下状态

然后,根据我们点击的位置,来调用Character类的changeDir方法,并且传入点击的方向

有了控制事件,现在的关键就在于changeDir方法,只要根据传进来的值,来实现移动就可以了

我们试想,如果每次移动一个步长的话,那么人物就会由一个小方格跳到令一个方格,而我们需要的是,让它缓慢的移动到下一个方格,有一个移动的过程

为了实现这个过程,我们在移动的时候不是让人物的坐标马上就改变,而是改变人物的状态,由静止到移动,然后处于移动状态的时候,再让人物一小步一小步的移动到目标点

修改Character类的构造器,如下

functionCharacter(data,row,col,speed){

base(this,LSprite,[]);

varself =this;

//设定人物动作速度

self.speed = speed==null?3:speed;

self.speedIndex = 0;

//设定人物大小

data.setProperties(0,0,data.image.width/col,data.image.height/row);

//得到人物图片拆分数组

varlist = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);

//设定人物动画

self.anime =newLAnimation(this,data,list);

//调整人物位置

self.anime.y -= 16;

//设定不移动

self.move =false;

//在一个移动步长中的移动次数设定

self.moveIndex = 0;

};

调整人物位置是因为,人物的图片分割后,每个动作的大小为32*48,而地图每个小格的大小是32*32,然后设定人物状态为不移动,然后修改changeDir 方法

/**

* 改变人物方向

**/

Character.prototype.changeDir =function(dir){

varself =this;

//如果正在移动,则无效

if(!self.move){

//设定人物方向

self.direction = dir;

//设定图片动画

self.anime.setAction(dir);

//开始移动

self.move =true;

self.moveIndex = 0;

}

};

这里要简单说明一下LAnimation类的setAction方法,setAction(rowindex,colindex)方法有两个参数,LAnimation里传进来的图片数组是一个二维数组,这两个参数分别可以改变目前显示的图片的动作,当然,也可以只传其中一个参数

我这次是将4*4的人物动作图片分割为4*4的二维数组传给了LAnimation类,所以现在每一行图片代表一个方向

人物状态设置为移动后,就应该在循环事件里开始一步步的移动了

/**

* 循环事件

**/

Character.prototype.onframe =function(){

varself =this;

//人物动作速度控制

if(self.speedIndex++ 

self.speedIndex = 0;

//当人物可移动,则开始移动

if(self.move)self.onmove();

//人物动画播放

self.anime.onframe();

};

/**

* 开始移动

**/

Character.prototype.onmove =function(){

varself =this;

//设定一个移动步长中的移动次数

varml_cnt = 4;

//计算一次移动的长度

varml = STEP/ml_cnt;

//根据移动方向,开始移动

switch(self.direction){

caseUP:

self.y -= ml;

break;

caseLEFT:

self.x -= ml;

break;

caseRIGHT:

self.x += ml;

break;

caseDOWN:

self.y += ml;

break;

}

self.moveIndex++;

//当移动次数等于设定的次数,开始判断是否继续移动

if(self.moveIndex >= ml_cnt){

self.moveIndex = 0;

//如果已经松开移动键,则停止移动,否则继续移动

if(!isKeyDown){

self.move =false;

return;

}

}

};

这里,我选择了让人物每个步长分四次进行移动,这样就实现了缓慢移动的效果,运行程序,点击画面中的方向键,看到了把,人物已经可以开始移动了,而且是缓慢的移动

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值