javascript - 如何删除 "document.write()"写入的内容

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() 函数时，图像不是连接而是替换。

所以我的问题是有没有办法覆盖文档或清除文档？

附注“document.clear()”函数似乎没有那么有用。

谢谢

Answer 1

您可以扩展您的网格数据结构并存储状态和图像元素:

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