2D Javascript Array TypeError

时间:2015-01-30 11:49:52

标签: javascript arrays undefined multidimensional-array typeerror

[编辑]完整申请表格:http://bit.ly/1CGZzym

我收到错误:

Uncaught TypeError: Cannot set property '0' of undefined

使用以下代码。我相信这是因为我没有正确地声明2D数组的子数组,但我真的很困惑我应该在哪里声明这个。任何想法都会很棒。

// Create an array for the tiles we're about to draw
var tileArray = []

声明在函数的一侧。

我认为这是因为我试图在每个[col]中创建子元素,所以我想我需要在某个地方声明每个col编号,但我尝试的任何东西似乎都没有。

function drawGrid()
        {

            // Draw diamond grid

            var col = 0;
            var row = 0;

            topTileX = (viewWidth/2);
            topTileY = 0;

            var nextX = 0;
            var nextY = 0;

            var getCols = 0;

            while (topTileX > -1)
            {

                tileArray[col][row] = new DiamondTile(topTileX, topTileY, tileWidth, true, col, row);
                tileArray[col][row].draw();

                while (tileArray[col][row].xPos + tileArray[col][row].tileWidth < (viewWidth) + tileWidth)
                {
                    col++;

                    nextX = tileArray[col-1][row].xPos + tileArray[col-1][row].tileWidth / 2;
                    nextY = tileArray[col-1][row].yPos + tileArray[col-1][row].tileHeight / 2;

                    tileArray[col][row] = new DiamondTile(nextX, nextY, tileWidth, true, col, row);
                    tileArray[col][row].draw();

                    if (col == getCols)
                            {
                                break;
                            }
                }

            row++;
            getCols = col;
            col = 0;

            topTileX = topTileX - tileWidth/2;
            topTileY = topTileY + tileHeight/2;

            }
        };

出于演示目的,DiamondTile功能如下:

function DiamondTile(xPos,yPos,width,interactive,myCol,myRow)
        {
            // Set x and y position for this sprite
            this.xPos = xPos;
            this.yPos = yPos;
            this.myRow = myRow;
            this.myCol = myCol;

            // Used for AI pathfinding
            this.isObstacle = false;
            this.isStart = false;
            this.isEnd = false;

            this.gValue = 0;
            this.hValue = 0;
            this.fCost = 0;

            this.tileWidth = width;
            this.tileHeight = this.tileWidth/2;

            var self = this;

            // Create sprite
            this.spriteObj = new PIXI.Sprite(grass);
            this.spriteObj.interactive = interactive;

            this.spriteObj.anchor = new PIXI.Point(0.5,0);

            this.spriteObj.hitArea = new PIXI.Polygon([
                new PIXI.Point(0,0),
                new PIXI.Point(100,50),
                new PIXI.Point(0,100),
                new PIXI.Point(-100,50)
                ]);

            this.spriteObj.mouseover = function()
            {
                if (self.spriteObj.tint == 0xFFFFFF)
                {
                self.spriteObj.tint = 0xA7E846;
                }

                text2.setText(self.myCol + "," + self.myRow + " Start: " + self.isStart);
            }
            this.spriteObj.mouseout = function()
            {
                if (self.spriteObj.tint == 0xA7E846)
                {
                self.spriteObj.tint = 0xFFFFFF;
                }
            }
            this.spriteObj.click = function()
            {
                if (startStage === true)
                {
                    startStage = false;
                    self.isStart = true;
                    self.spriteObj.tint = 0x1AFF00;
                    text.setText("Now select an end point");
                    endStage = true;
                    return true;
                }
                if (endStage === true)
                {
                    endStage = false;
                    self.isEnd = true;
                    self.spriteObj.tint = 0xFF0000;
                    text.setText("Now place some obstacles");
                    obsStage = true;
                    return true;
                }
                if (obsStage ===true)
                {
                    self.isObstacle = true;
                    self.spriteObj.tint = 0x3B3B3B;
                    text.setText("Press 'C' to calculate path");
                    return true;
                }

            }


        };

3 个答案:

答案 0 :(得分:2)

这是一个多维数组,您尚未正确初始化第一个维度数组。在while循环中,您必须初始化第一个维度,以便能够使用索引访问第二个维度元素:

while (topTileX > -1)
{
    if (tileArray[col] == null)
        tileArray[col] = [];

    tileArray[col][row] = new DiamondTile(topTileX, topTileY, tileWidth, true, col, row);
    tileArray[col][row].draw();

    // omitted other code for brevity
}

Javascript数组是动态的,在这种情况下,它足以初始化第一个维数组元素。您不必初始化第二维中的各个项目。

更新:这是一个工作代码http://jsfiddle.net/0qbq0fts/2/

的小提琴

另外你的语义是错误的。在本书中,二维数组的第一维应为行,第二维应为列。

答案 1 :(得分:1)

您必须明确创建表示第二维的元素,例如:

function make2DArray(rows, cols) {
    var r = Array(rows);
    for (var i = 0; i < rows; ++i) {
        r[i] = Array(cols);
    }
    return r;
}

如果您事先并不知道有多少列,请使用:

function make2DArray(rows) {
    var r = Array(rows);
    for (var i = 0; i < rows; ++i) {
        r[i] = [];
    }
    return r;
}

各行可以各自具有独立的长度,并且在向它们添加值时会增长。

同样,如果你只需要添加一个新的(空)行,你可以这样做:

tileArray.push([]);

答案 2 :(得分:0)

这应该是我的评论,但SO已经在我身边坠毁了。 JavaScript可能会在您声明的行上抛出异常,但问题可能在于“DiamondTile”功能。