浅析HTML5基于组件的游戏引擎
此文写给想专注游戏，或者从flash转身前端的朋友。
大家好，想死你们了，大爱ITEYE。虽然我写的东西并不多，但回顾一下，也能发现自己的IT之路和些微进步。从上次的[url http=http://www.iteye.com/topic/783537]坦克大战[/url](可以点击进入，得到很多人的关注，实在是谢谢了)，到现在，已经成长到前台主管兼'初级'前台框架师，这中间实在学到了很多东西，得到了众多网友的帮助；但却愈发的忐忑，一个人水平不管到了什么程度，如果愿意分享，都会帮到适合的朋友。这也是本文的目的之一。
对于帮助过我的人的反馈，对于未走过来朋友的分享。
言归正转，多了就腻。本文所有论点基于我们开发的iGame游戏引擎。该引擎可以运行在所有支持html5的浏览器上面。
游戏引擎包含哪些模块？先普及下知识。一般来说游戏就是由精灵、物体(Tile)和场景拼成的；从功能块看是由基础层、游戏类、精灵类、物体类、组件类、多媒体类、数学类离线应用类、本地存储类和绘画类等组成。其中基础层相当于一个简单的js框架，类似弱化了的jQuery，封装了常用函数、基本的DOM操作、事件模块的底层实现、加载器的底层实现、Ajax封装和数组等内置对象的扩展等；游戏类内容比较杂，主要有主循环的实现(btw，用requestAnimationFrame替代setTimeout和setInterval)、全局事件封装、加载器封装、游戏资源加载完成的入口函数、创建游戏接口(生成命名空间添加工具方法)、组件接口和场景接口等；其他部分暂时略去不讲。
以下开始说组件。以精灵为例。
首先，精灵是什么？简而言之，精灵是一个会动的对象。
创建精灵的步骤什么？同上言之，生成命名空间，添加精灵的属性方法。
组件是什么？同上言之，组件可以看成精灵的父类，精灵可以继承多个父类的方法和属性。
用代码表示一下过程：
inspind.Sprite.c('event', {bind: function(type, handler, data) {inspind.Event.bind(this.element, type, handler, data, this);return this;},unbind: function(type, handler) {inspind.Event.unbind(this.element, type, handler);return this;},trigger: function(type, data) {inspind.Event.trigger({}, this.element, type, data);return this;}});