単純なゲーム（ヘビ、チェッカー、パックマンなど）を作成したい場合、SVGまたはCanvasのどちらがより良いアプローチでしょうか？
私が興味を持っていること：
実装のしやすさ（CanvasとSVGの学習曲線）。たとえば、SVGのチュートリアルとコミュニティサポートが大幅に少ない場合、それは私にとって非常に重要です。
パフォーマンス（私にとって重要ではありませんが、それでも重要です）
また、ゲームの分野では、SVGがCanvasよりも適している特定のゲームがありますか（またはその逆ですか？）
質問する
12588 次
1 に答える
52
多くのマウス操作を必要とし、連続的なアニメーションをあまり必要としないゲーム（チェッカーやチェス、またはボードゲームなど）は、dom要素を使用するため、SVGに適しています。単純なボタンホバーを考えてみましょう。SVGでは、イベントリスナーを追加g.button:hover path {fill: blue;}したり、CSSに配置したりするだけで機能します。一方、Canvasでは、ヒット領域を追跡し、すべてをJavascriptで描画する必要があります。
SnakeとPacmanはキャンバスに適しています。キーボードですべてを制御し、キャンバスへのペイントはSVGで要素を移動するよりも安価です。キャンバス用の優れたゲームライブラリがあり、impact.jsはその1つです。
あなたのポイントに対処する：
使いやすさ：純粋なJavaScript DOM操作に精通している場合、SVGは簡単です。白紙の状態の場合は、キャンバスにペイントするだけなので、キャンバスの方が把握しやすいと思います。
コミュニティのサポート：ゲーム用のキャンバスが勝ちます。強力なSVGコミュニティがありますが、ゲームエリアにはありません。
パフォーマンス：混合。いくつかのトリックを実行しないと、canvasとSVGの両方が遅くなる可能性があります。たとえば、各フレームで画面全体を再描画すると、キャンバスで1つの正方形を左から右に移動するとぎくしゃくする可能性があります。変更した部分を塗り直すだけでスムーズになります。SVGは、このケースを問題なく処理します。ただし、一方で、一度に数千の長方形をアニメーション化する場合は、キャンバスがスムーズに処理し、長方形をグループにラップしてグループを移動しないと、SVGが停止します。
全体として、JavaScriptでゲームを探索したい場合は、おそらくCanvasの方が適しています。私はSVGで3つのゲームを実行しましたが、最新のものはhttp://color.method.acですが、キャンバスに手を出しており、ゲームに適していると思います。
于 2012-09-06T02:18:52.677 に答える