动态创建的图像不会出现在屏幕上！ - > Javascript

我试图做一些简单的练习我的Javascript（我最近学到了一些），我正在尝试做一个游戏（准确地说是pacman）。动态创建的图像不会出现在屏幕上！ - > Javascript

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

var images= new Array(25); 

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

而且，对于游戏板我用0和1的有25×25尺寸做了矩阵（不打算将它张贴在这里的原因是过大，就会使我的文字难以阅读）称为董事会。

对于我使用的是现在我有这样的事的图片：

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

每次我运行此代码时，s上没有任何内容出现creen。我尝试过多次使用一些东西，但没有任何反应。我正在保存图片（至少我认为我是），但仍然没有。

有人可以给我一些什么可能是错的指针？ PS：有人指出我使用appendChild方法可以解决问题，因为pacman会移动，我不能用它来存储我的图像（我打算使用draw函数绘制任何东西）。

顺便说一句，也没有Web开发插件或萤火虫指出错误（代码从他们的角度来看是正确的）。

来源

2011-04-02 John

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

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

，你叫

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

这将插入格内的图像。你可以重复这样做来生成相当于...

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

然后，你的CSS样式和定位将工作。

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

另外，请记住，DOM必须先完成加载，然后才能运行此操作。你可以做一个简单的做到这一点：

<body onload="drawImages()">

UPDATE：一旦你实际上添加了25×25的图像，阵列仍引用元素 - 他们现在只是DOM的一部分。

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

如果由于某种原因，希望从董事会中删除图像，留下一个缺口，可以从DOM

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

删除：那么，你可以通过改变其源或者只是通过CSS隐藏它。

来源

2011-04-02 19:10:37 jbrookover

如果我在移动pacman时使用该函数绘制图形，那么移动时不会留下“pacmans”？有一种方法可以在使用appendChild时从屏幕上删除“较旧”的pacmans吗？ – John 2011-04-02 19:14:03

Hummm我想我现在已经掌握了它背后的概念。非常感谢！ – John 2011-04-02 19:20:46

我更新了帖子，展示了如何即时更新图像。你对它们有很大的灵活性 - 唯一的缺点是你在一些陌生的无人区域创建了这些对象，并且需要将它们添加到DOM中，以便浏览器实际渲染它们。另一方面，人们始终创建Image（）对象，但从不将它们添加到DOM中，以尝试对实际文件进行预加载。 – jbrookover 2011-04-02 19:36:04

动态创建的图像不会出现在屏幕上！ - > Javascript

回答

相关问题