关闭

手机游戏开发学习笔记

图形学,cocos2d-x,unity,unreal.....
118
原创
0
转载
0
译文
611
评论
1270818
访问

2012四月
10

Html5 Canvas初探学习笔记(15) -鼠标事件

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

本篇完成这样一个例子,让主角随着鼠标移动,效果如下:


update函数和上一篇一致,代码如下:


然后来看init的初始化部分,和上一篇的示例一样,代码如下:

然后分别定义mousedownmousemovemouseup,分别对应鼠标按下,移动和抬起。代码分别如下:


首先用如下代码获得坐标,如下代码使用于各种浏览器:

var mx,my;

if(ev.layerX || ev.layerX==0){

mx = ev.layerX;

my = ev.layerY;

}else if(ev.offsetX || ev.offsetX==0){

mx = ev.offsetX;

my = ev.offsetY;

}

然后检测鼠标坐标是否在图片的范围内,如果在范围内获得坐标偏移。


如果mousedown在图片范围内,在move中重新获得图片坐标,在抬起函数时释放,然后把函数注册到canvas中,完成本示例/

如有错误,希望大家多多指正

下一篇继续研究canvas的游戏实例


img

bill_man

等级:

排名:第1143名

博客专栏
文章分类
文章存档
阅读排行
评论排行
推荐文章
最新评论
说明
    Cocos2D-X权威指南(第2版)(china-pub首发),地址:http://product.china-pub.com/3770493 代码请关注github https://github.com/manshuoquan/book-code 包括A星算法的最新都在github上
img