Canvas Перевести рутины на шестигранный путь

Question

У меня есть скрипт, который позволяет мне перемещать изображение вдоль пути, но мой путь отклоняется (на шестиугольной карте) примерно через 6 ходов.

Я знаю, что есть функция для этого, но сейчас я не могу найти, что делать. В настоящее время я использую заданное значение с плавающей запятой для перемещений 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 являются глобальными переменными, которые обновляются в зависимости от направления, в котором мы движемся. Прямо сейчас я использую число с плавающей точкой 18,3 для моего хода х, 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)

Надеюсь, это поможет!