gpt4 book ai didi

javascript - 动态创建的图像不会出现在屏幕上! -> JavaScript

转载 作者:行者123 更新时间:2023-11-28 21:23:55 25 4
gpt4 key购买 nike

我正在尝试做一些简单的事情来练习我的 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函数来绘制任何东西) )。

顺便说一句,Web Developer 插件或 firebug 都不会指出错误(从他们的 Angular 来看,代码是正确的)。

最佳答案

用您描述的方法创建图像实际上并不显示图像。即使添加属性和样式以使其以某种方式显示也不会将其添加到 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 隐藏它。

关于javascript - 动态创建的图像不会出现在屏幕上! -> JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5525205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com