javascript - Canvas 平移例程沿六边形路径移动

Question

我有一个脚本正在运行，它允许我沿着路径移动图像，但我的路径在大约 6 次移动后偏离轨道(在六边形 map 上)。

我知道有一个函数可以处理这个问题，但现在我找不到该怎么做。目前，我对 x 和 y 移动使用设置的浮点值，这些移动不是向上或向下移动(0 度和 180 度)，这是一个设置的整数值。

这是我的伪代码:

function doTranslate(deg, goX, goY) {
   clearCanvas();
   var context = surface.getContext('2d');
   context.save();
   context.translate(goX,goY);
   context.rotate(DegToRads(deg));
   context.drawImage(gamePiece, -10, -10);
   context.restore();
}

同样，这一切都有效，但我计算的 goX 和 goY 值是全局变量，它们根据我们移动的方向进行更新。 现在，我的 x 移动使用浮点值 18.3，y 移动使用 float 9.8，直线向上或向下移动使用 int 值 21。

我记得大学时(只是模糊地)我需要在某处进行一些平方根和 PI 运算，但现在我只是添加和减去每次移动的静态值。

有人已经解决这个问题了吗？

Answer 1

要在六边形网格上移动某物，它必须遵循这些基本单位。

将其放入半伪代码中:

s = 10.0; //Scale (how far you want the object to move)

//Move right
goTo(2*s,0*s)

//Move up-right
goTo(1*s,Math.sqrt(3)*s)

//Move up-left
goTo(-1*s,Math.sqrt(3)*s)

//Move left
goTo(-2*s,0*s)

//Move down-left
goTo(-1*s,-Math.sqrt(3)*s)

//Move down-right
goTo(1*s,-Math.sqrt(3)*s)

现在，如果您希望六边形向上和向下而不是左右方向，请使用以下代码:

s = 10.0; //Scale (how far you want the object to move)

//Move up
goTo(0*s,2*s)

//Move up-left
goTo(-Math.sqrt(3)*s,1*s)

//Move down-left
goTo(-Math.sqrt(3)*s,-1*s)

//Move down
goTo(0*s,-2*s)

//Move down-right
goTo(Math.sqrt(3)*s,-1*s)

//Move up-right
goTo(Math.sqrt(3)*s,1*s)

希望对你有帮助!