用仿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].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类中也需要判断是否自己被点击，所以添加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——第一篇，
用仿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].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类中也需要判断是否自己被点击，所以添加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小屋
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用仿ActionScript的语法来编写html5――第三篇，鼠标事件与游戏人物移动
本文地址： https://pptw.com/jishu/586684.html