第三篇,鼠标事件与游戏人物移动
用仿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),判断自己是否添加了鼠标事件,如果没有添加,则循环它的childList2),如果添加了鼠标事件,判断自己是否被点击,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
分享到:
相关推荐
actionscript 3.0基础语法讲解。
第3章 ActionScript3.0语法 第2篇 ActionScript3.0面向对象特性 第4章 ActionScript3.0面向对象编程 第5章 ActionScript3.0中的String对象 第6章 ActionScript3.0中的Array类型 第7章 ActionScript3.0...
ActionScript 3.0语法参考手册,希望对大家有帮助
详细讲解flash开发中用到的ActionScript动作脚本。
《精通Flex 3.0——基于ActionScript 3.0实现》一书源代码。 Flex 3.0 ActionScript 3.0源代码 Flex 3.0源代码。 --------------------------- 第1篇 Flex技术概述 第1章 Flex概述 3 1.1 Flex简介 3 1.2 Flex...
第3章ActionScript3.0语法 24 3.1变量 24 3.1.1变量声明 24 3.1.2变量赋值 25 3.1.3变量的生存周期 26 3.2基本数据类型 27 3.2.1Object类型 28 3.2.2int类型 28 3.2.3uint类型 29 3.2.4Number类型 30 3.2.5Boolean...
FLASH actionscript3游戏编程 处理右击事件 拦截鼠标右击实现自定义鼠标右击功能.zip
第1~5章介绍了 ActionScript 3.0的基础知识,包括程序编写界面、数据结构、基本语法以及事件机制;第6~9章介绍了ActionScript 3.0的核心——类及以类为基础的面向对象程序设计方法,包括类的基本概念、...
flash actionscript3 as3编写的 仿雷电 战机游戏
ActionScript事件处理与早期版本事件处理的不同之处 事件流 事件对象 事件侦听器 事件处理示例:闹钟 第章:使用应用程序域 第章:显示编程 显示编程的基础知识 核心显示类 显示列表方法的优点 使用显示对象 处理显示...
Java 5与ActionScript3 语法比较
该控件用Flash CS4+ActionScript3写成,能在网页上方便调用,用FlashVars参数传入图片路径。 该控件涉及了很多AS3画图的知识点。实现了加载图片,过度平滑,能通过调整SliderBar对加载的相片随意放大缩小等功能。对...
Flash_ActionScript语法综合
Adobe Flash拥有完整的Web游戏工作流程,具有深度的开发者社区,一个出色的ActionScript语言和大量卓越的第三方游戏框架。这些都给与 Egret框架在开发中很多灵感。Egret借鉴了很多来自ActionScript的优点,站在巨人...
java netty编写的socket tcp服务器+flash actionscript3编写的游戏客户端 C/S程序游戏源代码
ActionScript语法参考手册,保留看看。资料太老,不建议看
第1~5章介绍了 ActionScript 3.0的基础知识,包括程序编写界面、数据结构、基本语法以及事件机制;第6~9章介绍了ActionScript 3.0的核心——类及以类为基础的面向对象程序设计方法,包括类的基本概念、...
C语言典型应用系统之——聊天室(ActionScript 3.0实现),用以共享,相互交流!
第3篇 组件高效技法篇 第10章 PopUpManager与ToolTipManager 第11章 Form组件与基本表单元素 第12章 文本、图像与多媒体 第13章 容器与导航 第14章 数据容器组件 第15章 图表组件 第16章 专题知识 第4篇 ...