回転した矩形を移動させながらジャンプする効果

Question

私は単純な戦闘ゲームのロジックを準備しています。アイデアはあなたがタンク（長方形）を持っているということです。 aまたはdを押すと、wまたはsを押しながら回転させます（正面または背面に移動）。

if(keys[65] === true) { 
    gun.angle -= gun.speed; 
} 

if(keys[68] === true) { 
    gun.angle += gun.speed; 
} 

if(keys[87] === true) { 
    gun.x += gun.speed * Math.cos(radians(gun.angle)); 
    gun.y += gun.speed * Math.sin(radians(gun.angle)); 
} 

if(keys[83] === true) { 
    gun.x -= gun.speed * Math.cos(radians(gun.angle)); 
    gun.y -= gun.speed * Math.sin(radians(gun.angle)); 
} 

スクリプトはかなりうまく動作しますが、難しい問題が1つあります。タンクを回転させると問題はありませんが、上または下に移動するとジャンプ効果があります。

上に移動すると下に移動し、下に移動すると上に移動します。

これは、demo fiddleで簡単にテストできます。私は、移動の影響を受けるポイントがタンクのxとyであり、平行移動（回転）がタンクの中心点に基づいているという事実に関連していると考えられます。私はそれを修正する方法を知りません。

すべてのヘルプはいいだろう、アニメーション機能で）

Answer 1

、あなたは銃の位置を更新する前に、ガンセンターを計算しています。その結果、タンクの銃（すなわち、円と線）は古い位置に描かれるが、タンクの本体（すなわち長方形）はタンクが移動している間に新しい位置に描かれる。

変更...

var animate = function() { 

    gun_center_x = gun.x + (gun.w/2); 
    gun_center_y = gun.y + (gun.h/2); 

    if(keys[65] === true) { 
     gun.angle -= gun.speed; 
    } 

    if(keys[68] === true) { 
     gun.angle += gun.speed; 
    } 

    if(keys[87] === true) { 
     gun.x += gun.speed * Math.cos(radians(gun.angle)); 
     gun.y += gun.speed * Math.sin(radians(gun.angle)); 
    } 

    if(keys[83] === true) { 
     gun.x -= gun.speed * Math.cos(radians(gun.angle)); 
     gun.y -= gun.speed * Math.sin(radians(gun.angle)); 
    } 

    ... 

}; 

に...

var animate = function() { 


    if(keys[65] === true) { 
     gun.angle -= gun.speed; 
    } 

    if(keys[68] === true) { 
     gun.angle += gun.speed; 
    } 

    if(keys[87] === true) { 
     gun.x += gun.speed * Math.cos(radians(gun.angle)); 
     gun.y += gun.speed * Math.sin(radians(gun.angle)); 
    } 

    if(keys[83] === true) { 
     gun.x -= gun.speed * Math.cos(radians(gun.angle)); 
     gun.y -= gun.speed * Math.sin(radians(gun.angle)); 
    } 

    gun_center_x = gun.x + (gun.w/2); 
    gun_center_y = gun.y + (gun.h/2); 

    ... 

};