如果我想构建一个简单的游戏（蛇、西洋跳棋、吃豆人或其他），什么是更好的方法 - SVG 或 Canvas？
我感兴趣的事情：
易于实施（Canvas 与 SVG 的学习曲线）。例如，如果 SVG 的教程和社区支持对我来说至关重要。
性能（对我来说并不重要，但仍然很重要）
另外，在游戏领域，有没有比 Canvas 更适合 SVG 的特定游戏（反之亦然？）
【问题讨论】：
标签： javascript html svg html5-canvas
需要大量鼠标交互且不需要太多连续动画的游戏（例如西洋跳棋或国际象棋，或与此相关的任何棋盘游戏）更适合 SVG，因为您使用的是 dom 元素。考虑一个简单的按钮悬停，在 SVG 中，您可以添加事件侦听器，甚至只需将 g.button:hover path {fill: blue;} 放在您的 CSS 中，它就会起作用。另一方面，Canvas 需要跟踪点击区域并用 Javascript 绘制所有内容。
Snake 和 Pacman 更适合画布，您可以使用键盘控制一切，并且画到画布上比在 SVG 中移动元素更便宜。有优秀的画布游戏库，impact.js 就是其中之一。
解决你的观点：
易用性：如果您熟悉纯 javascript DOM 操作，SVG 是轻而易举的事。如果你是白板，我会说画布更容易掌握，因为你只是在上面画画。
社区支持：游戏画布胜出。有一个强大的 SVG 社区，但不是在游戏领域。
性能：好坏参半。如果您不采取一些技巧，canvas 和 SVG 都可能会很慢。例如，如果您在每一帧上重新绘制整个屏幕，则在画布中从左向右移动单个正方形可能会很不稳定。如果您只是重新绘制更改的区域，那么它是平滑的。 SVG 可以毫不费力地处理这种情况。但另一方面，如果您想一次为数千个矩形设置动画，canvas 可以流畅地处理它，如果您不将矩形包装在一个组中并移动该组，那么 SVG 就会陷入困境。
总而言之，如果您想在 javascript 中探索游戏，也许 Canvas 是一个更好的选择。我已经用 SVG 完成了三款游戏，最新的一款是 http://color.method.ac，但我涉足了画布，我认为它更适合游戏。
【讨论】：