javascript - 如何为六边形网格着色，使其没有相同颜色的邻居？

Question

我有一个生成十六进制网格的 javascript 应用程序。对于每个立方体坐标（x、y 和 z），每个十六进制顶部都有三个变量。我还有一个包含三个十六进制精灵的数组。

我试过sprite = sprites[hex.x&3]了，它会产生整齐的六角形。我还尝试根据通过列偏移行，sprite = sprites[(hex.x + hex.y&3)&3]但这没有用。我目前正在摆弄这个公式，但收效甚微。

我知道我需要不少于三个精灵来做到这一点，但我找不到一种方法来组合三个立方体坐标以在数组上显示正确的精灵:(

标签： javascripthexagonal-tiles

Answer 1

在十六进制网格中，您需要三种颜色来为每个十六进制着色，以使其与相邻的颜色不同：

您的解决方案走在了正确的轨道上。而不是添加x+y你会想要减去x-y。另一个变化是&3位操作；你会想要%3的。但是，在某些语言中，包括 Javascript，%3可以返回一个负数，因此您需要使用((___%3)+3)%3它来使其为正数。

您想要的颜色/精灵 id 是((x-y)%3 + 3) % 3. 我做了一个交互式演示来测试这个。