帆布VS SVG的简单游戏 [英] Canvas vs SVG for simple games

问题描述

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

感兴趣的：

1. 易于实现（Canvas vs SVG的学习曲线）。例如，如果SVG的教程和社区支持少得多，对我来说非常重要。

li>

此外，在游戏领域，SVG比Canvas更适合哪些特定游戏（反之亦然？）

解决方案

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

Snake和Pacman会更适合画布，您可以用键盘和绘画到画布上比在SVG中移动元素要便宜。有很好的画布游戏库， impact.js 就是其中之一。

解决您的观点：

易用性：如果您熟悉纯javascript DOM操作，SVG是一件轻而易举的事情。如果你是空白板，我会说画布更容易掌握，因为你只需要画就可以了。

社区支持：适用于游戏画布赢得双手。有一个强大的SVG社区，但不在游戏领域。

表现：混合。如果你不拉扯一些技巧，canvas和SVG都会变慢。例如，如果您重新绘制每个框架上的整个屏幕，则从左到右移动一个正方形可能会在画布上变得不平。如果你只是重画改变的区域，那么它很平滑。 SVG将顺利处理这个案例。但另一方面，如果您想一次动画数以千计的矩形，canvas会平滑处理，而且如果您不将组合中的矩形包围并移动组，则SVG会陷入沉寂。

总而言之，如果你想在javascript中探索游戏，Canvas是一个更好的选择。我在SVG中完成了三场比赛，最近一场比赛是 http://color.method.ac ，但我已经涉足了画布，我认为它更适合游戏。

If I wanted to build a simple game (snake, checkers, pacman or whatever) what would be the better approach - SVG or Canvas ?

Things I'm interested in:

1. Ease of implementation (learning curve of Canvas vs SVG) . For example if SVG has significantly less tutorials and community support that's crucial to me.

2. Performance (not critical to me but still important)

And also , in the gaming field , are there specific games that SVG is more suited for than Canvas (or vice versa?)

解决方案

Games that require a lot of mouse interaction and not much continuous animation (such as checkers or chess, or any board game for that matter) are better suited for SVG because you work with dom elements. Consider a simple button hover, in SVG you can add event listeners or even just place g.button:hover path {fill: blue;} in your CSS and it will work. Canvas, on the other hand, requires keeping track of the hit area and drawing everything in Javascript.

Snake and Pacman would be better suited for canvas, you control everything with your keyboard and painting to canvas is less expensive than moving elements around in SVG. There are excellent gaming libraries for canvas, impact.js is one of them.

Addressing your points:

Ease of use: if you are familiar with pure javascript DOM manipulation SVG is a breeze. If you are blank slate I'd say canvas is easier to grasp, as you just paint on it.

Community support: for gaming canvas wins hands down. There is a strong SVG community but not in the gaming area.

Performance: Mixed. Both canvas and SVG can be slow if you don't pull off a couple of tricks. For example, moving a single square from left to right can be jerky in canvas if you repaint the entire screen on each frame. If you just repaint the area that changed then it's smooth. SVG would handle this case without a hitch. But on the other hand, if you want to animate thousands of rectangles at once, canvas handles it smoothly and SVG bogs down if you don't wrap the rects in a group and move the group around.

All in all, if you want to explore gaming in javascript perhaps Canvas is a better option. I've done three games in SVG, the latest one being http://color.method.ac, but I've dabbled in canvas and I think it's better suited for gaming.

这篇关于帆布VS SVG的简单游戏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！