画布对象的Javascript数组？范围问题？ocanvas.js

Question

我对javascript和画布很陌生，但对编程并不陌生(我有一些HTML/PHP经验)。

我一直对使用网格的网络游戏感兴趣，所以在网上学习了一些javascript课程之后，我发现了一些javascript代码，它动态地创建了帆布对象的六边形网格。

我一直在玩代码，添加点击事件来突出显示你所处的六边形，试图将随机数字放置在十六进制上，以描绘“单位”的数字等等。就像模拟游戏的样子，只是为了学习体验。

我一直试图做的一件事，我似乎无法弄清楚，就是如何在数组中定义画布对象，这样我就可以按行/列引用它们。在游戏的上下文中，逐行/逐列引用网格单元似乎要容易得多，这样您就可以根据该位置执行操作。

我使用ocanvas.js创建画布对象，因此理想情况下，我希望能够将网格单元格定义为：

hex[row][col] = canvas.display.polygon({
    x: x0,
    y: y0,
    sides: 6,
    radius: this.radius,
    rotation: 0,
    fill: fillColor,
    stroke: "outside 1px #000",
    row: row,
    col: col,
    zIndex: "back",
    selected: false
});
hex[row][col].add();    

但是，我注意到多维度数组在javascript中不像在PHP中那样工作。在PHP中，不必预先定义数组的作用域。你可以这样做：

$array = [];
$array[1][5] = "foo";

它会把这个值放在1的位置上。在我这里的十六进制代码：http://tny.cz/14282e49大约3/4下，我有一个注释显示我想调用我的十六进制对象.但是我总是得到“未定义的TypeError:无法读取属性'5‘的未定义的”错误，其中'5’是它试图访问的列。

因此，这是一个2部分的问题: 1)我是否没有正确地定义我的hex数组来访问这样的画布对象? 2)是否有更好的方法来访问列/行网格格式的特定画布对象？

Answer 1

第一部分：

在为hex[row][col]分配值之前，需要确保存在hex[row]。

hex[row] = hex[row] || [];
hex[row][col] = canvas.display.polygon({
    x: x0,
    y: y0,
    sides: 6,
    radius: this.radius,
    rotation: 0,
    fill: fillColor,
    stroke: "outside 1px #000",
    row: row,
    col: col,
    zIndex: "back",
    selected: false
});
hex[row][col].add();

行hex[row] = hex[row] || [];说：“如果存在十六进制，使用它。否则创建一个新数组。将结果分配给十六行。”在这里，||“或”运算符被用作“默认”。将此页面作为参考：http://seanmonstar.com/post/707078771/guard-and-default-operators

第二部分：

http://www.redblobgames.com/grids/hexagons/#coordinates

我建议使用在该资源上使用的“轴坐标”系统。把整件事看一遍。这是一个很长的帖子，信息太多了，无法在这里给出答案。