1

图片： 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);
4

2 回答 2

0

是的，'images=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 错误，以帮助您进行调试。您甚至可以设置断点来对代码进行故障排除。

于 2012-04-17T18:58:46.907 回答
0

我相信您遇到的问题是因为您实例化images = 0 然后稍后尝试 var newid = engine.images.length; 这是试图获取图像数组的长度，但图像当前持有一个 int。也许尝试实例化图像 images = []

于 2012-04-17T18:55:10.630 回答