说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

开源HTML5游戏引擎Frozen背后的技术

HTML文档下载 WORD文档下载 PDF文档下载
Frozen是一款开源的HTML5游戏引擎,它诞生的目的就是为了将构建现代Web App中使用的技术,应用到游戏开发当中。那在实现这一目的时,有哪些技术在Frozen背后支持着呢?文中就为大家揭晓这些技术及它们所起的作用。

Frozen是一款开源的HTML5游戏引擎,通过工具和模块化实现了其简单易用和快速开发的优点,而且大多的主流浏览器皆支持这一游戏引擎。它诞生的目的就是为了将构建现代Web App中使用的技术,应用到游戏开发当中,比如AMD模块、依赖管理、构建进程以及项目脚手架。


Frozen背后的技术

那么,Frozen在实现这一目的的同时,存在其背后的技术又有哪些?下面要介绍的就是这些技术及它们在构建Frozen时所起到的作用:

  • Node.js和npm:作用于构建进程和开发工作流的依赖管理。
  • Grunt:开发工作流的task runner,允许单一入口点进行开发配置。
  • Volo:负责客户端的依赖管理和项目脚手架工具。
  • Lo-Dash:库内所使用的低级工具库。
  • Hammer.js:多点触控库,用于鼠标/触摸/指针事件标准化和手势。
  • dcl:用于生成构造函数和提供AOP的简便方法。
  • Box2d:用于游戏中的物理计算。
  • Dojo:用于AMD载入器和一些库内的公共模块,Dojo构建进程是用来构建一个单独的JS文件。
  • JSDoc:生成代码文档。
  • Jasmine:使用Jasmine行为驱动,拥有灵巧而明确的语法可以让你轻松的编写测试代码。
  • AMD:所有的模块都是使用AMD编写,且单层包括一个AMD模块加载器。

代码示例:

GameCore:

require(['frozen/GameCore'], function(GameCore){  // game state  var x = 0;  var y = 0;  //setup a GameCore instance  var game = new GameCore({    canvasId: 'canvas',    draw: function(context){      context.clearRect(0, 0, this.width, this.height);      context.fillRect(x, y, 50, 50);    },    update: function(millis){      x += 1;      y += 1;    }  });  //launch the game!  game.run();});
InputManager:

require(['frozen/GameCore', 'dojo/keys'], function(GameCore, keys){  var x = 100;  var y = 100;  var speed = 2.5;  //setup a GameCore instance  var game = new GameCore({    canvasId: 'canvas',    draw: function(context){      context.clearRect(0, 0, this.width, this.height);      context.fillRect(x, y, 50, 50);    },    initInput: function(){      //tells the input manager to listen for key events      this.inputManager.addKeyAction(keys.LEFT_ARROW);      this.inputManager.addKeyAction(keys.RIGHT_ARROW);      this.inputManager.addKeyAction(keys.UP_ARROW);      this.inputManager.addKeyAction(keys.DOWN_ARROW);    },    update: function(millis){      //just an example showing how to check for presses, could be done more effeciently      if(this.inputManager.keyActions[keys.LEFT_ARROW].isPressed()){        x-= speed;      }      if(this.inputManager.keyActions[keys.RIGHT_ARROW].isPressed()){        x+= speed;      }      if(this.inputManager.keyActions[keys.UP_ARROW].isPressed()){        y-= speed;      }      if(this.inputManager.keyActions[keys.DOWN_ARROW].isPressed()){        y+= speed;      }    }  });  //launch the game!  game.run();});
ResourceManager:

require(['frozen/GameCore', 'frozen/ResourceManager'], function(GameCore, ResourceManager){  var x = 0;  var y = 0;  var speed = 1;  //setup a ResourceManager to use in the game  var rm = new ResourceManager();  var backImg = rm.loadImage('images/background.png');  var nyan = rm.loadImage('images/nyan.png');  //setup a GameCore instance  var game = new GameCore({    canvasId: 'canvas',    resourceManager: rm,    draw: function(context){      context.drawImage(backImg, 0, 0, this.width, this.height);      context.drawImage(nyan, x, y);    },    update: function(millis){      x += speed;      y += speed;    }  });  //launch the game!  game.run();});
传送门:Frozen官网、mobilehub主页

Infoworld Bossie Awards:最好的开源App锦集 除了乔布斯的鼠标 值得装入时间胶囊的十大科技产品 2013中国互联网安全大会:云环境带来的安全隐患和机遇 2013中国互联网安全大会:软件安全新挑战 专访Line大中华区总裁:即使卖萌,也能深入人心 iOS开发者必备:四款后端服务工具 市场研究公司:iPhone5C/5S成本分别是173、199美元 对软件开发有利的5个敏捷编程方法 移动端性能大比拼:CSS Sprites vs. Data URI 三大峰会七大论坛,2013移动开发者大会将于11月在京举行 黑莓47亿美元收购的背后 微软或成最大受益者 搜索大战升级:360搜狗相互起诉对方不正当竞争 诺基亚将于10月22日发布6款新产品 平板Lumia 2520等 从17美元到50美元 Facebook股价上涨背后的两大关键 12个理由:为什么我会认为Android比iOS 7好! AMD推 "Mantle" API 欲释放GPU全部潜能 Salesforce架构:日事务过13亿,2.4万TPS的数据库峰值 久违的iOS,新鲜的SDK,豌豆荚发布云相册 喜大普奔:谷歌15岁了,生日快乐! 传福特CEO Alan Mulally目前最有希望执掌微软 微软计划将WP8和Win8应用商店合并?太好了! 响应开发者要求:Kinect for Windows SDK 1.8发布 OpenStack基金会BD总监:希望有更多的中国公司加入 CTO如何避免决策失控(三):从CEO角度看CTO的应对能力 IT界需求最旺的16项技能 PMC发布8系列RAID卡 找准国内互联网企业需求 早Google一步,eBay数据中心率先搭载了火星上使用的技术 目标专利2000,技术研发人员占55%,斐讯的厚积薄发 SwiftStack CEO:分布式存储的未来 触控陈昊芝:“好声音”标王对移动游戏未来的预测 Office将更强大:微软正开发Office Reader和Office Lens 浏览器里能否使用带有界面的ActiveX Dialog中Edit控件对应的变量m_edit_string(CString型)如何得到控件中显示的串 各位:哪里有PB 7.0下载? 新学jbuilder请教前辈:听说用jbuilder做出来的东西脱离jbuilder环境后运行通常要改好多东西,怎么做能避免这类情况?用jbuilder做开发要 GetWindowNext怎么老是返回NULL? 我想学java,但是,我现在只会c++? 急都急死了,快教教我如何用Resin配jsp服务器啊?? 请问哪里可以找到Delphi 6 Developer's Guide这本书? 请问VB中怎么把从ms sqlserver中查到的记录输出到其它库中?如foxpro …… http://www.ws.net.cn/cgi-bin/lb2/topic.cgi?forum=1&topic=6696&show=0快了看看,有没有你们喜欢的女生? 爽呀!!!Visual Studio.net实在是正点呀! 我想用delphi自带的Micorsoft help workshop做帮助行么,在delphi哪里呀,我没找到! 我打算按下一个按钮实现ctrl+space切换输入法的功能,可是不好使,大家帮我看看 在dreamweave ultradev下如何把ASP与本地服务器上的数据库连接起来。 请教,来者有份,200分大放送, 初学者关于Package的问题 再贴WebLogic Server 和 Weblogic Integration 有何不同,各是用来做什么的? 我在APPlication中开始处加上如下代码,在PB下运行时没问题,怎么编译后执行exe文件后老提示连不??为什么,请赐教!! 在静态切分窗口中,如何显示标题? 求教大虾:如何给软件加上licence限制 抗议CSDN帖子内容为楷体,同意者举手! 如何在画布上画一个带箭头的直线. *-->为对话框应用上妆!在线等待 [诚征交友]不诚勿扰,请条件适合男士入内 有谁用过Cute ftp上传软件,为什么一进行文件同步时,就出现404 object not find的错误 关于界面对象丢失的问题…… 请大家看看这个问题。 我真的很需要帮助。。。请问谁有360度可以许多张图片旋转的代码 360度全景特效 高分求树型结构源代码 现在出了本Jbuilder5的书。有没有谁有这本电子书啊? 高分求树型结构源代码 SDK问题 这句sql有问题吗? 关于驱动程序开发! 在SQL-SERVER中出现数据死锁的情况一般是什么,若是由多个用户同时向数据库更新数据而导致的死锁,解决此问题的办法有那些? 寻找源代码排版软件? 有没有用VC写过短信接收程序,我在接收中文时出现乱码。 请教大虾:用mideaplayer来播放一首歌,如何用progressbar来表示进度? 我想学习驱动程序的开发,请大家帮我推荐几本这方面的书? 编译出错,不解?请高手指点。 能否用Delphi 实现类似东石公司的虚拟光驱系统。 我想学习驱动程序的开发,请大家帮我推荐几本这方面的书? include头文件的问题 急!!!为什么TBlobField 下载时大小受限制,怎么解决? 关于导出动态连接库中的类的问题,不知道这里有没有高手? 一个让我痛苦了n天的问题 关于Hook的一个问题 联合查询如何修改? 获取密码时出错???? my gf photo 我想问一下,java生成的.class文件能不能通过某种工具生成.exe文件? 稀有气体的原子结构很稳定,与此相关的核外电子排布特点是_____ 包含关系{a}含与A与属于关系a∈A有什么区别?试结合实际做出解释 子集和真子集有什么区别?若A={1,2,3},B={1,2,3}那么A是B的子集,B也是A的子集?而且两集合相等?若A={1,2},B={1,2,3},那么A是B的子集?还是真子集? 判断题基础三章6 资产=负债+所有者权益是最基本的会计等式,即第一个会计等式() A对 B错判断题基础三章6 资产=负债+所有者权益是最基本的会计等式,即第一个会计等式() A对 B错 若1mol某烷烃燃烧后,测得产物中含有m molCO2和n molCO,则该烷烃分子中氢原子个数为Am+nB2[m+n】Cm-n+2D2【n+m+1】解释一下啊 双曲线的渐近线公式 68g的二氧化碳其中含氧原子多少mol 1mol某烷烃完全燃烧时消耗氧为多少mol,生成多少水? 双曲线顶点到渐近线的距离, ( )mol 水分子中所含有的氧原子数与1.5mol二氧化碳分子中含有的氧原子数相同 关于集合求A∩B和A∪B的区别设A={x|x 如果双曲线经过点(6,如果双曲线经过点(6,√3)且它的两条渐近线方程是x+-3y=0,那么双曲线方程是?方法 8g O2与___L(标准情况)的Co2气体所含氧原子数相同.与____mol SO2所含分紫数相同 集合{(a,b)}与{a,b}的区别就是集合带括号(a,b)与集合不带括号a,b 双曲线共渐近线说明什么? 多少mol的CO2中含有0.25mol的氧原子? 差集A-B与B-A有什么差别举个例子 双曲线的渐近线的问题为什么可以讲双曲线的标准式的1改成0求渐近线呢?这个又表示什么意义呢? 已知F1、F2分别是双曲线C:x^2/a^2-y^2/b^2=1的左右焦点,若F2关于渐近线的对称点恰落在以F1为圆心,丨OF1丨为半径的圆上,则双曲线C的离心率为A.根号三 B.3 C.根号二 D.2求详细解答 A交B=空集 和A U B=空集 有什么区别?A U B=空集 可以德到什么结论? 双曲线渐近线求法通法是化为标准式 再将右边的1变为0 请问是何道理 已知F1、F2分别是双曲线x^2/a^2-y^2/b^2=1(a>0,b>0)的左、右焦点,过F2与双曲线的一条渐近线平行的直线交另一条渐近线于点M,若∠F1MF2为锐角,则双曲线离心率的取值范围?求详解. {a,b}和{b,a}是不同的集合么? 为什么在解决天体运动问题中天体的匀速圆周运动所需的向心力由万有引力完全提供,不是万有引力还提供给重力,只分一点给向心力吗?我搞不懂啦! 高一物理必修二中天体运动中天体运动通过近日点或远日点所扫过的面积 高一物理必修2题目某同学使小球沿课桌面飞出,用数码相机拍摄小球做平抛运动的录像{每秒15帧照片},并将小球运动的照片打印出来.请问:他大约可以得到几帧小球正在空中运动的照片?{麻烦 已知地球半径为R,地球附近重力加速度为g,计算在距地面高为h的圆形轨道上的卫星做匀速圆周运动的线速度v和周期T. 今天学的引力…老师讲的也快,书上写的太阳对行星和行星对太阳的力我都明白了,但是跟两物体质量成正比没看懂,说它们的力是相互的.那为什么不乘二?就算跟两行星质量有关…那引力有方 填空题 所有 还有实验题 怎么算的 有两个不同轨道上的行星A和B绕着它们的中心体C运动,三点始终保持一条直线,且A和B分别在两端.AB为L,A质量为m,B质量为M.求T为什么这道题不符合公式 M=4π²R³/GT²它们的周期一样,中 会计基础.这句.任何一项经济业务的发生都会引起资产或权益的增减变化,但始终保持资产=权益这一平衡会计基础.这句.任何一项经济业务的发生都会引起资产或权益的增减变化,但始终保持资 1.两颗小行星都绕太阳做圆周运动,它们的周期分别是T和3T,则它们绕太阳运动的轨道半径之比为多少?2.已知太阳光从太阳射到地球需要500s,地球绕太阳公转的周期约为3.2X10的七次方秒,地球的质 下列( )经济业务的发生不会使得“资产=负债+所有者权益”这一会计等式左右双方的总额发生变动.分别说明原因,下列( )经济业务的发生不会使得“资产=负债+所有者权益”这一会计等 已知双曲线C与双曲线y²/2-x²=1有相同的渐近线,且C的一个顶点为(1,0),C的焦点为F1,F2,在曲线C上有一点M满足MF1·MF2=0,求点M到x轴的距离, A、B两艘快艇在湖面上做匀速圆周运动,在相同的时间内,它们通过的路程之比是4:3,运动方向改变的角度之比是3:2,它们的向心加速度之比是多少? 氧化铁中混有二氧化硅怎么除 置换反应是氧化还原反应吗?RT 已知F1、F2分别是双曲线C:x^2/a^2-y^2/b^2=1的左右焦点,若F2关于渐近线的对称点恰落在以F1为圆心,绝对值OF1为半径的圆上,则双曲线C的离心率为( B)B、3 C、根号2 高一物理必修2题目,麻烦告诉我怎么做?某只走时准确的时钟,分针与时针由转动轴到针尖的长度之比为1.2:1. (1)分针与时针的角速度之比等于多少? (2)分针针尖与时针针尖的线速度之比 关于概率论与数理统计的一个问题:概率、事件、发生与不发生的关系问题.必然事件,必然发生,概率等于1;不可能事件,不可能发生,概率等于0;我想问的是为什么不能倒过来推(也就是概率 “a真含于B”与“a属于B”的区别 两焦点在Y轴上的双曲线的渐近线是什么? 哪些分子中原子的最外层达到8电子稳定结构 包含关系{a}含于A与属于关系a属于A有什么区别 集合A是集合B的真子集与集合A是集合B的子集之间有什么区别? 氧化还原反应和置换反应有什么区别和相同啊~能易懂的说下吗?是不是还有什么化合价变不变的啊`~ {a}含于A与a属于A有什么区别 以集合U=a,b,c,d 的子集中选出2个不同的子集,需同时满足以下两个条件:(1)a、b都要选出;(2)对选出的任意两个子集A和B,必有 ,那么共有 种不同的选法必有A属于B或B属于A 有36种 的确是选 某原子的结构图是8.2.6.该核电荷数是什么?该原子在化学反应中容易得到多少个电子? 体积相同的实心铜球和铝球都浸没在水,则浮力情况?PS:是要用阿基米德原理还是F浮=G物? 完全燃烧标况下气态烷烃的混合物2.24升,生成二氧化碳6.6克,水4.05克,求我算了几次 总和答案不对 置换反应与氧化还原反应有什么区别? 包含关系{a}含于A与属于关系a∈A有什么区别?能举例子吗 子集与真子集有共同点,当A集合属于B集合时,怎么区分A集合是B集合的子集或真子集呢 在发生化学反应时原子一定会变成稳定结构吗?(就是最外层变成8) a∈A 和a包含于A有什么区别 举例说明 某气态烷烃和气态烯烃的混合物2.24L,完全燃烧后水重4.05克,二氧化碳6.6克,书混合气体平均分子量.求混合气体的成份和体积百分组成 当一氧化碳与二氧化碳质量比为2:3时,氧原子的个数比是多少 包含关系{a}含于A与属于关系a∈A有什么区别?有人说是包含关系指的是集合之间的关系,例如集合A={1,2,3}集合B={1,2},那么A就包含B而属于关系指的是元素和集合之间的关系如集合A={1,2,3},那么1就 集合a属于集合b 集合a是集合b的子集 集合a是集合b的真子集 三种说法的区别
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘