Question

EDIT: I dug into the extremely well-documented source code in Decker’s link (vector movement demo) and I’m fairly confident I can figure this out working off some of the code there. Thank you all for your help 😀

I’m working on movement for a game in javascript. Left and right arrow keys rotate an image of a spaceship while up arrow causes it to accelerate. Using the degree of rotation and the speed, I can calculate movement in terms of x and y with Math.sin() and Math.cos(), but this means that the ship handles like a car. Seeing as it’s supposed to be in space, I’d like to make the rotation of the ship only affect its path while accelerating and to take into account the ship’s current movement.

I messed around with it a lot and tried dividing the movement into two separate forces, the current direction and speed and the desired direction, but nothing seems even close to how it should feel.

Sorry if that was confusing, here’s the simplified code for the original movement:

function main()
{
if(keyStates[39]) // Right arrow pressed?
    ship.deg+=8; 
if(keyStates[37]) // Left arrow pressed? 
    ship.deg-=8; 
if(keyStates[38]) // Up arrow pressed?
{
    if(ship.speed<16)
        ship.speed+=1;
}
var shift=getXYshift(ship.deg,ship.speed);
function getXYshift(deg,speed)
{
    return {x:Math.round(Math.cos((90-deg)*Math.PI/180)*speed*-1), y:Math.round(Math.sin((90-deg)*Math.PI/180)*speed)};
}
setTimeout(function(){ main() }, 50);
}

Answer 1

You can use one Vector to keep track of the ships speed and direction and alter the direction of that vector when the up arrow is pressed by checking the angle of a second Vector used to keep track of the ships current angle.

I recommend getting this book Supercharged Javascript Graphics which explains in detail the use of vectors and much more.

You can also view the source code for one of the books examples here at the authors website which has a vector handling object that could prove useful to you.