用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动
用仿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/index.html
摘自 lufy小屋
推荐阅读
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
-
用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
-
用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
-
用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动