画像は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/

EDIT 誰もが興味を持っていた場合、私は私が書いたコードを働いている、と私は掲載しますここに新しい方法を学びたいと思った人のために。助けようとしてくれてありがとう。

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 をインスタンス化し、その後、これは画像の配列の長さを取得しようとしているが、画像が現在のintを保持している var newid = engine.images.length; しようとするため、あなたの遭遇がある問題と考えています。 images = []

Answer 2

のように画像をインスタンス化する可能性があります。「画像= 0」は正しくありません。それは配列である必要があります。

images = [], 

第2の問題は、正しいキャンバスメソッドを呼び出さないということです。 tileDrawメソッドを次のように変更します。

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

まだfillTextに設定されています。

次のチュートリアルに移ったときにコードのその部分を更新するのを忘れたようです。

将来的にお手伝いするために、F12はほとんどのブラウザ用の開発ツールを開きます（FireFoxにFireBugをインストールする必要があります）。 [Console]タブには、デバッグに役立つJavaScriptエラーと行番号が表示されます。ブレークポイントを設定して、コードのトラブルシューティングを行うこともできます。