1、事件流
事件冒泡
IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获
事件捕获的思想是不太具体的节点应该更早的接收到事件，而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。
DOM事件流
“DOM2级事件流”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。以简单的HTML页面为例，单击<div>元素会按照下图顺序触发事件
在DOM事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生，事件又传播回文档。
多数支持DOM事件流的浏览器都实现了一种特定行为；即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件的目标，但Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。
Opera、Firefox、Chrome和Safari都支持DOM事件流；IE不支持DOM事件流。
2、事件处理程序（或事件侦听器）
事件是用户或浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。 而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick等。为事件指定处理程序的方式有好几种。
HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性指定。如：
function showMessage(){
alert("Hello World!");
}
</script>
<input type="button" value="Click me" onclick="showMessage()"/>
在HTML中指定事件有两个缺点。首先，存在一个时差问题。因为用户可能在HTML元素一出现在页面上就触发相应的事件，但当时事件处理程序有可能尚不具备执行条件。例如前面的例子，假设showMessage函数在按钮下方页面最底部定义的，如果用户在页面解析showMessage函数之前就单击了按钮，就会引发报错。第二个确定是HTML与JavaScript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方。
DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是讲一个函数赋值给一个事件处理程序属性。要使用JavaScript指定事件处理程序，首先必须取得一个要操作的对象的引用。
每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常小写，例如onclick。将这种属性的值设置成一个函数，就可以指定事件处理程序。
使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此是在元素的作用域中运行，换句话说，程序中的this引用当前元素。
btn.onclick = function(){
alert(this.id); //"myBtn"
};
可以在事件处理程序中通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序会在事件流中的冒泡阶段被处理。
可以删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序属性的值设为null即可。
DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
与DOM0级方法一样，DOM2级方法天际的事件处理程序也是在其依附的元素的作用域中进行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("Hello World!");
},false);
这里为按钮多添加了两个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发，因此首先会显示元素ID，其次会显示“Hello World!”消息。
通过addEventListener()添加的事件处理程序只能使用removeEventListener来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除，如下：
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.removeEventListener("click",function(){ //没有用！
alert(this.id);
},false);
var handler = function(){
alert(this
【我理解的游戏】
在我的理解里，游戏就是可以交互的动画。所以游戏的原理跟动画是差不多的。
相信动画的原理大家都知道，就是通过一系列的变化来让静态的图片达到动的效果。
不过游戏与动画不同的是，游戏是可以交互的。也就是说，用户对游戏有一定的控制权。游戏也会根据用户的操作来反馈给用户不同的动画，当然也会记录用户在整个游戏中的表现。一般会用分数显示的反馈给用户，他在整个游戏中的表现。
大多数的canvas游戏，是通过不断的擦除canvas然后重绘被擦除的部分。并改变被擦除前那一部分的所有元素的位置或者颜色来达到动画的效果。当然也有部分游戏是根据用户的某个操作来激活某个动作。比如五子棋，就是通过用户在棋盘上的点击来添加一个新的棋子来构成游戏。
当然既然是canvas游戏，对canvas的一些API就一定要熟悉啦，不过不熟悉也没关系拉。 在游戏中用到的API我都会逐一介绍它的用法和用处。下面就正式开始进入游戏开发的过程吧。
【游戏结构】
既然是做游戏，大家可以先想一想。游戏都有哪些基本元素。简单分析一下应该有如下几点是每个游戏都共有 。
开始，暂停，结束。 这三点应该是大多游戏都有的，然后如果要整个游戏运转，肯定会对游戏里面的画面进行更新。 如此一来，就又多了一个更新。这四点应该就是游戏的基础配置了，如此一来我们就可以根据以上四点来搭建一个游戏的基本结构了。 为了以后的游戏也可以同样的使用，我把它写成了一个父函数，可以供游戏的具体函数来继承。 我称它为gamebase
。下面是gamebase函数的所有代码。
* @author cat
*/
function GameBase(){
this.event = { //存储游戏事件
death : function(){},
updates : []
};
this.FPS = 1000 / 60; //游戏刷新速度
this.play = false; //是否开始
}
GameBase.prototype = {
constructor : GameBase,
//游戏更新的单步骤
step : function(){
throw new Error('此方法必须被覆盖！');
},
//是否在运行
isPlay : function(){
return this.play;
},
//添加事件
bind : function(listen, callback, time){
if(listen == 'death'){
this.event['death'] = callback;
}else if(listen == 'update'){
this.event['updates'] ? true : this.event['updates'] = [];
time || (callback.time == time, callback.timer = 0);
this.event['updates'].push(callback);
}
return this;
},
//删除事件
unbind : function(listen, fn){
if(listen == 'death'){
this.event['death'] = function(){};
}else if(listen == 'update'){
var i = 0, len = this.event.updates.length;
for(; i < len && fn == this.event.updates[i]; i++){
this.event.updates.splice(i, 1);
}
}
return this;
},
//游戏开始函数
start : function(){
var self = this;
self.startTime = new Date().getTime();
if(!self.isPlay()){ //避免重复开始
self.timer = self.timer = setInterval(function(){
self.step();
},self.FPS);
self.play = true;
}
},
//游戏停止函数
stop : function(){
this.play = false;
clearInterval(this.timer);
},
//游戏结束函数
death : function(){
this.stop();
this.event['death'].call(this);
},
//游戏更新函数
update : function(){
var updates = this.event['updates'], i = 0, len = updates.length, now = new Date().getTime(), update, time;
for(; update = updates[i], i < len; i++){
update.time ? (now - (update.timer || 0) > update.time) && (update.timer == now, update.call(this)) : update.call(this);
}
}
}
//两个工具方法
var lynx = {
extend : function(parent, child){
var fn = function(){};
fn.prototype = parent.prototype;
child.prototype = new fn();
child.prototype.constructor = child;
return