之所以添加点击状态,是因为,当我们按下移动按钮没有抬起的时候,人物应该始终处于移动状态,所以用这个变量来区分,我们是否按下或者抬起好了,做好了准备工作,现在就开始添加移动事件
//添加点击控制事件
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;
}
}
};
这里,我选择了让人物每个步长分四次进行移动,这样就实现了缓慢移动的效果,运行程序,点击画面中的方向键,看到了把,人物已经可以开始移动了,而且是缓慢的移动