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

Question

我是 javascript 和 canvas 的新手，但对编程并不完全陌生（我有一些 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][5] 位置。在我的十六进制代码中：http://tny.cz/14282e49 大约下降 3/4 我有一条评论显示我想调用我的 hex[col][row] 对象...但我总是收到“未捕获的 TypeError：无法读取属性” 5' of undefined" 错误，其中 '5' 是它试图访问的列。

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

---

第二部分：

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

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