构建简单网络游戏的技术？ [关闭]答案

【问题标题】：Technologies for building simple web-based games? [closed]构建简单网络游戏的技术？ [关闭]
【发布时间】：2011-11-03 01:23:00
【问题描述】：

我想制作一些可以在您的浏览器中玩的非常简单的棋盘游戏。 AFAIK，实际上只有两种技术能够做到这一点：HTML5 Canvas 和 Flash。我认为 Flash 即将淘汰，所以我认为我应该开始学习如何使用画布。

我的问题：

我还应该考虑其他竞争技术吗？
如果画布是要走的路，我可以从哪里开始？我已经了解 HTML、JavaScript 和 jQuery。我最感兴趣的是学习如何绘制基本形状并检测这些形状上的点击事件。

我并不太担心支持旧浏览器。显然，我希望吸引尽可能多的受众，但是...您[应该]在工作中访问的那种网站，因此公司政策不适用。

【问题讨论】：

【解决方案1】：

1. 你说得对，就高性能 浏览器游戏而言，Canvas 和 Flash 是您唯一真正的选择。嗯，Java 小程序在技术上也是一种可能性。

SVG 对于游戏来说是一个非常糟糕的选择。一切都是 DOM 对象，这会带来大量无法优化的开销。

Canvas 可能是所有好选择中最具前瞻性的。 Flash 在移动设备上不是很好，而且 iOS 拒绝使用它，如果你走这条路，你会得到一个更小的市场。

2.我为此写了一些教程，making selectable, movable shapes on a Canvas。我可能应该很快给他们重写。

否则，这真的取决于。如果您有特定问题，那么搜索 StackOverflow 非常棒，而且您永远不要害怕提出问题。与游戏和性能相关的问题是最有趣的问题，因为有时解决方案非常不直观。

【讨论】：

你的暗示 Canvas 比 SVG/DOM 更快。那简直是错误的。与手动优化的 DOM 和 CSS 相比，没有什么比性能更好
这根本不是真的。与 Canvas 相比，SVG/DOM 元素慢得不可思议，尤其是当屏幕上有 1,000 - 100,000 个动态元素时。与 Canvas 相比，即使仅加载 1,000 个任何类型的 DOM 元素在速度上也是可悲的。另见：stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div/…
“非常简单的棋盘游戏”“1000 - 100,000 个动态元素”。对于非常简单的棋盘游戏，DOM 会更快，对于复杂的系统，画布会更快。
网络上有许多文章详细介绍了其他人的基准测试（本评论末尾的一个示例，其中包含来自他的 rnu 的源代码和图表）。大部分问题是游戏需要大量移动对象，其中许多不需要自己的 dom-cruft（不需要参与文档布局，不需要事件处理程序等），但他们得到无论如何，所有这些额外的东西。 joeloughton.com/blog/web-applications/svg-vs-canvas-performance
我想我同意西蒙的观点。我认为这些设计/显示元素中的大多数不应该 甚至在 DOM 中。我想当时的权衡是我必须自己处理事件，而使用 SVG，大概我可以将点击事件附加到我感兴趣的元素上？听起来我需要的是画布+处理事件之上的库。

【解决方案2】：

一两年前，为了自学 jQuery，我用简单的 HTML、CSS 和 jQuery 编写了记忆游戏（您可以在其中翻转图块并找到匹配项）。我认为您甚至无需在画布上书写即可实现各种棋盘游戏。

【讨论】：

我认为我必须使用图像来获得漂亮的抗锯齿形状，而且我必须使用绝对定位来让碎片在整个板上滑动......我只是不确定这是最干净或最简单的方法。
我很震惊，可以轻松地优雅地实现记忆游戏（几十行 jQuery-juiced Javascript）。 “棋盘游戏”当然涵盖了很多领域，但是您可以使用 jQuery 做很多事情。我的记忆游戏，虽然演示文稿是 4 x 4 网格图像，但既不使用绝对定位也不使用表格。
当然，但是您可能没有卡片翻转，或从板上滑落或任何东西？我不需要那些可爱的动画来开始，但是当我开始做最后的润色时我想要那个选项。
我确实让它们淡入淡出，当找到匹配项时，淡入到 50% 并保持显示状态。其他动画只是使用 jQuery 来获得不同的效果（有很多 jQuery 示例围绕照片分类器，看起来就像单人纸牌游戏）。我还有一个滑块来控制游戏的速度（当你翻过其中两个图像时，图像保持可见的时间）。正如我所说，这对我来说是一个学习项目，所以我没有尽我所能。

【解决方案3】：

不确定您是否需要 canvas 来完成您所说的工作，但您可能想了解许多用于 HTML5/JS/Canvas 的游戏引擎。这是一个很好的起点：https://github.com/bebraw/jswiki/wiki/Game-Engines

【讨论】：

当然，我可以使用 HTML 表格和/或图像构建跳棋，并使用 jQuery 来滑动一些片段……但我想要一些可以随着我的游戏变得更复杂而扩展的灵活性。我不想在中途切换技术，因为我选择了一些太有限或太难使用的东西。也不是真的在寻找一个成熟的游戏库，但我会在这些方面达到顶峰。我只想能够做一些基本的图形。我还要学习如何做沟通方面的工作！

【解决方案4】：

Canvas 很好，但您也应该考虑使用 SVG，可能与同样具有良好浏览器支持的 Raphael 库一起使用。如果你打算做多人游戏，你也应该在 WebSockets 和Socket.io 库中进行调查。

【讨论】：

我提出了一个单独的问题来讨论游戏之间的交流:) stackoverflow.com/questions/7989344/…
我对 Raphael 的问题是，当我短暂尝试时，我无法让它内联工作。坐标系似乎是相对于窗口的，而不是相对于画布的。我不需要在整个屏幕上绘制，只需在一个小画布内 :)