Question

我正在尝试做一些简单的事情来练习我的Javascript（我最近学到了一些东西）并且我正在尝试做一个游戏（准确地说是pacman）。

我试图通过动态创建图像在浏览器上构建游戏板。我做了这样的数组：

var images= new Array(25);

for(i=0;i<25;i++)
    images[i]= new Array(25);

并且，对于游戏板，我使用了一个矩阵，其中0和1的大小为25x25（不会在这里发布，因为它太大而且会使我的文本难以阅读）称为棋盘。

对于我现在使用的图像，我有类似的东西：

var image_empty = new Image(); 
image_empty.src="Images/empty.jpg";     
var image_wall = new Image();
image_wall.src="Images/wall.jpg";

对于初始化函数，我有类似的东西：

function drawField()
{
    for(i=0;i<board.length;i++)
    {
        for(j=0;j<board[i].length;j++)
        {
            if(board[i][j] == 0)
                draw(i,j,image_empty);
            else if(board[i][j] == 1)
                draw(i,j,image_wall);
        }
    }
}

为了自己绘制图像，我正在使用它：

function draw(x,y,img)
{
    images[x][y] = new Image(22,22);
    images[x][y].src = img.src;
    images[x][y].style.position = 'absolute';
    images[x][y].style.left = 40+x*22;
    images[x][y].style.top = 40+y*22;
}

每次运行此代码时，屏幕上都不会显示任何内容。我已经尝试了几次使用大量的东西，但没有任何反应。我正在保存图片（至少我认为我是），但仍然没有。

有人可以给我一些可能出错的指示吗？

PS：有些人指出我使用appendChild方法会解决问题，因为pacman会四处移动我不能用它来存储我的图像（我打算用draw函数绘制任何东西））。

btw和Web Developer插件或firebug指出错误（从他们的角度来看代码是正确的）。

Answer 1

在您描述的方法中创建图像实际上并不显示图像。即使放置属性和样式以使其以某种方式显示也不会将其添加到DOM。关于追加孩子的建议是正确的。例如，如果你有：

<div id="main"></div>

你打电话给

document.getElementById("main").appendChild(images[x][y]);

这会将图像插入div中。您可以重复执行此操作以生成等效的...

<div id="main">
   <img src... />
   <img src... />
   ...and so on
</div>

然后，您的CSS样式和定位将起作用。

您的脚本没有任何问题，但Firebug确实显示了DOM的渲染版本。在运行脚本时，您实际上会看到Firebug的HTML选项卡随着您添加到页面中的图像而变化。

另外，请记住，DOM必须先完成加载才能运行它。你可以通过简单的方法来实现这个目标：

<body onload="drawImages()">

更新：一旦你实际添加了25x25图像，数组仍然引用元素 - 它们现在只是DOM的一部分。因此，您可以通过以下方式更改其来源：

images[x][y].src = "newImage.jpg";

如果您出于某种原因想要从电路板上移除图像，留下间隙，则可以将其从DOM中删除

document.getElementById("main").removeChild(images[x][y]);

或者只是通过CSS隐藏它。

动态创建的图像不会出现在屏幕上！ - ＆GT;使用Javascript

1 个答案: