如何清除“document.write（）”所写的内容

我目前正致力于编写用javascript编写的小游戏，很像“蛇”。其中一部分是我显示网格，并且网格需要经常更新。如何清除“document.write（）”所写的内容

而我的一个方法是使用下面的函数。

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 2011-02-01 18:23:55

你可以扩展你的grid数据结构，并同时存储状态和图像元素：

// 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); 
}

由方法：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

document.write总是加法的;你总是添加一个新的元素到文档对象（DOM）。

在这种情况下，您想要的是document.getElementById（'imgParent'）。innerHTML，其中的child（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，但不是写一个特定的文档元素。例如，先从以下文件：

<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属性，它将覆盖。

来源

2011-02-01 17:56:17 user85461

但是你怎么显示实际的图片？我知道它加载到“div id ='游戏'”中，但我不清楚如何显示加载的内容。 – Anatoli 2011-02-01 18:03:15

@Ankiov - 这将*实际上在div内创建一个``元素，就好像它在原始HTML文档中一样。浏览器将负责渲染图片，就像它遇到的任何其他``标签一样（例如您当前使用`document.write（）`-ing）的标签。 – 2011-02-01 18:06:58

如何清除“document.write（）”所写的内容

回答

相关问题