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

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

下一篇,研究下继承吧

转载于:https://www.cnblogs.com/jiangxiaobo/p/6005866.html

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

  1. html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动...

    第三篇,鼠标事件与游戏人物移动 一,假设 假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...

  2. 用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

    用仿ActionScript的语法来编写html5--第五篇,Graphics绘图 用仿ActionScript的语法来编写html5--第一篇,显示一张图片 http://blog.csdn.net ...

  3. 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

    用仿ActionScript的语法来编写html5--第六篇,TextField与输入框 一,对比 1,html5中 首先看看在html5的canvas中的文字显示 var canvas = docu ...

  4. 用仿ActionScript的语法来编写html5——第七篇,自定义按钮

    第七篇,自定义按钮 这次弄个简单点的,自定义按钮. 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了. 下面是添加按钮的代码, function gameInit(even ...

  5. 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

    一,LegendForHtml5Programming1.0库件是什么? 它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称 ...

  6. 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

    上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示. 这次用Sprite来动态显示图片. 依然遵循上一篇对显示对象的处理的思路,添加LSprite类 ...

  7. html游戏让目标人物移动,如何用html5编写鼠标事件与游戏人物移动

    前面已经介绍了用仿ActionScript的语法来编写html5的第一篇.第二篇,下面是第三篇,如何用html5编写鼠标事件与游戏人物移动,事不宜迟,赶紧来学习下吧. 一.假设 假设,所有可添加鼠标事 ...

  8. html5鼠标点击旋转,HTML5+WEBGL入门程序(鼠标事件,三维旋转)

    WebGL中文教程 /> src="Oak3D_v_0_5_5.js"> precision mediump float; varying vec2 vTextureC ...

  9. html5语法参考图片,仿AS语法来写HTML5—第1章,显示一张图片

    最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 第一篇 ...

最新文章

  1. 飞书×品玩邀请多位行业大咖,共谈跨境企业“战疫”秘籍!
  2. Webpack 4.0 打包 Vue 应用时出现无法使用Vue-loader问题及解决方法
  3. NYOJ 士兵杀敌(二) 树状数组
  4. boost::core::bit_cast的测试程序
  5. boost::callable_traits添加const成员的测试程序
  6. php视频上传教程,PHP实现视频文件上传完整实例,_PHP教程
  7. excel一些操作技巧
  8. java多线程同时运行_Java实现的两个线程同时运行案例
  9. 洛谷P1801 黑匣子 双堆套路的使用
  10. 人工智能秘史(一):会下棋的土耳其机器人
  11. 跳频通信(梅文华)pdf
  12. Android Window/Window Z-Order/Surface/SurfaceView
  13. 华为服务器 修改为传统模式,电脑设置成服务器模式
  14. 计量经济学计算机答案第一章,计量经济学计算机作业
  15. 北京冬奥会使用的集装箱最后如何处理
  16. 令人发指的关于方法重载和方法重写的一些理解(多态)
  17. 优炫软件中标西南民族大学项目,护航教育行业主机安全
  18. BERT—NAACL
  19. 如何重装服务器的系统教程,如何重装服务器系统教程
  20. 道格拉斯-普克算法(经纬度或坐标点抽稀)

热门文章

  1. python 面向对象编程tcp_python 闯关之路三(面向对象与网络编程)
  2. docker常见面试题_测试面试题集锦(四)| Linux 与 Python 编程篇(附答案)
  3. html5 lang en 乱码,CSS中的html [lang =“en”]和html:lang(en)有什么区别?
  4. 用CImage类来显示PNG JPG等图片
  5. Golang预备知识
  6. 正则表达式必知必会学习笔记
  7. c语言字符串英文,C语言字符串函数大全(国外英文资料).doc
  8. linux桌面_使用 KDE Plasma 定制 Linux 桌面 | Linux 中国
  9. c语言能让制表符空9个字符码,C语言编程规范 – 嗨!大佟!
  10. java实现远程系统控制_java实现电脑远程控制完整源代码