動態創建的圖像不會出現在屏幕上！ - > 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

回答

相關問題