logo标签列表

制作Javascript与HTML5游戏

html
14
很久以前（Netscape 4时代），我编写了基于Javascript的游戏：其中包括Pong，扫雷和约翰·康威的生命游戏。现在我想重新回到这个领域，并想让自己更加深入地涉足其中。
我有几个游戏的想法：
  • 带有坚固地图和复杂规则的 Axis & Allies克隆版。
  • 可能带有实时玩家对玩家或玩家对电脑模式俄罗斯方块克隆版。
  • 带有一些武器和粒子速度的打砖块克隆版。
在所有这些游戏中，我只有一些目标：
  • 使用JavaScript和HTML 5-它应该在Chrome、Safari或iPad上运行。
  • 从小而简单的开始，逐步增加功能。
  • 学习关于游戏设计和实现的新知识。
所以我的问题是：
  1. 您将如何实现这些游戏？
  2. 您有什么技术推荐？
  3. 如果您编写过这些游戏，最困难的部分是什么？
注意：
我也想从第一原理开始-如果您推荐一个框架/库，我会感激其中的一些理论或实现细节。这些游戏是足够不同的，以至于我应该从每个游戏中学到一些新东西。
9个回答
11

取决于你有多少从零开始的意愿。回答您的直接问题：

1）您将如何实现这些游戏？

A：JavaScript + Canvas。Canvas是HTML5中的2D绘图表面。在桌面机器上性能非常好，在iOS和Android设备上性能不太好（截至本文发布日期）。如果移动端是您最关心的问题，您需要使用DOM和CSS3 3D变换来触发这些设备上的GPU。

2）您有任何技术建议吗？

A：这个问题有点被第一个问题回答了。JavaScript是必须的，但我会忽略jQuery。您的目标是HTML5设备，因此无需补偿旧版浏览器。由于您可能正在使用Canvas，因此也无需平滑地处理DOM交互。有一些更高级的库可以使与Canvas的交互更加容易，例如Easel.js。WebSockets用于双向流通信。Box2D对于物理引擎非常有用。Local Storage是用于诸如级别进度之类的简单键/值字符串数据，但对于任何复杂的内容，您都需要WebSQL DB。对于大型二进制资产，您需要查看文件系统API。最后，不要害怕WebGL，因为它非常快速，并且非常适用于2D游戏。

3）最难的部分是什么？

A：几乎肯定最难的部分是调试。WebKit的开发人员工具可以使此过程更加轻松，因此不要离开它们。

3
这篇文章比较旧了，所以我想更新一下。HTML5 + Canvas现在在一两年内的移动设备上运行得非常好，我有一部iPhone 4（按照今天的标准已经是老硬件了），但我的游戏在上面能够运行得还不错。当我运行在任何更新的设备上时，性能表现都非常出色。 - Unome
4
简单来说，使用Canvas可以在屏幕上移动大量物品，而SVG则用于更漂亮、更慢的矢量图形。
你应该做的第一件事是编写一个速度测试程序，以查看可以使用Canvas做些什么，然后尝试一下。
我写了一篇关于Canvas和编写HTML5游戏的博客文章。
两种链接失效的情况... 你能更新这些链接吗？它们听起来都很有趣。 - Josien
4

编辑于2019年02月：processing.js已经过时，不再得到良好的支持。相反，请尝试使用等效且最新的p5.js。

不要忘记processing.js，这是一个经过充分测试的全栈图形和交互JavaScript框架，它对大多数I/O、声音、图形甚至WebGL都有实质性（如果不是全面）的支持。如果您编写基本的Processing代码，这基本上是Java语法编译为JavaScript，则可以使用许多开源调试器，包括本地Processing环境。除此之外，您还可以集成任何其他您想要包含的JavaScript代码。

这里有一个针对JavaScript开发人员的指南，解释了您可能想知道的大部分内容。

去看一下吧，非常不错。

3
对我来说最困难的部分是没有工具可以帮助制作图形，比如没有Maya导出到画布的功能，所以一切都必须手动完成，使用基元，除非您想将位图修改为精灵。
当时，画布中没有真正支持文本，因此我的解决方案在使用excanvas时无法正常工作，但在Safari和Firefox上运行良好。
因此，您可能需要查看要支持的HTML5功能，例如内置数据库，然后决定要在哪些浏览器上工作。
如何实现这些主要取决于您想要创建图形的方式，以及是否想要进行3D图形处理，因为位图精灵将无法起作用。
3
Tom来自Scirra（构建2D游戏的工具）。我们开发了一款名为Construct 2的HTML5游戏引擎，仅导出到HTML5，没有Flash！ Construct 2使用基于事件的系统向游戏添加逻辑，并为您处理大量重复/困难的工作。例如，将多边形碰撞添加到对象中，如果没有可视化编辑器，则有时是一个困难的任务。 总之，我们认为这值得一看，你也可以从中迅速获得结果。它是制作HTML5游戏时您可能要考虑的替代方法，而不是编写整个游戏。
谢谢，虽然我提出这个问题已经有一段时间了，但我仍在断断续续地编写自己的游戏仿制品。我会去看看！ - Jeff Meatball Yang
@Jeff 没问题，请告诉我们你的进展如何。 - Tom Gullen
2

看看ChromeExperiments，这些示例源自世界各地，使用最新的开放标准，包括HTML5、Canvas、SVG和JavaScript。

2
1
当我开始学习HTML5时，我也遇到了同样的问题。最终，在进行了大量研究后，我发现最好的方法是使用一些引擎或框架。我学习了画布并制作了自己的游戏，但这需要数小时的逻辑和100多行代码。
最好选择Scirra，它可以减少你的工作量。
0

我目前正在撰写一系列的博客文章，解释如何使用EaselJS和Box2D构建一个JavaScript游戏。这是第一部分。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接