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();

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

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

它会把这个值放在[1] [5]位置。在我的十六进制代码中：http://tny.cz/14282e49大约3/4向下我有一个注释显示我想调用我的hex [col] [row]对象...但我总是得到“Uncaught 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] || [];说＆＃34;如果hex [row]存在，请使用它。否则创建一个新数组。将结果分配给hex [row]。＆＃34; ||＆＃34;或＆＃34;运算符用作＆＃34;默认＆＃34;这里。请参阅此页面作为参考：http://seanmonstar.com/post/707078771/guard-and-default-operators

第二部分：

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

我建议使用＆＃34;轴向坐标＆＃34;该资源使用的系统。读完整件事。这是一篇很长的帖子，对于SO答案来说太过分了。

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

1 个答案: