Question

我目前正在编写用javascript编写的小游戏，很像“蛇”。部分原因是我显示网格，网格需要经常更新。

我这样做的一种方法是使用以下功能。

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（）”函数似乎并没有那么有用。

谢谢

Answer 1

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/

Answer 2

最简单的方法是不使用document.write，而是写入特定的文档元素。例如，从以下文档开始：

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

然后执行：

而不是“document.write”

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

您可以经常设置game.innerHTML属性，它将覆盖。

Answer 3

您可以扩展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)。

您可以通过将loadImages存储在临时变量中来优化此grid[i][j]函数，并且只有在状态发生变化时才更改图像的来源：

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

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

3 个答案: