不断的深入的过程,的游戏引擎也不少

Web IDE

当开始开发游戏时你首先要选择使用哪个编辑器。这里有很多编辑器(Sublime, Eclipse, Dreamweaver, vi等)。在大多数情况下,你已经有一个最喜欢的编辑器了。如果你对在浏览器内进行开发感兴趣的话你应该会想要试一下Firefox Nightly最新推出的Web IDE。

图片 1

Web IDE不仅提供了一个功能全面的编辑器,也可以作为很多本地和远程平台,调试器,模板框架和应用管理的发布代理。并且,支持Web IDE的框架提供了API,使得其它编辑器可以使用它提供的函数。想要了解这方面的更多细节,请看一下这个帖子。

想要同步看Firefox Developer Tools的更多新闻,请看他们在Hacks博客上的系列文章。想要最新的最稳定的开发者工具特性,可以看他们在MDN上的文档。

Stripe

HTML5 同样也是这个网站的开发标准,使用 sessionStorage 缓存数据,用 postMessage 与服务端通信。

图片 2

1. Crafty

 

游戏优化

现在的HTML5游戏给尤其开发者提供了很大的力量。很多游戏将会在移动设备上运行,这和在桌面运行相比效果会差很大。所以如果你想要你的游戏在多种平台上都取得成功,优化你的代码非常重要。 Optimizing your JavaScript Game for Firefox OS 这个帖子提供了很多可以帮助你开发出在低端移动设备上也能良好运行的游戏的技巧。

HexGL

相信很多人看到这个会觉得眼熟,不错!这是类似《反重力赛车》的一个 WebGL 应用。

图片 3

9. Akihabara

autoprefixer

本地化

为了你的游戏有更多的用户,你可能想要你的游戏提供对多种语言的支持。由于部分开发者将本地化也考虑在游戏的制作中,我们做了很多的招募翻译的工作来帮助你翻译游戏。想要了解这方面的更多信息请看这里。

Codepen.io

非常强大的在线编辑器,比众所周知的 JSFiddle 还碉堡! 可以使用 Markdown, Haml, Slim, Less, Sass 和 CoffeeScript 在线编写。

图片 4

图片 5

 

来自 Mozilla 的 HTML5 游戏开发资源

2014/09/19 · HTML5 · HTML5

本文由 伯乐在线 - betty135 翻译。未经许可,禁止转载!
英文出处:mozilla。欢迎加入翻译组。

今天我们发布了Firefox 31,它具有一些可以帮助HTML5游戏开发者编写并调试复杂游戏的新特性。并且Mozilla用博客记录了用asm.js做的首款商业游戏,像Dungeon Defenders Eternity 和Cloud Raiders这两款游戏都是用Emscripten编译器交叉编译到JavaScript中的。像这样的游戏意味着HTML5已经是一个游戏平台了。

如果你对Emscripten感兴趣你可以在Emscripten wiki了解更多详细信息,也可以在github page上面获得代码。另外一个很好的资源是MDN上的 Emscripten tutorial。如果你想知道的asm.js性能,可以从这篇文章中获得更多细节asm.js performance improvements in the latest version of Firefox make games fly! 。

在这篇文章中我们会介绍给你一些Mozilla开发者所创造的资源,利用这些资源你可以编写并调试基于HTML5的游戏。这不是一个非常详尽的列表,我们欢迎大家提供在这方面任何有价值的反馈,请在评论中告诉我们。

WebPlatform.org

这个网站整合了来自业界 Adobe、Facebook、Google、HP、Microsoft、Nokia、Mozilla 和 Opera 的文档资源,在 W3C 的领导下创建了一个标准化的 Web 开发文档分享仓库,方便开发人员编写符合标准且具备良好跨浏览器兼容性的 Web 应用。

图片 6

 

4. GMP

 

Shader编辑器

当开发基于WebGL的游戏时,当应用运行时能够测试并且改变着色程序是非常有帮助的。使用开发者工具里面的Shader编辑器可以实现这一功能。顶点和分片着色程序都不用重新加载页面就可以修改,或者直接可以查看对输出有何影响。

图片 7

如果你想要对Shader编辑器有更多了解,请看这个帖子 Live editing WebGL shaders with Firefox Developer Tools,也可以看看这篇 MDN文章,它包含了一些展示实时编辑的视频。

Canvas

Canvas 可以说是 HTML5 最强大的功能之一,给网页游戏的开发带来了革命性的变化。

craftyJS 个轻量级的,模块化 JavaScript 游戏引擎,包括了许多组件:动画,事件管理,重新划分区域,碰撞检测,sprite 等等。它支持所有类型的浏览器,比如  IE9。不需要 dom 操作和自定义绘图程序。

Webpack 中文指南:http://webpackdoc.com

网络音频编辑器

现在的版本Firefox Aurora (32)有一个网络音频编辑器。这个编辑器用图形展示了所有的音频节点以及它们在现有的AudioContext中的联系。你可以详细查询每个节点的属性并监测它们。

图片 8

 Web Audio API提供了比HTML5的 Audio tag更加复杂和强健的声音创造,操控和处理的功能。当使用网络音频API时记得读一下 Writing Web Audio API code that works in every browser,它包含了支持多种音频节点的相关信息。

如果你想要对网络音频编辑器有更多了解,记得读这篇介绍网络编辑器的文章,以及MDN 上的这篇文章。

HTML5 Boilerplate

最流行的前端模板——HTML5 Boilerplate,相信前端开发人员都知道。

图片 9

支持 Firefox (Gecko), Safari/Chrome (WebKit), Internet Explorer 6+, Android 和  iOS

工具

作为一名HTML5开发者,你并不会缺少可随意使用的工具。在Mozilla社区中我们一直致力于扩展Firefox开发者工具。这些包括一个功能全面的JavaScrip调试器,样式编辑器,页面探测器,暂存器,分析器,网络监测和网页控制台。

除了这些,最近也引进和更新了一些著名的工具,它们可以为游戏开发者提供很好的功能。

工具和应用

3. Gamequery

张鑫旭:

网络监测器

当开发一个基于HTML5游戏的网站时,这个网站对于手机用户来说是非常麻烦和非常耗费时间的。使用这个网络检测器你可以直观地监测所有请求地址的网络请求,操作所花费的时间,以及终端的大小和型号。

图片 10

另外使用网络监测器你可以看到一个你的app在缓存和未缓存情况下的表现的分析。

图片 11

如果你想要知道更多关于网络监测器的详细信息请看MDN 网页。

BarackObama.com

这个网站可以说是奥巴马在总统竞选中获胜的秘密武器。基于 HTML5 Boilerplate 建立。

图片 12

图片 13

从何处开始

当开发一个基于HTML5的游戏时,你可以有很多种选择。从选择哪种编辑器,到游戏中根据使用的渲染框架和游戏引擎决定的是否会用到Canvas 2d、 WebGL、SVG 或者 CSS。大多数这种决定都会根据开发者的经验或者是游戏发布的平台来决定。没有任何一篇文章可以回答这些问题,不过我们想要把材料集合在一起,这样可以帮助你立刻起步。

对游戏开发者来说,MDN上最关键的资源之一就是 Games Zone.MDN的这一部分包括游戏开发的文章,演示,外部资源以及实例。它也包括一些对于开发者完成HMTL5需要了解的API的详细描述,包括声音管理,网络,存储和图形渲染。我们现在正在对这部分内容进行添加和补充。我们希望将来有大多数普通场景,框架和工具链的内容和实例。

同时这里也有一些帖子和MDN上面的文章可以帮助游戏开发者进行工作。

您可能感兴趣的相关文章

  • 10个精美的复古风格 HTML5 网站作品
  • 12个精美的 HTML5 个人网站设计欣赏
  • 10个精美的 HTML5 企业网站作品欣赏
  • 35款精致的 CSS3 和 HTML5 网页模板
  • 15个精美的 HTML5 单页网站作品欣赏

 

本文地址:年度盛宴:2012年排名前20的 HTML5 应用和网站

文章来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源


gameQuery  是 个易于使用的 jQuery 插件,可以通过添加相关游戏的类来帮助开发 Javascript 游戏,自从它使用 DOM 操作代替了 Canvas gameQuery ,现在可以兼容大量的浏览器,即使是比较旧的版本:Firefox, Chrome, Internet Explorer, Safari, Safari for iOS, mobile versions of Webkit 和 Opera。  

H5+中国产业联盟:

API

MDN Games Zone列出了很多可以帮助开展游戏开发的API和文章。

图片 14

除了这些资源你可能对额外的对开发有帮助的文章也感兴趣。

如果你的游戏支持使用WebRTC或WebSockets的多媒体互动,你可能对Together.js也感兴趣,它提供了web app的协作特定。想要了解可以实现什么可以看一看Introducing TogetherJS。

很多游戏需要存储空间,IndexedDB可以满足这一需求。想要了解扩展IndexedDB的性能,可以读Breaking the Borders of IndexedDB。你可能也对 localForage感兴趣,它提供了和浏览器无关的简单存储支持。想要知道更多详细信息可以读这个 Hacks post。

Responsive Images Community Group

一个由开发者组成的工作小组,致力于实现基于标签的响应式图片。

图片 15

7. Starlingjs

JS/HTML互转:

你的声音

Mozilla是一个关于开发者和用户的社区,我们需要你的帮助和反馈。如果你有一些想要在未来产品中看到的特性,请加入irc.mozilla.org的讨论,或者通过 mailing lists联系。你也可以记录bugzilla.mozilla.org的bug。另外,我们也在DevTools  和Open Web Apps上有额外的反馈渠道。

赞 收藏 评论

HTML5 作为开发标准

已经有很多前沿的公司采用 HTML5 来作为默认的开发标准,下面三个网站是其中的优秀案例。

lycheeJS 是个 JavaScript 游戏库,提供完整的原型解决方案和 HTML5 Canvas 部署,在 Web 浏览器或者原生环境的WebGL 或者是基于原生 OpenGL(ES) 的游戏。这个项目的开发过程优化了 Google Chrome 和它自身的开发工具。  

HBuilder:文档 

调试器

在最新推出的Firefox中,我们为浏览器增加了一个Canvas调试器。图片 16

这个Canvas调试器可以追踪所有用来生成框架的canvas指令,有些特别的指令都会用颜色标注出来比如画一个部件或者使用特定的着色程序。这个Canvas调试器不仅可以用来开发基于WebGL的游戏,同时也可以用来调试基于Canvas 2D的游戏。在下面的游戏用你可以在动画中看到每个图像都被画到画布上。你可以点击任意一行直接跳到控制这个动作的JavaScript部分。图片 17

Canvas调试器最常报的两个错误是 setInterval instead of requestAnimationFrame和inspecting canvas elements in an iFrame。

如果想要了解关于Canvas调试器的更多的详细信息,请阅读Introducing the Canvas Debugger in Firefox Developer Tools。

The Rational Keyboard

这是一个神奇的网站,可以弹奏音乐的网站,赶紧来体验一下吧!

图片 18

Quintus 引擎是个 HTML5 游戏引擎,模块化,轻量级,而且带有简洁的 Javascript 友好的语法。 Quintus 是一个易学,使用有趣的 JavaScript HTML5 游戏引擎,支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例。 

HTML 5 JavaScript API Index :

关于作者:betty135

图片 19

(新浪微博: 个人主页 · 我的文章

图片 20

Subbania

这是 Chrome Store 上面的一款游戏,功能比较简单。

图片 21

在这篇文章中,我们经过各种资料探寻,测试,实际应用等方法,收集了专门提供给开发者的20 款免费的 JavaScript 游戏引擎, Enjoy!

示例网站:

Google's arms trade visualisation

由 Google 开发,展示各个国家质检军火贸易的 WebGL 应用。

图片 22

 

HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。...

http://www.ro.me

您可能感兴趣的相关文章

  • 15个精美的 HTML5 单页网站作品欣赏
  • 10个精美的复古风格 HTML5 网站作品
  • 12个精美的 HTML5 个人网站设计欣赏
  • 10个精美的 HTML5 企业网站作品欣赏
  • 2012年度排名前20位的 CSS 网站作品

 

  这一年,响应式设计和 Twitter Boostrap 引导了主流;微软发布了 IE10,Chrome 和 Firefox 都新发布了7个版本;这一年,众多优秀的网页设计作品涌现出来。这篇文章精心挑选了2012年排名前20的 HTML5 网站,相信这些优秀网站能够带给你惊喜。

图片 23

工具:

Khan Academy computer science course

这个网站提供了很多的计算机方面的教程,各个方面的都有。

图片 24

图片 25

HTML5 官方API:

BBC's Radiophonic Workshop recreations

英国广播公司使用 HTML5 音频 API 创建的一个广播电台。

图片 26

 

10. JsGameSoup

 

WebRTC 和 getUserMedia

  WebRTC 是一项在浏览器内部进行实时视频和音频通信的技术,提供了视频会议的核心技术,包括音视频的采集、编解码、网络传输、显示等功能,并且还支持跨平台。

大部分的游戏引擎都能提高游戏开发的效率,即使是创建全功能型的游戏。但是,也有一些开发者为了能更好的理解游戏的每个组件,喜欢从头开始创作。现 在基于 Javascript-HTML5 的游戏引擎也不少,这是好事,同时,也是个坏事,因为事实上大多数开发出来的产品都没人维护,或者即将停止维护。所以,选择某一游戏引擎需要仔细考虑的就 是该引擎在未来几年是否会继续维护,更新,进行功能增强。

 

本文由必威发布于必威-前端,转载请注明出处:不断的深入的过程,的游戏引擎也不少

相关阅读