JavaScript Canvas 对象数组？范围问题？ ocanvas.js

Question

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

我一直对使用网格的网页游戏感兴趣，因此在在线学习了一些 JavaScript 类(class)后，我发现了一些动态创建 Canvas 对象的六边形网格的 JavaScript 代码。

我一直在研究代码，添加点击事件来突出显示您所在的十六进制，尝试在十六进制上放置随机数字来描述“单位”的数量等。有点模拟游戏可能会发生的事情看起来，只是为了学习经验。

我一直在尝试做的一件事，但我似乎无法弄清楚，是如何在数组中定义 Canvas 对象，以便我可以按行/列引用它们。在游戏的上下文中，按行/列引用网格单元似乎会更容易，以便您可以根据该位置执行操作。

我使用 ocanvas.js 创建 Canvas 对象，所以理想情况下我希望能够将网格单元定义为:

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][5] 位置。在我的十六进制代码中:http://tny.cz/14282e49大约 3/4 下来我有一条评论显示我想调用我的 hex[col][row] 对象...但我总是收到“Uncaught TypeError: Cannot read property '5' of undefined”错误，其中 ' 5' 是它尝试访问的列。

所以，这是一个由两部分组成的问题:1)我是否没有正确定义我的 hex 数组来访问这样的 Canvas 对象？2)是否有一种我没有看到的更好的方法来访问列/行网格格式的特定 Canvas 对象？

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] || []; 表示“如果 hex[row] 存在，则使用它。否则创建一个新数组。将结果分配给 hex[row]。”||“或”运算符在这里用作“默认”。请参阅此页面作为引用:http://seanmonstar.com/post/707078771/guard-and-default-operators

<小时/>

第二部分:

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

我建议使用该资源中使用的“轴坐标”系统。阅读全文。这是一篇很长的文章，对于这里的答案来说信息太多了。