影像未儲存HTML5 2D畫布

Question

圖片：http://oi43.tinypic.com/qzou2r.jpg

我正在學習如何編寫一個簡單的2D瓦的發動機，和我學習的最佳方法之一是試圖使相同的程序，但在不同的方式，然後修補它。任何人，我按照這個教程：http://that-guy.net/articles/2/Javascript-tile-engine-map-with-images/和我的代碼不起作用，它說該文件是未識別的或什麼，並填寫錯誤的畫布。他的第一個教程（之前的教程）我可以用我設置我的應用程序的方式工作，但由於某種原因，這種方式不起作用。我知道問題是什麼，但不知如何解決，我想知道你們是否可以提供幫助。發表評論我認爲是部分問題：* * *

var engine = { 
outhnd: document.getElementById('output'), 
canvas: document.getElementById('canvas'), 
handle: this.canvas.getContext('2d'), 
width: this.canvas.width, 
height: this.canvas.height, 
tilesX: this.canvas.width/16, 
tilesY: this.canvas.height/16, 
images: 0, // *** I think this is what is causing the problem with the TILESTORE. 

output: function (message) { 
    engine.outhnd.innerHTML += '<br />' + message; 
}, 
start: function (mapData, x, y) { 
    engine.handle.translate(0, 8); 
    engine.output('starting...'); 
    engine.viewport.x = x; 
    engine.viewport.y = y; 

    engine.tilestore('g', 'tile_grass.png'); 
    engine.tilestore('r', 'tile_rockgrass.png'); 
    engine.tilestore(' ', 'tile_black.png'); 

    engine.draw(mapData); 
    engine.output('done'); 
}, 
viewport: function() { 
    var x = 0; 
    var y = 0; 
}, 
allLoaded: function() { 
    var i, len = engine.images.length; 
    for(i=0; i<len; i++) { 
     if(engine.images[i][2] === false) { 
      return false; 
     } 
    } 
    return true; 
}, 
draw: function (mapData) { 
    if(engine.allLoaded() === false){ 
     setTimeout(function(md) 
    { 
    return function() { 
     engine.output('[engine.draw] waiting for images...'); 
     engine.draw(md); 
    } 
    }(mapData), 100); 
    }else{ 
     engine.drawmap(mapData); 
    } 

}, 
drawmap: function (mapData) { 
    var i, j; 

    var mapX = 0; 
    var mapY = 0; 
    var tile; 

    engine.output('drawing map from ' + engine.viewport.x + ',' + engine.viewport.y + ' to ' + 
    (engine.viewport.x + engine.tilesX) + ',' + (engine.viewport.y + engine.tilesY)); 
    for(j=0; j<engine.tilesY; j++) { 
     for(i=0; i<engine.tilesX; i++) { 
      mapX = i + engine.viewport.x; 
      mapY = j + engine.viewport.y; 

      tile = (mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY][mapX] : ' '; 
      engine.tiledraw(i, j, tile); 
     } 
    } 
}, 
tiledraw: function (x,y,tile){ 
var img = engine.tileretrieve(tile); 
    engine.handle.fillText(img, x * 16, y * 16); 
}, 
//*** the problem *** 
tilestore: function(id, imgSrc) { 
    var newid = engine.images.length; 
    var tile = [id, new Image(), false]; 

    tile[1].src = imgSrc; 
    tile[1].onload = function() { 
     tile[2] = true; 
     } 
    engine.images[newid] = tile; 
}, 
tileretrieve: function(id) { 
    var i, len = engine.images.length; 
    for(i=0; i<len; i++){ 
     if(engine.images[i][0] == id) { 
      return engine.images[i][1]; 
     } 
    } 
}, 
}; 

是否有任何理由，這是行不通的。爲什麼不存儲圖像。我是新來的Java腳本，這可能使我免受很多頭痛。

編輯：我該如何稱呼它：

var mapone = 
    [ 
    ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
    ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'] 
    ]; 
    engine.start(mapone, 0, 5); 

編輯：給出了錯誤的鏈接之前：http://that-guy.net/articles/2/Javascript-tile-engine-map-with-images/

編輯 如果有人有興趣，我已經工作的代碼我寫的，我將發佈這裏適合任何想要學習新方法的人。謝謝大家的幫助。

var image_holder = function() { 

    this.image_id =  0; // 'a','b', etc 
    this.image_src = 0; // the source 
    this.image_type = 0; // 0 or 1 
    this.image_load = 0; // is it loaded 0 = false 1 = true 
    this._head =  null; 
}; 
image_holder.prototype = { 

add: function (image_id, image_src, image_type, image_load) { 

    var node = { 
     image_id:image_id, 
     image_src:image_src, 
     image_type:image_type, 
     image_load:image_load, 
     next:null 
    }, 
    current; 

     if (this._head === null) { 
      this._head = node; 
     } else { 
      current = this._head; 

      while (current.next) { 
       current = current.next; 
      } 
      current.next = node; 
     } 

     this.image_id = image_id; 
     this.image_src = image_src; 
     this.image_type = image_type; 
     this.image_load = image_load; 

     }, 
get: function (image_id, image_load) { 
    var current = this._head; 

    if(image_id != null && image_load == null) { 
     while (current != null && current.image_id != image_id) { 
       current = current.next; 
      } 
      if(current != null){ 
       return current; 
       } 
      return null; 
     } 

    if(image_id == null && image_load != null) { 
     while (current != null && current.image_load != image_load) { 
       current = current.next; 
      } 
      if(current != null) 
       return current; 
      return null; 
     } 
    }, 
}; 

var engine = { 
    outhnd: document.getElementById('output'), 
    canvas: document.getElementById('canvas'), 
    handle: this.canvas.getContext('2d'), 
    width: this.canvas.width, 
    height: this.canvas.height, 
    tilesX: this.canvas.width/16, 
    tilesY: this.canvas.height/16, 
    obj: new image_holder(), 

output: function (message) { 
    engine.outhnd.innerHTML += '<br />' + message; 
}, 
start: function (mapData, x, y) { 
    engine.handle.translate(0, 8); 
    engine.output('starting...'); 
    engine.viewport.x = x; 
    engine.viewport.y = y; 

    var images0 = "tile_grass.png"; 
    var images1 = "tile_rock.png"; 
    var images2 = "tile_black.png"; 

    imageObject0 = new Image(); 
    imageObject0.src = images0; 
    imageObject0.onload = function() { 
         engine.obj.add('g', imageObject0, 0, 1); 
         var b = engine.obj.get('g').image_id; 
         console.log(b); 
           imageObject1 = new Image(); 
           imageObject1.src = images1; 
           imageObject1.onload = function() { 
           engine.obj.add('r', imageObject1, 0, 1); 
             imageObject2 = new Image(); 
             imageObject2.src = images2; 
             imageObject2.onload = function() { 
             engine.obj.add(' ', imageObject2, 0, 1); 
             engine.draw(mapData); 
             engine.output('done'); 
             };        
           }; 
         }; 
}, 
viewport: function() { 
    var x = 0; 
    var y = 0; 
}, 
draw: function (mapData) { 
    engine.drawmap(mapData); 
}, 
drawmap: function (mapData) { 
    var i, j; 
    var mapX = 0; 
    var mapY = 0; 
    var tile; 

    engine.output('drawing map from ' + engine.viewport.x + ',' + engine.viewport.y + ' to ' + 
    (engine.viewport.x + engine.tilesX) + ',' + (engine.viewport.y + engine.tilesY)); 
    for(j=0; j<engine.tilesY; j++) { 
     for(i=0; i<engine.tilesX; i++) { 
      mapX = i + engine.viewport.x; 
      mapY = j + engine.viewport.y; 

      tile = (mapData[mapY] && mapData[mapY][mapX]) ? mapData[mapY][mapX] : ' '; 
      engine.tiledraw(i, j, tile); 
     } 
    } 
}, 
tiledraw: function (x,y,tile){ 
    var img = engine.obj.get(tile,null).image_src; 
    engine.handle.drawImage(img, x * 16, y * 16); 
}, 
}; 


CALL: 

     var mapone = [ 
     ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'g', 'r'], 
     ['r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r', 'r']]; 
     engine.start(mapone, 0, 5); 

Answer 1

我認爲，這個問題你相遇是因爲您實例images = 0 再後來嘗試 var newid = engine.images.length; 這是試圖讓圖像陣列的長度，但圖像當前持有一個int。 也許嘗試實例化圖像像 images = []

Answer 2

是的'圖像= 0'是不正確的。它只需要是一個數組。

images = [], 

第二個問題是您沒有調用正確的畫布方法。將您的tileDraw方法更改爲：

tiledraw: function (x,y,tile){ 
var img = engine.tileretrieve(tile); 
    engine.handle.drawImage(img, x * 16, y * 16); 
}, 

您仍然將它設置爲fillText。

看起來你忘了在下一篇教程中更新那部分代碼。爲了幫助您將來，F12將爲大多數瀏覽器打開開發者工具（您需要在FireFox上安裝FireBug）。 「控制檯」選項卡將顯示帶有行號的JavaScript錯誤以幫助您進行調試。你甚至可以設置斷點來解決你的代碼問題。