Javascript for循环不遍历数组 [英] Javascript for loop not looping through array

问题描述

我正在尝试读取TMX文件以获得平台游戏级别。我试图绘制图块，以查看我的代码是否正常工作。这是我加载地图的方式：

I am trying to read in a TMX file for a platformer level. I was trying to draw the tileset to see if my code was working. This is how I load the map:

function TileMapLayer(mapWidth, mapHeight, tileWidth, tileHeight, layerName, tileData) {
'use strict';
    var name = layerName,
    width = mapWidth, height = mapHeight,
    // An array of integers used to figure out whether there is a tile in the
    // player's position
    map = [width][height];
    // The tileset that makes up the tilemap
    this.tileSet = Game.res.getImage('tileSet');
    var data = tileData;

    function getWidth() {return width;}
    function getHeight() {return height;}
}

TileMapLayer.prototype.draw = function() {
        'use strict';
    ctx.beginPath();
    ctx.drawImage(this.tileSet, canvasWidth / 2, canvasHeight / 2);
    ctx.closePath();
};

function TileMap() {
    'use strict';
    this.mapLayers = [];
}

TileMap.prototype.loadFile = function(pathToFile) {
    'use strict';
    var xhr = new XMLHttpRequest();
    var that = this;
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            // read in xml file
            var domParser = new DOMParser();
            var mapData = domParser.parseFromString(xhr.responseText, 'text/xml');
            var mapAttributes = mapData.getElementsByTagName('map')[0].attributes;
            // get tileset location
            var tileSet = mapData.getElementsByTagName('tileset')[0].getElementsByTagName('image')[0].attributes;
            Game.res.addImage('tileSet', '/home/agoston/Documents/js/platformer/res/maps/' + tileSet.getNamedItem('source').nodeValue);
            // get map & tile dimensions
            that.width = parseInt(mapAttributes.getNamedItem('width').nodeValue);
            that.height = parseInt(mapAttributes.getNamedItem('height').nodeValue);
            that.tileWidth = parseInt(mapAttributes.getNamedItem('tilewidth').nodeValue);
            that.tileHeight = parseInt(mapAttributes.getNamedItem('tileheight').nodeValue);

            // get layer data
            var layers = mapData.getElementsByTagName('layer');

            // create layers
            for(var i = 0; i < layers.length; ++i) {
                that.mapLayers[i] = new TileMapLayer(that.width, that.height, 
                                                                    that.tileWidth, 
                                                                    that.tileHeight,
                                                                    layers[i].attributes.getNamedItem('name').nodeValue,
                                                                    layers[i].getElementsByTagName('data')[0]);
            }

        }
    };
    xhr.open('GET', pathToFile, true);
    xhr.send(null);
};

TileMap.prototype.draw = function() {
    // this block of code doesn't execute
    for(var i = 0; i < this.mapLayers; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }
};

但是，应该经过地图图层阵列的循环不会在所有。当我尝试使用以下方法在数组中绘制第一个地图层时：

However, the loop that is supposed to go through the array of map layers, doesn't loop at all. When I try to draw the first map layer in the array using this:

TileMap.prototype.draw = function() {
    this.mapLayers[0].draw();
};

它会绘制图块图像，但会出现此错误：

it draws the tileset image, but it gives this error:

TypeError: this.mapLayers[0] is undefined

有人知道为什么会这样吗？如果需要，可以在以下位置找到TMX文件： http://pastebin.com/MYdJCHfQ

Does anyone know why this is happening? If you wish, you can find the TMX file here: http://pastebin.com/MYdJCHfQ

推荐答案

似乎mapLayers是要迭代的数组，但是您缺少其length属性来告诉循环何时停止循环播放。也许这会有所帮助：

It seems like the mapLayers is an array that you want to iterate over, but you are missing its length property to tell the loop when to stop looping. Perhaps this would help:

for(var i = 0, j = this.mapLayers.length; i < j; ++i) {
        console.log('drawing map layers');
        this.mapLayers[i].draw();
    }

这篇关于Javascript for循环不遍历数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！