2011-08-27 31 views
0

私は、オブジェクトとAJAXの練習としてJavascriptゲームをプログラミングしています。それは航海をテーマにしたグリッドの周りの船舶の動きを伴う。 wesselsはオブジェクトの配列内にありますが、私はそれらのスプライトのグラフィック表現を操作する必要があります。現時点では、DOMの観点から、 'td'要素内の 'img'要素を使用することを選択しました。 UIの連続性の観点から、要素をプログラムでJavascriptで移動する方法をお勧めします。
(a) 'from'セル(td要素)の内部htmlを削除し、 'to'セルの内部htmlを書き換え、
b)imgノード(スプライト)を複製し、元のノードをその親から削除し、それを 'to'セルに追加するか、または
(c)スプライトのテーブル要素に相対的な位置付けを使用し、tdのalltogetherその背景[色]は海の深さを表す)。DOM要素を移動するメソッド

答えて

0

テーブルへの相対的な配置を使用するのではなく、セルからセルへスプライトを移動することに確かに固執します。私の推論では、表のセルのサイズはブラウザによって異なります(パディングやマージンなどの違いがあり、特に迷惑なIEの場合など)。スプライトを整列させるためにスプライトの位置を正確に計算する所与のセルが複雑になる可能性がある。

オプションでは、(a)または(b)に絞り込みます。ここでは、オプション(a)を削除しましょう。内部からHTMLを削除するのは、DOMを操作するきれいな方法ではないからです。私はオブジェクトにノードを格納し、それを 'to'セルに追加して、オプション(b)が示唆している元のノードを削除するというのが好きです。このようにして、あなたはまだ高レベルの 'オブジェクト'を扱い、低レベルの 'テキスト'は不必要に扱っていません。テキストを混乱させる必要はありません。そのようなアプリケーションの場合、JavaScriptが既に提供しているDOM操作関数について知らなかったら、それはやっかいな方法です。

私の答えは(b)です。しかし、あなたが絶対にスピードを必要とする場合 - あなたのゲームのために私はあなたが本当に余分なブーストを必要とするかわからない - オプション(a)を検討することができます。 http://www.quirksmode.org/dom/innerhtml.htmlのようないくつかのソースは、DOM操作方法が一般的にinnerHTMLを使用するよりも遅いと主張しています。しかし、それはすべてのことで一般的なルールです。レベルを下げるほど、コードを素早く作成できます。レベルが高いほど、コードの理解と概念化が容易で、私の意見では、スピードはこのケースでは大きな違いにはならないので、きちんとしたままにして(b)にしてください。

0

imgノードを複製し、古いノードを削除して複製を追加する必要はありません。受信側のtdにimgノードを追加するだけです。それは以前にあったものから自動的に削除されます。シンプルで効果的かつ高速です。