移動旋轉矩形時的跳躍效果

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)); 
} 

該腳本的作品相當不錯，但有一個問題，我很難解決。如果你旋轉坦克，沒有問題，但是當你向上或向下移動時，會產生跳躍效果。

當你向上移動時，它會跳下來，而當你向下移動時它會跳起來。

它可以很容易地用這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); 

    ... 

};