html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动...
第三篇,鼠标事件与游戏人物移动
一,假设
假设,所有可添加鼠标事件的对象,都有一个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类中也需要判断是否自己被点击,所以添加ismouseonismouseon: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;
}
以上就是用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动的内容,更多相关内容请关注PHP中文网(www.php.cn)!
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动...相关推荐
- 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动 一,假设 假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
- 用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
用仿ActionScript的语法来编写html5--第五篇,Graphics绘图 用仿ActionScript的语法来编写html5--第一篇,显示一张图片 http://blog.csdn.net ...
- 用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
用仿ActionScript的语法来编写html5--第六篇,TextField与输入框 一,对比 1,html5中 首先看看在html5的canvas中的文字显示 var canvas = docu ...
- 用仿ActionScript的语法来编写html5——第七篇,自定义按钮
第七篇,自定义按钮 这次弄个简单点的,自定义按钮. 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了. 下面是添加按钮的代码, function gameInit(even ...
- 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
一,LegendForHtml5Programming1.0库件是什么? 它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称 ...
- 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示. 这次用Sprite来动态显示图片. 依然遵循上一篇对显示对象的处理的思路,添加LSprite类 ...
- html游戏让目标人物移动,如何用html5编写鼠标事件与游戏人物移动
前面已经介绍了用仿ActionScript的语法来编写html5的第一篇.第二篇,下面是第三篇,如何用html5编写鼠标事件与游戏人物移动,事不宜迟,赶紧来学习下吧. 一.假设 假设,所有可添加鼠标事 ...
- html5语法参考图片,仿AS语法来写HTML5—第1章,显示一张图片
最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 第一篇 ...
- java语言说课猜数字游戏_DOC:小学一年级数学《猜数游戏》说课稿教案三篇整理版...
小学一年级数学<猜数游戏>说课稿教案三篇(整理版) <小学一年级数学<猜数游戏>说课稿教案三篇(整理版).doc>由会员分享,可免费在线阅读全文,更多与<小学 ...
最新文章
- go-kit微服务学习-官方示例stringsvc学习
- 汇总 | OpenCV4中的非典型深度学习模型
- 社区企业云操作系统 (不错的开源虚拟化系统,期待中)
- php与nginx之间的通信
- python小程序源代码-Python数据库小程序源代码
- python无法打开文档_win32com Excel。应用程序无法打开任何文档
- 协议关键技术_现代通信协议存高危漏洞 或殃及4G和5G手机
- 比CopyMemory还要快的函数SuperCopyMemory
- 自学python好找工作么-学Python可靠吗?好找工作吗?
- PHP重置static静态变量
- PHP如果查询结果为空,php – 如果子查询的结果为NULL,则整个查询失败
- [日推荐]『饿了么外卖服务』饿了么官方小程序,无需下载安装!
- iPhone iPad Cydia 软件源 大全
- 一文读懂中国的影子银行
- 30系列显卡安装tensorflow1.15
- html/css横向竖向导航栏的绘制
- 微信小程序请求头header_微信小程序开发:http请求
- 怎么画好人体结构?男人、女人、孩子的身体比例画法
- 浅谈码农职场修养三五点
- warning C4005]ws2def.h(91): warning C4005: “AF_IPX”: 宏重定义 winsock.h(460) : 参见“AF_IPX”的前一个定义
热门文章
- 预测房价(Python)
- 状态同步的mmo网络游戏中的帧率
- 区块链NFT之OpenSea
- Optimizing Bloom Filter: Challenges, Solutions, and Comparisons论文总结
- 天干地支(出生年月的转换)
- TCP协议 握手与挥手
- 计算机桌面上常见的图标有,win10白图标修复的方法是什么_win10电脑桌面图标显示白色方块的解决方法-系统城...
- Mysql建表——报错1005
- C语言:数组与指针之 p++ 操作的细节问题(p是指针)
- java 时间before_Java中的即时isBefore()方法