飞机大战游戏当中鼠标跟随事件函数的处理（2015年10月21日）

首先我需要总结一下事件处理函数，事件触发时的处理程序有三种：

1.在HTML中，设置事件的属性，如<div on事件名=“js程序”></div>。

2.DOM中0级API：对象.on事件名=function(){}。

3.通过event对象，当事件触发时时，自动创建，自动传入事件处理函数内。

我们今天就来讨论当event对象中的鼠标跟随事件的x值和y值的获取。让我们来分析下面一段代码：

canvas.onmousemove = function(event){

var x = event.offsetX;
var y = event.offsetY;

hero.x = x - hero.width/2;
hero.y = y - hero.height/2;
}

首先说明飞机大战是用H5中的canvas画布实现的一个游戏，那么在这里我们来讨论一下offsetX（注意X是大写）和pageX的区别，在该案例当中pageX是指该点坐标，到整个页面左边缘的距离，而offsetX指的是该点的坐标到画布左边缘的距离(到其父元素及canvas画布)。通过获得鼠标，绑定构造器中x值河y值，来实现对象的跟随。