HTML5技术

仿AS语法来写HTML5—第3章，鼠标事件与移动

字号+ 作者：lufy 来源： 2014-11-16 21:26 我要评论( )

一，假设 假设，所有可添加鼠标事件的对象，都有一个mouseEvent方法，添加的鼠标事件同过这个mouseEvent来调用。 这样的话，添加鼠标事件，其实只需要给canvas添加一个鼠标事件，然后循

一，假设
假设，所有可添加鼠标事件的对象，都有一个mouseEvent方法，添加的鼠标事件同过这个mouseEvent来调用。
这样的话，添加鼠标事件，其实只需要给canvas添加一个鼠标事件，然后循环LGlobal类里的childList，即循环所有的可视对象，如果被添加了鼠标事件，那么就调用它相应的方法。

二，实现
1，给LGlobal类追加mouseEvent方法，然后修改LGlobal类的setCanvas，实现canvas的鼠标事件的添加与调用

JavaScript Code复制内容到剪贴板
  1. LGlobal.setCanvas = function (id,width,height){  
  2.         LGlobal.canvasObj = document.getElementById(id);  
  3.         if(width)LGlobal.canvasObj.width = width;  
  4.         if(height)LGlobal.canvasObj.height = height;  
  5.         LGlobal.width = LGlobal.canvasObj.width;  
  6.         LGlobal.height = LGlobal.canvasObj.height;  
  7.         LGlobal.canvas = LGlobal.canvasObj.getContext("2d");  
  8.       
  9.     LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){  
  10.             LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);  
  11.         });  
  12. }   
  13. LGlobal.mouseEvent = function(event,type){  
  14.         var key;  
  15.         for(key in LGlobal.childList){  
  16.                 if(LGlobal.childList[key].mouseEvent){  
  17.                         LGlobal.childList[key].mouseEvent(event,type);  
  18.                 }  
  19.         }  
  20. }  
2，给LSprite类添加mouseList数组，用来保存所添加的鼠标事件，然后添加mouseEvent方法

mouseEvent方法中，我们需要做2个处理，
1)，判断自己是否添加了鼠标事件，如果没有添加，则循环它的childList
2)，如果添加了鼠标事件，判断自己是否被点击,LSprite虽说意义上是可视类，但是其实目前它本身是不可见的，可见的是它上面的Bitmap,准确点说，是这个Bitmap类中的BitmapData,更准确点说，是这个BitmapData中的Image，所以判断自己是否被点击，需要判断的是LSprite中的childList中的可视对象是否被点击，如果被点击，则调用相应的方法

JavaScript Code复制内容到剪贴板
  1. mouseEvent:function (event,type,cood){  
  2.                 if(cood==null)cood={x:0,y:0};  
  3.                 var self = this;  
  4.                 if(self.mouseList.length == 0){  
  5.                         for(key in self.childList){  
  6.                                 if(self.childList[key].mouseEvent){  
  7.                                         self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});  
  8.                                 }  
  9.                         }  
  10.                         return;  
  11.                 }  
  12.                 if(self.childList.length == 0)return;  
  13.                 var key;  
  14.                 var isclick = false;  
  15.                 for(key in self.childList){  
  16.                         isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
  17.                         if(isclick)break;  
  18.                 }  
  19.                 if(isclick){  
  20.                         for(key in self.mouseList){  
  21.                                 var obj = self.mouseList[key];  
  22.                                 if(obj.type == type){  
  23.                                         event.selfX = event.offsetX - (self.x+cood.x);  
  24.                                         event.selfY = event.offsetY - (self.y+cood.y);  
  25.                                         event.currentTarget = self;  
  26.                                         obj.listener(event);  
  27.                                 }  
  28.                         }  
  29.                         return;  
  30.                 }  
  31.                   
  32.         },  
  33.         ismouseon:function(event,cood){  
  34.                 var self = this;  
  35.                 var key;  
  36.                 var isclick = false;  
  37.                 for(key in self.childList){  
  38.                         isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
  39.                         if(isclick)break;  
  40.                 }  
  41.                 return isclick;  
  42.         }  
 

ismouseon方法，用来判断自己是否被点击
LBitmap类中也需要判断是否自己被点击，所以添加ismouseon

JavaScript Code复制内容到剪贴板
  1. ismouseon:function(event,cood){  
  2.                 var self = this;  
  3.                 if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x + self.width &&   
  4.                         event.offsetY >= self.y + cood.y && event.offsetY <= self.y + cood.y + self.height){  
  5.                         return true;  
  6.                 }else{  
  7.                         return false;  
  8.                 }  
  9.         }  


添加鼠标事件的时候，模仿ActionScript的语法

JavaScript Code复制内容到剪贴板
  1. backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
复制代码

下面，准备一张地图，一个人物行走图，用鼠标事件来控制人物的走动，

JavaScript Code复制内容到剪贴板
  1. init(80,"back",800,480,main);  
  2.   
  3. var list = new Array();  
  4. var index = 0;  
  5. var backLayer;  
  6. //地图  
  7. var mapimg;  
  8. //人物  
  9. var playerimg;  
  10. var loader  
  11. var imageArray;  
  12. var animeIndex = 0;  
  13. var dirindex = 0;  
  14. 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});  
  15. 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};  
  16.   
  17. //移动目标  
  18. var toX = 0;  
  19. var toY = 0;  
  20. function main(){  
  21.           
  22.         loader = new LLoader();  
  23.         loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
  24.         loader.load("back.jpg","bitmapData");  
  25. }  
  26. function loadBitmapdata(event){  
  27.         var bitmapdata = new LBitmapData(loader.content);  
  28.         mapimg = new LBitmap(bitmapdata);  
  29.         loader = new LLoader();  
  30.         loader.addEventListener(LEvent.COMPLETE,loadOver);  
  31.         loader.load("1.png","bitmapData");  
  32. }  
  33. function loadOver(event){  
  34.         var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
  35.         imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
  36.         document.getElementById("inittxt").innerHTML="";  
  37.         playerimg = new LBitmap(bitmapdata);  
  38.         playerimg.bitmapData.setCoordinate(0,0);  
  39.         index = 0;  
  40.         backLayer = new LSprite();  
  41.         addChild(backLayer);  
  42.         backLayer.addChild(mapimg);  
  43.         backLayer.addChild(playerimg);  
  44.         backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
  45.         backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
  46. }  
  47.   
  48. function onframe(){  
  49.         index++;  
  50.         if(index >= imageArray[0].length){  
  51.                 index = 0;  
  52.         }  
  53.         var markx = 0,marky = 0;  
  54.         var l = 3;  
  55.         if(playerimg.x > toX){  
  56.                 playerimg.x -= l;  
  57.                 markx = -1;  
  58.         }else if(playerimg.x < toX){  
  59.                 playerimg.x += l;  
  60.                 markx = 1;  
  61.         }  
  62.         if(playerimg.y > toY){  
  63.                 playerimg.y -= l;  
  64.                 marky = -1;  
  65.         }else if(playerimg.y < toY){  
  66.                 playerimg.y += l;  
  67.                 marky = 1;  
  68.         }  
  69.         if(markx !=0 || marky != 0){  
  70.                 var mark = markx+","+marky;  
  71.                 dirindex = dirmark[mark];  
  72.         }  
  73.         playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
  74. }  
  75. function onmousedown(event){  
  76.         toX = parseInt(event.selfX/3)*3;  
  77.         toY = parseInt(event.selfY/3)*3;  
  78. }  
看一下成果吧

http://fsanguo.comoj.com/html5/jstoas02/index.html

下一篇，研究下继承吧

 

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5-终篇LegendForHtml5Programming

    仿AS语法来写HTML5-终篇LegendForHtml5Programming

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第9章，URLLoader读取文件

    仿AS语法来写HTML5—第9章，URLLoader读取文件

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章，图片处理+粒子

    仿AS语法来写HTML5—第8章，图片处理+粒子

    2014-11-16 21:26

网友点评
精彩导读
Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

Dora.Interception: 一个为.NET Core度身定制

用Visual Studio2017写C++静态库 - jily16

用Visual Studio2017写C++静态库 - jily16

vue全局配置----小白基础篇 - 星光笔

vue全局配置----小白基础篇 - 星光笔

这短短几行代码价值一万 - 小尧弟

这短短几行代码价值一万 - 小尧弟

HTML5优势 - 计划

HTML5优势 - 计划

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习