キャンバスの翻訳ルーチンが六角形のパスに沿って移動する

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とゴイのための私の計算値が更新され、我々が動いている方向に基づいて取得するグローバル変数です。 今、x移動には18.3の浮動小数点数を、y移動には9.8浮動小数点数を使用しています。

私はいくつかの平方根と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) 

希望すると助かります！