繪製到畫布時控制檯錯誤

Question

我有一個主要的JavaScript文件試圖爲遊戲繪製一個地圖到畫布，我有一個包含的文件實際上繪製地圖等，但即時通訊在螢火蟲中得到這個錯誤：

TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement. [Break On This Error]

ctx.drawImage(mapTiles[map[x][y]],x*tilesize, y*tilesize); 

這就要求我level.js文件的主要JS是這樣的：

$(document).ready(function(){ 

var canvas = document.getElementById("TBG"); 
var context = canvas.getContext("2d"); 

var ui = new Gui(); 
var level = new Level(); 

//----------Login/Register Gui -------------- 
$('#TBG').hide(); 
$('#load-new').hide(); 
$('#reg').hide(); 
$('#login').hide(); 

//if login_but is clicked do ui.login function 
$('#login_but').click(ui.login); 
//if reg_but is clicked do ui.register function 
$('#reg_but').click(ui.register); 

$('#new_but').click(function(){ 
    game_settings("new"); 
}); 

$('#load_but').click(function(){ 
    game_settings("load"); 
}); 

//if login_sumbit button is clicked do ui.login_ajax function 
$("#login_submit").click(ui.login_ajax); 

$("#reg_submit").click(ui.register_ajax); 

$("#welcome").on("click", "#logout_but", ui.logout); 

//____________________________________________ 
//Initialisation of game 

function game_settings(state){ 
    if(state == "load"){ 
     ui.load_game(); 
     //do ajax call to load user last save 
     //level.level_init(0,1); 

     draw(); 
    } 
    else{ 
     //set beginning params 


     //Change screens 
     ui.new_game(); 
     alert("new game"); 
    } 
} 

function draw() { 

    context.clearRect(0,0,canvas.width,canvas.height); 

    level.draw(context); 

    setTimeout(draw, 30); 


} 
// End Loop 
     }); 

並在這行代碼（level.js）看起來像這樣的文件：

function Level(){ 

var tilesize = 32; 
var map = 0; 
var mapTiles = []; 

    // var saved_level = level; 
    //var saved_location = location; 


map = [ 
    [1,1,1,1,1,1,1,1,1,1], 
    [2,2,2,2,2,2,2,2,2,2] 
]; 

    for (x = 1; x <= 256; x++) { 
     var imageObj = new Image(); // new instance for each image 
     imageObj.src = "images/prototype/"+x+".jpg"; 
     mapTiles.push(imageObj); 
    } 


this.draw = function(ctx) { 
for (var x = 0; x <= 31; x++){ 
     for (var y = 0; y <= 31; y++){ 
      ctx.drawImage(mapTiles[map[x][y]],x*tilesize, y*tilesize); 

    } 
} 
}; 

} 

有沒有人遇到過這個錯誤？

以及如何將我糾正問題，感謝湯姆

Answer 1

忘掉畫布和其他一切，並期待在map陣列和使用它的代碼。讓我們撕裂了畫布代碼並檢查數組訪問一些console.log()電話：

map = [ 
    [1,1,1,1,1,1,1,1,1,1], 
    [2,2,2,2,2,2,2,2,2,2] 
]; 

console.log(map.length); 
console.log(map[0].length); 

for (var x = 0; x <= 31; x++){ 
    for (var y = 0; y <= 31; y++){ 
     console.log(x, y, map[x], map[x] && map[x][y]); 
    } 
} 

你看這個問題？您可以通過考慮調用哪些console.log()打印件來發現它。如果沒有，請將該代碼粘貼到Chrome開發者控制檯並查看其功能。 （順便說一句，當最後一個參數具有map[x] && map[x][y]，這是基本相同map[x][y]，但它保護的代碼崩潰時map[x]是undefined你會看到發生在日誌中。）

既然我們現在map[x][y]是undefined一些的時間，回到drawImage()調用，以此爲形象的說法：

mapTiles[ map[x][y] ] 

當map[x][y]爲undefined，究竟會是表達評估爲？