制作Javascript和HTML5游戏

取决于你有多想从头开始。回答您的直接问题:

1) 你将如何实现这些游戏?

答:JavaScript+Canvas。Canvas是来自HTML5的2D绘图面。在台式机上的性能相当不错,而在iOS和Android设备上的性能则不太好(截至本文发表之日)。如果移动是您最关心的问题,那么您需要使用DOM和css33d转换来触发这些设备上的GPU。

2) 你有什么技术建议吗?

答:这是第一个问题的答案。JavaScript是必须的,但是我会忽略jQuery。您的目标是HTML5设备,因此无需补偿传统浏览器。因为您可能正在使用Canvas,所以也不需要平滑DOM交互。有一些更高级的库可以使与画布的交互更容易,比如Easel.js。WebSocket对于双向流通信非常有用。Box2D对于物理引擎很有用。本地存储是简单的键/值字符串数据,用于诸如levelprogress之类的内容,但对于任何复杂的内容,您都需要websqldb。对于大型二进制资产,您需要查看文件系统API。最后,不要害怕WebGL,因为它是非常快速和有用的二维游戏。

3) 最难的部分是什么?

答:几乎可以肯定,最难的部分是调试。WebKit的开发工具可以使这更容易,所以不要离开家没有他们。

简单地说,用Canvas在屏幕上移动很多东西,用SVG绘制更漂亮、更慢的矢量图形。

你应该做的第一件事就是写一篇文章 speed test 程序,看看什么可以用画布做,然后玩它。

我写了一篇关于 Canvas & writing HTML5 games

edit 2019-02:processing.js很旧,不太受支持。相反,试试看 p5.js

别忘了 processing.js ,这是一个经过良好测试的全栈图形和交互javascript框架,它对大多数I/O、声音、图形甚至WebGL都有大量(如果不全面的话)支持。如果您编写普通的处理代码(基本上是编译成JavaScript的Java语法),那么您可以使用许多开源调试器,包括本机调试器 Processing 环境。除此之外,您还可以集成任何其他JavaScript代码。

这里是 a guide for the JavaScript developer

过来看。好东西。

对我来说,最困难的部分是没有工具来帮助绘制图形,例如,没有Maya导出到画布,因此,所有操作都是手动完成的,使用基本体,除非您希望获取位图,并将其作为精灵进行修改。

所以,你可能想看看你想要支持什么HTML5特性,比如一个内置的数据库,然后决定你愿意使用哪些浏览器。

如何实现这些将在很大程度上取决于你想如何创建图形,如果你想做三维图形,那么位图精灵将无法工作。

汤姆是从锡拉来的( Construct 2 game maker

构造2使用基于事件的系统为游戏添加逻辑,并为您做大量重复/困难的腿部工作。例如,在没有可视化编辑器的情况下向对象添加多边形碰撞有时是一项困难的任务。

不管怎样,我们认为它值得一看,你也可以很快得到结果。在开发HTML5游戏时,这是一种替代编码整个游戏的方法。

ChromeExperiments

也许这不是你想听的,但你想过从一本好书开始吗?

http://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=html5%20game

一个很好的问题当我开始学习HTML5的时候,我也遇到了这个问题,最后经过大量的研究,我发现最好的方法是使用一些引擎或框架。我学了油画,做了我自己的 game 但这需要数小时的逻辑和100多行代码。

最好和西拉一起去,那样会减少你的工作量。

我目前正在写一系列博客文章,解释如何使用EaselJS和Box2D来构建一个Javascript游戏。 Here's Part 1 .