Question

我正在尝试使用此代码显示我将拥有的级别...

levelArray[0] = ["player", "empty", "empty", "empty", "wall", "wall", "empty",
    "empty", "wall", "wall", "empty", "empty", "empty","empty",
    "empty", "empty", "empty", "wall", "empty", "wall", "wall",
    "wall", "wall", "empty", "wall", "empty", "wall", "empty",
    "box", "wall", "empty", "wall", "empty", "empty", "empty",
    "empty", "empty", "empty", "wall", "wall", "wall", "empty",
    "wall", "wall", "empty", "empty", "ghost", "wall","ghost"];

for(var i = 0; i < edge; i++)
{
    for(var j = 0; j < edge; j++)
    {
        switch(levelArray[i])
        {
            case "empty":   // empty location
                ctx.drawImage(emptyTile, currentX, currentY);
                break;
            case "wall":    // wall block
                ctx.drawImage(wallTile, currentX, currentY);
                break;
            case "box":     // box block
                ctx.drawImage(boxTile, currentX, currentY);
                break;
            case "ghost":   // enemy sprite
                ctx.drawImage(ghostTile, currentX, currentY);
                break;
            case "player":  // player sprite
                ctx.drawImage(playerTile, currentX, currentY);
                break;
        }
        currentX += elementEdge;
    }
    currentY += elementEdge;
}

但是我在切换行“Uncaught TypeError：无法读取未定义的属性'0'时收到错误”，我真的不明白。

编辑： edge之前已定义为

edge = Math.sqrt(levelArray.length)

Answer 1

你没有使用内循环。我相信你想要这个：

switch(levelArray[i][j])

在your source code中，该代码段位于setupCanvas函数内，以levelArray为参数。由于您在致电setupCanvas时没有传递任何内容，因此会将其视为undefined。因此你得到的错误。

Answer 2

尝试访问您的levelArray数组，如下所示：

开关（levelArray [0] [1]）

，因为这个levelArray [i]会在i = 0的情况下返回数组，如果你已经放置了更多的数组，那么i的其他情况就会返回！

Answer 3

从我所看到的，levelArray未被声明或初始化，因此它没有类型。顶部的简单var levelArray = [];可以解决您的问题。

更新：

在此jsfiddle中尝试代码后，看起来您还没有遍历二级数组。因此，您还需要更改levelArray[i][j]。

之后，我收到edge未定义的错误。所以你也有一些工作。

Answer 4

我认为你打算做这样的事情：

我使用常规数组，而不是多维数组（你没有真正做过），每个edge步，我重置currentX参数并增加currentY参数

var edge = 7, elementEdge=20;
var levelArray = ["player", "empty", "empty", "empty", "wall", "wall", "empty",
    "empty", "wall", "wall", "empty", "empty", "empty","empty",
    "empty", "empty", "empty", "wall", "empty", "wall", "wall",
    "wall", "wall", "empty", "wall", "empty", "wall", "empty",
    "box", "wall", "empty", "wall", "empty", "empty", "empty",
    "empty", "empty", "empty", "wall", "wall", "wall", "empty",
    "wall", "wall", "empty", "empty", "ghost", "wall","ghost"];

var currentX = 0, currentY = 0;
for (var i = 0; i < levelArray.length; i++) {
  switch (levelArray[i]) {
    // All your cases here...
  }
  currentX += elementEdge;
  if (i % edge == 0) {
    currentX = 0;
    currentY += elementEdge;
  }
}

另一个答案可能是真正使用多维数组：

var levelArray = [["player", "empty", "empty", "empty", "wall", "wall", "empty"],
    ["empty", "wall", "wall", "empty", "empty", "empty","empty"],
    ["empty", "empty", "empty", "wall", "empty", "wall", "wall"],
    ["wall", "wall", "empty", "wall", "empty", "wall", "empty"],
    ["box", "wall", "empty", "wall", "empty", "empty", "empty"],
    ["empty", "empty", "empty", "wall", "wall", "wall", "empty"],
    ["wall", "wall", "empty", "empty", "ghost", "wall","ghost"]];

for(var i = 0; i < levelArray.length; i++)
{
    for(var j = 0; j < levelArray[i].length; j++)
    {
        switch(levelArray[i][j])
        {
            case "empty":   // empty location
                ctx.drawImage(emptyTile, currentX, currentY);
                break;
            case "wall":    // wall block
                ctx.drawImage(wallTile, currentX, currentY);
                break;
            case "box":     // box block
                ctx.drawImage(boxTile, currentX, currentY);
                break;
            case "ghost":   // enemy sprite
                ctx.drawImage(ghostTile, currentX, currentY);
                break;
            case "player":  // player sprite
                ctx.drawImage(playerTile, currentX, currentY);
                break;
        }
        currentX += elementEdge;
    }
    currentY += elementEdge;
  }
}

Answer 5

我认为你需要一个多级数组（二维）

levelArray = [
    ["player", "empty", "empty", "empty", "wall", "wall", "empty"],
    ["empty", "wall", "wall", "empty", "empty", "empty","empty"],
    ["empty", "empty", "empty", "wall", "empty", "wall", "wall"],
    ["wall", "wall", "empty", "wall", "empty", "wall", "empty"],
    ["box", "wall", "empty", "wall", "empty", "empty", "empty"],
    ["empty", "empty", "empty", "wall", "wall", "wall", "empty"],
    ["wall", "wall", "empty", "empty", "ghost", "wall","ghost"]
];

现在你可以像这样迭代

var elemWidth = 20, elemHeight = 20;
for (var i=0; i<levelArray.length; i++) {
    for (var j=0; j<levelArray[i].length; j++) {
        switch(levelArray[i][j]) {
            case "empty": ctx.drawImage(emptyTile, i*elemWidth, j*elemHeight); break;
            case "wall": ctx.drawImage(wallTile, i*elemWidth, j*elemHeight); break;
            case "box": ctx.drawImage(boxTile, i*elemWidth, j*elemHeight); break;
            case "ghost": ctx.drawImage(ghostTile, i*elemWidth, j*elemHeight); break;
            case "player": ctx.drawImage(playerTile, i*elemWidth, j*elemHeight); break;
        }
    }
}

数组阵列混乱

5 个答案: