勇华一卡通,边伯贤与泰妍分手,ca3308
第三篇，鼠标事件与游戏人物移动
用仿actionscript的语法来编写html5——第一篇，
用仿actionscript的语法来编写html5——第二篇，利用sprite来实现动画
一，假设
假设，所有可添加鼠标事件的对象，都有一个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].ismoun(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类中也需要判断是否自己被点击，所以添加ismouseon
ismouseon: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.pidecoordinate(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;
}
看一下成果吧
http://fsanguo.comoj.com/html5/jstoas02/
摘自 lufy小屋
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
我要评论
网友评论