没有为html5 2D画布存储图像

Question

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

我正在学习如何编写一个简单的2D磁贴引擎，我学习最好的方法之一是尝试以不同的方式制作相同的程序然后修补它。 Anywho，我正在学习本教程：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

是的，'images = 0'不对。它只需要是一个数组。

images = [],

第二个问题是你没有调用正确的canvas方法。将tileDraw方法更改为：

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

你仍然将它设置为fillText。

当您转到下一个教程时，您似乎忘记更新该部分代码。

为了将来帮助您，F12将为大多数浏览器打开开发人员工具（您需要在FireFox上安装FireBug）。 “控制台”选项卡将显示带有行号的JavaScript错误，以帮助您进行调试。您甚至可以设置断点来解决代码问题。