javascript - チェス盤の Canvas と DOM

Question

HTML 5 のチェス ゲームを作成しています。サーバー側はsocket.io/node.js/backbone.jsです。

今、ゲーム ボードのビューを書き始めています。キャンバスまたは DOM 要素 (別名 div) でチェス盤を表現する方が簡単でしょうか? ブラウザの互換性を無視します。

Answer 1

本当にあなたの動機に帰着します。

ゲーム開発に精通しており、衝突検出などの目的で画面をセグメントに分割することに慣れていて、キャンバス上のプレイヤーの場所に基づいて、正方形/ユニットごとに独自のカスタム クリック イベントを簡単に作成できる場合クリックしてから、キャンバスを使用してください。高度なアニメーションやグラフィック インタラクションへの扉がさらに開かれます。

それに慣れておらず、どのマスがクリックされたかを簡単に知る方法が必要で、着地したマスにユニットがあったかどうかを把握する必要なしに明確に知る方法が必要な場合ゲームウィンドウ内でクリックした X と Y に基づいて、DOM を使用します。実際には、これらはメリットであり、他のほとんどすべては、どちらかを選択することの副作用です。

アニメーションと「ポリッシュ」用の Canvas、イベント リスナー用の DOM、およびクリックされた四角形の配列ベース (または属性ベース) の通知。

Answer 2

あなたがやろうとしていることについては、DOMが最良の選択肢だと思います。Canvasに欠点があるからではなく、実行する必要のある作業の量と、ボードの外観を簡単に変更できるかどうかに基づいています。

sを使用divして絶対に配置し、cssスタイルを追加して特定の正方形のピースを表示/非表示にし、その後、背景のない大きなキャンバスを作成して、DOMベースのチェス盤の上に特殊効果を描画することもできます。

したがって、全体として、DOMはあなたのために行く方法でなければなりません。

Answer 3

それはあなたの目標に依存します。

ピースのアイコンを画像としてレンダリングすることでゲームの状態を視覚化することが主な目的である場合は、ボードの場所にDOM（テーブルやdivなど）を使用するのがおそらく最も簡単です。

高度なグラフィックに興味がある場合は、キャンバスの方が適している可能性があります。

Answer 4

私はごく最近それらの 1 つを開発し、グラフィカル インターフェイスに HTML5 Canvas を使用しました。ボードを引いたり、駒を動かしたりするのに非常に強力でした。