Ship Simulation for HTML5 Studies

Match angular velocity to x & y:

vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);

Match angular acceleration to x & y:

ax = force * Math.cos(angle);
ay = force * Math.sin(angle);

Acceleration to velocity:

vx += ax;
vy += ay;

Velocity & position:

object.x += vx;
object.y += vy;


Remove an out-of-bounds object:

if (object.x -object.width / 2 > right ||
object.x + object.width / 2 < left || object.y - object.height / 2 > bottom ||
object.y + object.height / 2 < top) { //code to remove object }
 

Regenerate an out-of-bounds object:

if (object.x -object.width / 2 > right ||
object.x + object.width / 2 < left || object.y - object.height / 2 > bottom ||
object.y + object.height / 2 < top)  { //code to reset object position and velocity }
 

Screen wrapping:

if (object.x - object.width / 2 > right) {object.x = left - object.width / 2;}
else if (object.x + object.width / 2 < left) {object.x = right + object.width / 2;} if (object.y - object.height / 2 > bottom) {object.y = top - object.height / 2 < top} else if (object.y + object.height / 2 < top) {object.y = bottom + object.height / 2;}
 

Friction the correct way:

speed = Math.sqrt(vx * vx + vy * vy);
angle = Mathlatan2(vy, vx);

vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

 

Friction the easy way:

vx *= friction;
vy *= friction;

 

DEMO

Apress. Foundation HTML5 Animation with JavaScript. N.p., n.d. Web. 02 Jan. 2013.