此文写给想专注游戏,或者从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]看下例子,顺便帮忙投一票。
分享到:
相关推荐
浅析基于STC12C5A60S2 单片机的电量监测技术研究.docx浅析基于STC12C5A60S2 单片机的电量监测技术研究.docx浅析基于STC12C5A60S2 单片机的电量监测技术研究.docx浅析基于STC12C5A60S2 单片机的电量监测技术研究.docx...
浅析基于STC12C5A60S2 单片机的电量监测技术研究.pdf浅析基于STC12C5A60S2 单片机的电量监测技术研究.pdf浅析基于STC12C5A60S2 单片机的电量监测技术研究.pdf浅析基于STC12C5A60S2 单片机的电量监测技术研究.pdf浅析...
HTML5部分功能浅析 HTML5部分功能浅析 HTML5部分功能浅析 HTML5部分功能浅析 HTML5部分功能浅析
java组件的浅析
浅析基于脑科学的人工智能.pdf
WebRTC是基于浏览器的Web技术,而移动智 能终端的最大共同点是都具备浏览器...HTML5标准的开源技术,因此在移动智能终端采用 WebRTC技术实现视频通信更为容易,且开发成本 低,绝大多数智能终端均可以使用并实现互通。
抖音APP发展现状浅析——基于5W模式.pdf
主要介绍了Vue全局组件与局部组件的区别,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
浅析基于云计算的物联网数据挖掘技术.pdf
非线性思维科学 非线性思维浅析 基于非线性思维的主体实践
浅析基于大数据的智慧照明控制系统.pdf
浅析一种基于STM32智能导盲拐杖.pdf
浅析Java swing组件窗体设计
基于区块链技术的建设工程项目管理浅析.pdf基于区块链技术的建设工程项目管理浅析.pdf基于区块链技术的建设工程项目管理浅析.pdf基于区块链技术的建设工程项目管理浅析.pdf基于区块链技术的建设工程项目管理浅析.pdf...
基于Java的Web开发技术浅析
浅析人工智能基于计算机网络的应用.pdf
浅析基于C语言的常用排序算法比较.pdf
浅析基于网络信息时代的企业员工培训.pdf
浅析基于大数据的工程造价结算审核方法.pdf
浅析JavaScript实现基于原型对象的“继承”.pdf