背景：私は広範な開発の背景を持っていますが、ゲームをコーディングしたのは何年も前です。私のJavascriptスキルは非常に限られており、テトリス、パックマン、またはその複雑さレベルの単純なゲームを構築することにより、それらを改善するつもりです。
質問：私がしなければならない基本的な選択は、<canvas>要素にレンダリングするかどうかです。
キャンバスには、ポイント、ライン、さらに複雑なものをレンダリングするための基本的なツールがあります。おそらく、これを支援するためのさまざまなフレームワークがあります。
キャンバスがなければ、オブジェクトをDOMツリーに保持できます。通常のWebページのように、非常に複雑で、多くの要素が重複しています。
1つのアプローチは他のアプローチよりも優れていますか？それらは相互に排他的ですか？どれを選ぶべきかをどうやって知るのですか？
回答:
CanvasとDOMは相互に排他的ではありませんが、かなり分離されています。良い方法の1つは、Canvasを使用してメインゲームエリア（テトリスの落下部分など）をレンダリングし、キャンバス要素に重なっているDOM要素ですべてのUI（スコア表示など）を実行することです。
そうは言っても、そのようなアプローチはテトリスのような原始的なゲームには本当に必要ではありません。Canvasは、より高度なグラフィック効果に役立ちますが、それらが不要な場合は、DOMに固執することで互換性が広がります。すべてのブラウザがHTML5 Canvasをサポートしているわけではありません。
DOMについてDOM
は旧式の2Dで非常にうまく機能します。つまり、画像の回転やスケーリングを使用しません。実際には、これらの両方のジョブ用のツールがありますが、それらのパフォーマンスが期待できるものではありません。
ゲームでは、ブラウザレイアウトエンジンにできるだけ依存しないようにする必要position:absoluteがあります。つまり、オブジェクトの配置に使用する必要があります。非常に可変数のオブジェクトが必要な場合は、アイドル状態のDOM要素のプールをに設定しdisplay:none、必要に応じて復活できるように、DOMオブジェクトを常に作成および破棄しないようにしてください。
DOMとキャンバス
IE8の市場シェアでは、縮小するキャンバスがますます魅力的なオプションになりつつあり、ほとんどのゲームではおそらく素晴らしい選択です。ただし、一部のジョブではDOMが使いやすいツールであり、必要に応じてドキュメントフローを使用したり、レンダリングされたオブジェクトで直接クリックをキャッチしたり、スクロールバーを簡単に統合したりできます。
パフォーマンスの違いをカバーするのは難しく、ジョブに依存し、ブラウザごとに大きく異なります。
position:absolute、それは良い点だ。
キャンバスはそれらの「ほとんど」に適合しますが、ゲームのタイプに完全に依存します。
DOM管理は特定の時点で恐ろしくなり、要素が多くなるほど遅くなり、非常に遅く動く要素が増えます。
IMG要素を使用したアセットの読み込み順序の管理は...簡単ではありません（イメージタグの意図的に破損したプロトコルのインターセプトエラー：D）。
ただし、ほとんど静止画像で効果数が少ないゲームの場合は、DOMを使用します。それ以外の場合、キャンバスが最初の選択肢です（ヒットマップは別の話ですが、ポイントとクリックなど）。
Canvasは最近（iPhoneでも）非常に高速であるため、使用しない理由はほとんどありません。
HTML5ゲームを作成している場合、キャンバスははるかに優れています。その理由は次のとおりです。
欠点-アニメーション-アニメーション用の優れたライブラリは数多くありますが、CSS3アニメーションが大好きです。作成、操作、トリガーがとても簡単です。CSS3アニメーションをキャンバスのオブジェクトで動作させるためのさまざまなハックがありますが、ほとんどの人はその方法を使用したくないと思います。
あなたのゲームで頑張ってください、そしてあなたの作品を見てみたいです！
モバイルブラウザー、特にAndroidをターゲットにすることを検討しており、ゲームに動くグラフィックが含まれている場合は、DOMアニメーションを避けてください。Androidのストックブラウザは、ウェブキットであるにもかかわらず役に立たない。開始する前に、このAndroidの発行スレッドをチェックしてください：「ブラウザーおよびWebViewでのCSS3およびJavascriptアニメーションのひどいレンダリング」。。
Canvas自体は高速ではないかもしれませんが、CocoonJSなどのキャンバスアニメーションのハードウェアアクセラレーションを呼び出すフレームワークがあります。サイトにはビデオへのリンクがあり、フレームワークを使用して達成できるパフォーマンスの向上を示しています（ただし、何らかの理由で2つ以上のリンクを投稿することはできません）。
DOMの略を思い出してください ドキュメントのオブジェクトモデルの。非常にまれな状況でのみゲームを作成するために使用し、ほとんどの場合キャンバスを好むでしょう。
ゲームのグラフィック要件が小さい場合でも、DOMで実行するとパフォーマンスが低下します。Tetris以外のものはおそらく十分に動作しません。
実世界の例があります。ConwayのGame of Lifeの実装を作成したとき、500x500のテーブルから始めて、セルの背景色を変更しました。このバージョンでは、グライダーは30 fpsを超えて実行されていませんでした。大きなパターンは1を超えることはほとんどありませんでした。このゲームの私のキャンバスバージョンでは、 〜30 fps。
また、これはSVG（Scalable Vector Graphics）にも当てはまりますが、実際には試したことはありません。
編集：私の例はあまり良くないことを認めなければなりません（なぜならテーブル=悪いからです）。しかし、要点は依然として真実です。DOM操作はドキュメント用です。ブラウザは、要素を操作するときにCSSを検索し、より多くのメモリを割り当てる必要があります。キャンバスよりも高速であることは、実際には意味がありません。