"document.write（）"によって書かれたものを消す方法

私は現在、javascriptで書かれた "snake"のような小さなゲームの作成に取り組んでいます。グリッドを表示し、そのグリッドを頻繁に更新する必要があることがその一部です。"document.write（）"によって書かれたものを消す方法

私がそれを行う1つの方法は、以下の機能を使用することです。

function loadImages(){ 

    for(var i = 0;i<HEIGHT;i++){ 
     for(var j = 0;j<WIDTH;j++){ 
      if(grid[i][j] == -1){ 
       document.write('<IMG SRC="wall.png" width="30">'); 
      } 
      else if(grid[i][j] == 0){ 
       document.write('<IMG SRC="empty.png" width="30">'); 
      } 
     } 
    } 

    setTimeout(loadImages(), 50); 
}

loadImages（）関数が繰り返し呼び出されると、イメージは連結されず、置き換えられます。

私の質問は、ドキュメントを上書きする方法があるか、またはクリアされているということですか？

P.S. "document.clear（）"関数はそれほど役に立ちません。

ありがとうございました

出典

2011-02-01 Anatoli

のjQueryを使用します。ゲームの場合、HTML5のキャンバス要素を見てください。 – ThiefMaster

：

// initialization 
for(var i = 0;i<HEIGHT;i++) { 
    for(var j = 0;j<WIDTH;j++){ 
     grid[i][j] = { 
      state: grid[i][j], 
      image: new Image() // creates HTMLImageElement object 
     }; 
     // set width 
     grid[i][j].image.setAttribute("width", "30"); 
     // append HTMLImageElement to BODY element 
     document.body.appendChild(grid[i][j].image); 
    } 
}

その後、同様の方法でloadImages内の画像を変更することができますすることで

function loadImages() { 
    for(var i = 0;i<HEIGHT;i++){ 
     for(var j = 0;j<WIDTH;j++){ 
      if(grid[i][j].state == -1){ 
       grid[i][j].image.src = "wall.png"; 
      } 
      else if(grid[i][j].state == 0){ 
       grid[i][j].image.src = "empty.png"; 
      } 
     } 
    } 
    setTimeout(loadImages, 50); 
}

をway：setTimeout(loadImages(), 50)はすぐにloadImagesを呼び出しますが、代わりに関数を渡す必要があります。したがって、setTimeout(loadImages, 50)。

あなたは一時変数にgrid[i][j]を格納することによって、このごloadImages機能を最適化し、唯一の状態が変更された場合、画像ソースを変更することができます。

var cell = grid[i][j]; 
switch (cell.state) { 
case -1: 
    if (cell.image.src !== "wall.png") { 
     cell.image.src = "wall.png"; 
    } 
    break; 
case 0: 
    if (cell.image.src !== "empty.png") { 
     cell.image.src = "empty.png"; 
    } 
    break; 
}

出典

2011-02-01 18:03:15 Gumbo

私はこのアプローチが本当に好きですが、 "image（）"オブジェクトで画像を表示するにはどうすればいいですか？私はjsでとてもうれしいです。 – Anatoli

@Ankiov Spetsnaz：このソリューションはDOM操作を使用しています。この場合、 'new Image（）'は新しい* HTMLImageElement *オブジェクト（コードでは ''と同じです）を作成し、その画像のソースをそのHTMLImageElement *オブジェクトの 'src'プロパティで変更することができます。この場合、 'loadImages'関数の最初の呼び出しは、最初にイメージの' src'プロパティを設定します。おそらく、 'src'の割り当てが必要であるかどうか（すなわち、最初と状態が変わったときだけ）にテストを追加するべきでしょう。 – Gumbo

hm ...私はまだ空白のページを見ているし、私はすべてが正しいと思う...これを文書にどのように表示するのですか？また、私はdocument.body.appendChildが私のために働いているとは思わない... – Anatoli

document.writeは常に付加的です。ドキュメントオブジェクト（DOM）に常に新しい要素を追加しています。

この場合、必要なのはdocument.getElementById（ 'imgParent'）。innerHTMLで、子（ren）イメージはIDを持つ要素内にあります。

document.getElementById('imgParent').innerHTML = '<IMG SRC="wall.png" width="30">';

本当に、しかし、jQueryのようなライブラリーを考慮してください。

http://api.jquery.com/html/

出典

2011-02-01 17:53:55

最も簡単なものはdocument.writeを使用しないように、代わりに特定の文書要素に書き込むことであろう。、代わりに「のdocument.write」のその後

<html> 
    <head>...</head> 
    <body><div id='game'></div></body> 
</html>

の操作を行います。たとえば、次の文書で始まる

var game = document.getElementById('game'); 
game.innerHTML = '<IMG SRC="wall.png" width="30">';

はあなたが頻繁にgame.innerHTMLプロパティを設定することができ、それが上書きされます。あなたのgridデータ構造を拡張し、状態や画像要素の両方を格納することができ

出典

2011-02-01 17:56:17 user85461

しかし実際の写真をどのように表示しますか？私はそれが "div id = 'game'"にロードされることを理解していますが、ロードされているものを表示する方法は不明です。 – Anatoli

@Ankiov - これは、元のHTMLドキュメントの中にあるかのように、* div内に*実際に* 要素を作成します。ブラウザは、他の ''タグ（現在は 'document.write（）'）のように、画像のレンダリングを行います。 –

"document.write（）"によって書かれたものを消す方法

答えて

関連する問題