浅析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为公司名，iGame引擎对外的变量
// inspind.Lang是引擎的常用函数
var s = inspind.Lang.namespace(namespaceStr); // 创建精灵
s.name = namespaceStr; // 添加属性
inspind.Lang.extend(s, inspind.Sprite.util, true); // 继承精灵的方法，以下.add()为继承过来的添加组件的接口
s.add(['css', 'attr', 'toggle', 'event', 'animate']); // 添加默认组件，可以添加不同功能的组件定义不同类型的精灵

// 其中add做的事件主要是注册组件、继承组件的属性和方法：this._comps.push(comp);inspind.Lang.extend(this, comp, true);

由此至少可推断，组件是个对象。看下组件的代码是什么样纸吧：

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;
	}
});

是不是很简单？

有了这些常识之后，可以理一下引擎的主要逻辑了。从主循环入手，每帧会调用两个函数，业务逻辑和重绘。业务逻辑就是游戏的算法，如何变化，怎样控制，改变了哪些，哪些需要重绘，需要的添加到inspind.Canvas.Dom数组里面；业务逻辑执行完成后，inspind.Canvas类会将数组里面的所有元素重绘出来。

题外话一：iGame引擎使用dom而没有用canvas标签，当时由于测试结果和领导决策而定；如果使用canvas道理也雷同，部分区别在于事件处理和区域重绘。事件处理方面，可以创建个hashmap，创建精灵的时候，记录下精灵的位置和大小(如mbr)，点击canvas时查找map，判断执行哪个精灵的什么事件；区域重绘可以找些脏矩形的资料，本文不讨论。
题外话二：我们公司致力于提高国人的智商，创造中国的脑力十年；有强大的理论和机构的支持，根据神经可塑性原理，即大脑为了适应新刺激而发生变化的能力，Inspind将训练设计成具有挑战性的练习游戏。大家没有理由不支持！再说不碍裆也要爱国呀。敬请点击：[url http=http://www.inspind.com/]我们[/url](guest/123456)
题外话三：如果觉得本文对你有一丁点帮助，可以到[url http=http://app.chrome.csdn.net/work_detail.php?id=104]这里[/url]看下例子，顺便帮忙投一票。