html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动...

第三篇,鼠标事件与游戏人物移动

一,假设

假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用。

这样的话,添加鼠标事件,其实只需要给canvas添加一个鼠标事件,然后循环LGlobal类里的childList,即循环所有的可视对象,如果被添加了鼠标事件,那么就调用它相应的方法。

二,实现

1,给LGlobal类追加mouseEvent方法,然后修改LGlobal类的setCanvas,实现canvas的鼠标事件的添加与调用LGlobal.setCanvas = function (id,width,height){

LGlobal.canvasObj = document.getElementById(id);

if(width)LGlobal.canvasObj.width = width;

if(height)LGlobal.canvasObj.height = height;

LGlobal.width = LGlobal.canvasObj.width;

LGlobal.height = LGlobal.canvasObj.height;

LGlobal.canvas = LGlobal.canvasObj.getContext("2d");

LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){

LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);

});

}

LGlobal.mouseEvent = function(event,type){

var key;

for(key in LGlobal.childList){

if(LGlobal.childList[key].mouseEvent){

LGlobal.childList[key].mouseEvent(event,type);

}

}

}

2,给LSprite类添加mouseList数组,用来保存所添加的鼠标事件,然后添加mouseEvent方法

mouseEvent方法中,我们需要做2个处理,

1),判断自己是否添加了鼠标事件,如果没有添加,则循环它的childList

2),如果添加了鼠标事件,判断自己是否被点击,LSprite虽说意义上是可视类,但是其实目前它本身是不可见的,可见的是它上面的Bitmap,准确点说,是这个Bitmap类中的BitmapData,更准确点说,是这个BitmapData中的Image,所以判断自己是否被点击,需要判断的是LSprite中的childList中的可视对象是否被点击,如果被点击,则调用相应的方法mouseEvent:function (event,type,cood){

if(cood==null)cood={x:0,y:0};

var self = this;

if(self.mouseList.length == 0){

for(key in self.childList){

if(self.childList[key].mouseEvent){

self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});

}

}

return;

}

if(self.childList.length == 0)return;

var key;

var isclick = false;

for(key in self.childList){

isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});

if(isclick)break;

}

if(isclick){

for(key in self.mouseList){

var obj = self.mouseList[key];

if(obj.type == type){

event.selfX = event.offsetX - (self.x+cood.x);

event.selfY = event.offsetY - (self.y+cood.y);

event.currentTarget = self;

obj.listener(event);

}

}

return;

}

},

ismouseon:function(event,cood){

var self = this;

var key;

var isclick = false;

for(key in self.childList){

isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});

if(isclick)break;

}

return isclick;

}

ismouseon方法,用来判断自己是否被点击

LBitmap类中也需要判断是否自己被点击,所以添加ismouseonismouseon:function(event,cood){

var self = this;

if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x + self.width &&

event.offsetY >= self.y + cood.y && event.offsetY <= self.y + cood.y + self.height){

return true;

}else{

return false;

}

}

添加鼠标事件的时候,模仿ActionScript的语法backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

下面,准备一张地图,一个人物行走图,用鼠标事件来控制人物的走动,init(80,"back",800,480,main);

var list = new Array();

var index = 0;

var backLayer;

//地图

var mapimg;

//人物

var playerimg;

var loader

var imageArray;

var animeIndex = 0;

var dirindex = 0;

var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-1,y:1},{x:1,y:1},{x:-1,y:-1},{x:1,y:-1});

var dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};

//移动目标

var toX = 0;

var toY = 0;

function main(){

loader = new LLoader();

loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);

loader.load("back.jpg","bitmapData");

}

function loadBitmapdata(event){

var bitmapdata = new LBitmapData(loader.content);

mapimg = new LBitmap(bitmapdata);

loader = new LLoader();

loader.addEventListener(LEvent.COMPLETE,loadOver);

loader.load("1.png","bitmapData");

}

function loadOver(event){

var bitmapdata = new LBitmapData(loader.content,0,0,70,92);

imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);

document.getElementById("inittxt").innerHTML="";

playerimg = new LBitmap(bitmapdata);

playerimg.bitmapData.setCoordinate(0,0);

index = 0;

backLayer = new LSprite();

addChild(backLayer);

backLayer.addChild(mapimg);

backLayer.addChild(playerimg);

backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

}

function onframe(){

index++;

if(index >= imageArray[0].length){

index = 0;

}

var markx = 0,marky = 0;

var l = 3;

if(playerimg.x > toX){

playerimg.x -= l;

markx = -1;

}else if(playerimg.x < toX){

playerimg.x += l;

markx = 1;

}

if(playerimg.y > toY){

playerimg.y -= l;

marky = -1;

}else if(playerimg.y < toY){

playerimg.y += l;

marky = 1;

}

if(markx !=0 || marky != 0){

var mark = markx+","+marky;

dirindex = dirmark[mark];

}

playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);

}

function onmousedown(event){

toX = parseInt(event.selfX/3)*3;

toY = parseInt(event.selfY/3)*3;

}

以上就是用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动的内容,更多相关内容请关注PHP中文网(www.php.cn)!

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值