単純なゲームのためのキャンバス対SVG

Question

私は単純なゲーム（ヘビ、チェッカー、パックマンなど）を構築したければ、SVGやキャンバスの方が良いでしょうか？ （SVG対キャンバスの学習曲線）実装の

1. やすさ：

   物事は私がに興味があります。たとえば、SVGのチュートリアルやコミュニティのサポートが私にとって非常に重要でない場合（私には重要なまだ重要ではありません）

2. パフォーマンス

そしてまた、ゲーム分野では、特定のゲームはSVGキャンバスよりも、より適していることがある（またはその逆？）

Answer 1

ドム要素を操作するため、多くのマウス操作や多くの連続アニメーション（チェッカーやチェス、ボードゲームなど）を必要とするゲームはSVGに適しています。単純なボタンのホバーを考えてみましょう。SVGでイベントリスナーを追加したり、g.button:hover path {fill: blue;}をCSSに配置するだけで動作します。一方、キャンバスは、ヒット領域を追跡し、すべてをJavascriptで描画する必要があります。

スネークとパックマンはキャンバスに適していて、キーボードですべてをコントロールし、キャンバスにペイントするのはSVGの要素を動かすよりも安いです。キャンバスには優れたゲームライブラリがあり、impact.jsはそれらの1つです。使用の

やすさ：：あなたのポイントをアドレッシング

をあなたは純粋なjavascriptのDOM操作SVGに精通している場合は簡単です。あなたが空白のスレートであれば、キャンバスはちょうどそれにペイントするように把握が容易だと言うでしょう。

コミュニティサポート：ゲームキャンバスのが優勝しました。強力なSVGコミュニティがありますが、ゲームエリアにはありません。

パフォーマンス：混在。いくつかのトリックをやめないと、キャンバスとSVGの両方が遅くなることがあります。たとえば、1つの四角形を左から右に動かすことは、各フレームで画面全体を再描画すると、キャンバスでぎくしゃくすることがあります。変更された領域を再描画しただけでは滑らかです。 SVGはこの事件を問題なく処理します。一方で、数千の矩形を一度にアニメーション化したい場合は、カンバスでスムーズに処理し、グループ内でrectをラップしてグループを移動させないとSVGが駄目になります。

javascriptでゲームを探索したい場合は、おそらくCanvasが良い選択肢です。私はSVGで3試合を行いました。最新の1つはhttp://color.method.acですが、私はキャンバスを手に取ったことがあり、ゲームに適していると思います。