用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
来源:互联网 发布:查看淘宝卖家地址 编辑:程序博客网 时间:2024/06/06 00:48
第三篇,鼠标事件与游戏人物移动
用仿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 loadervar 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
下一篇,研究下继承吧
- 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
- 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
- 用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
- 用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
- 用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
- 用仿ActionScript的语法来编写html5——第七篇,自定义按钮
- 用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
- 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
- 用仿ActionScript的语法来编写html5——第一篇,显示一张图片
- 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
- 游戏人物跟随鼠标移动的实现
- 仿CS游戏源码bug:人物移动
- Android 简单游戏实现笑脸的移动与人物移动
- 【VC++游戏开发#十】2D篇 —— 人工智能(一):滚动地图 & 用鼠标控制人物的走动
- 如何制作一款HTML5 RPG游戏引擎——第五篇,人物&人物特效
- 如何制作一款HTML5 RPG游戏引擎——第五篇,人物&人物特效
- 让图片直线移动到鼠标点击位置,类似游戏里的人物走动!
- 让图片直线移动到鼠标点击位置,类似游戏里的人物走动!
- 博客开篇
- 如何在svn CLI 下添加@2x图片
- java 小知识
- android中与系统相关的工具方法
- 物流行业小结
- 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
- CTreeCtrl 节点选择问题
- 编程实现字符串中各单词的翻转
- 上海浩丰9月13日早评--国内欢度中秋,外盘跌跌不休
- Caused by: java.lang.ClassNotFoundException: org.apache.ws.commons.schema.utils.NamespacePrefixList
- linux目录结构
- jQuery 遮罩层效果
- 定义C/C++全局变量/常量几种方法的区别
- linux /dev目录