简单游戏的画布与SVG

Canvas vs SVG for simple games

本文关键字：SVG 游戏 简单      更新时间：2023-09-26

如果我想构建一个简单的游戏（蛇、跳棋、pacman或其他什么），SVG或Canvas是更好的方法？

我感兴趣的东西：

  1. 易于实现（Canvas与SVG的学习曲线）。例如，如果SVG的教程和社区支持明显减少，这对我来说至关重要

  2. 性能（对我来说不是关键，但仍然很重要）

此外，在游戏领域，是否有SVG比Canvas更适合的特定游戏（反之亦然）

需要大量鼠标交互而不需要太多连续动画的游戏（如跳棋或国际象棋，或任何棋盘游戏）更适合SVG，因为您使用的是dom元素。考虑一个简单的按钮悬停，在SVG中，您可以添加事件侦听器，甚至只需在CSS中放置g.button:hover path {fill: blue;}，它就可以工作了。另一方面，Canvas需要跟踪命中区域，并用Javascript绘制所有内容。

Snake和Pacman更适合画布，你可以用键盘控制一切，在画布上绘画比在SVG中移动元素便宜。canvas有很多优秀的游戏库，impact.js就是其中之一。

解决您的问题：

易用性：如果您熟悉纯JavaScriptDOM操作，SVG就轻而易举了。如果你是一块空白的石板，我会说画布更容易掌握，因为你只是在上面画画

社区支持：游戏画布轻松获胜。有一个强大的SVG社区，但在游戏领域没有。

性能：好坏参半。如果你不掌握一些技巧，画布和SVG都可能很慢。例如，如果在每一帧上重新绘制整个屏幕，那么在画布上从左向右移动一个正方形可能会很不稳定。如果你只是重新绘制改变的区域，那么它是光滑的。SVG可以顺利处理这种情况。但另一方面，如果你想一次为数千个矩形设置动画，画布会平滑地处理它，如果你不将矩形包裹在一个组中并移动组，SVG就会陷入困境。

总而言之，如果你想探索javascript游戏，Canvas可能是一个更好的选择。我用SVG做了三个游戏，最近的一个是http://color.method.ac，但我涉足过画布，我认为它更适合游戏。

相关文章：