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

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


用仿ActionScript的语法来编写html5——第一篇，显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6760812


一，假设
假设，所有可添加鼠标事件的对象，都有一个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.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; }



看一下成果吧
http://fsanguo.comoj.com/html5/jstoas02/index.html


下一篇，研究下继承吧