Canvas vs SVG用于简单游戏

Question

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

我感兴趣的事情:

1. 易于实施(Canvas与SVG的学习曲线).例如,如果SVG的教程和社区支持显着减少对我来说至关重要.

2. 表现(对我来说并不重要,但仍然很重要)

而且,在游戏领域,是否存在SVG比Canvas更适合的特定游戏(反之亦然？)

Answer 1

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

Snake和Pacman更适合画布,你可以使用键盘控制所有内容,而绘画到画布比在SVG中移动元素要便宜.有很好的画布游戏库,impact.js就是其中之一.

解决你的观点:

易用性:如果您熟悉纯javascript DOM操作SVG是轻而易举的.如果你是空白的板岩,我会说帆布更容易掌握,就像你在它上面画画一样.

社区支持:对于游戏画布获胜.有一个强大的SVG社区,但没有在游戏领域.

表现:混合.如果你不做几个技巧,画布和SVG都会很慢.例如,如果在每个帧上重新绘制整个屏幕,则在画布中从左向右移动单个正方形可能会生涩.如果您只是重新绘制了更改的区域,那么它就会很平滑.SVG会毫不费力地处理这个案子.但另一方面,如果你想同时为数千个矩形制作动画,那么画布会顺利处理它,如果你没有将rects包装在一个组中并且移动该组,SVG会陷入困境.

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