Spaceship simulation (with friction, the cheat's way)

index.html

<canvas id='canvas'></canvas>

script.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;
window.onresize = function(){
	canvas.width = w = window.innerWidth;
	canvas.height = h = window.innerHeight;
}

var spaceship = {
	x: w / 2, y: h / 2,
	vx: 0, vy: 0,
	ax: 0, ay: 0,
	friction: 0.97,
	r: 0,
	draw: function(){
		ctx.save();
		ctx.translate(this.x, this.y);
		ctx.rotate(this.r);
		ctx.fillStyle = 'white';
		ctx.fillRect(-10, -5, 20, 10);
		ctx.restore();
	}
};

// ---------------------------------------------------
// v1
// ---------------------------------------------------

// var friction = 0.97;
// function applyFriction(obj){
// 	obj.vx *= friction;
// 	obj.vy *= friction;
// }

// function updatePosition(obj){
// 	//update velocity
// 	obj.vx += obj.ax;
// 	obj.vy += obj.ay;
// 	applyFriction(obj);
// 	//update position
// 	obj.x += obj.vx;
// 	obj.y += obj.vy;
// }

// ---------------------------------------------------
// v2
// ---------------------------------------------------

const applyAcceleration = (velocity = 0, acceleration = 0.05) => {
	velocity += acceleration;
	return velocity;
};

const applyFriction = (velocity = 0, friction = 0.97) => {
	velocity *= friction;
	return velocity;
};

const applyPosition = (position = 0, velocity = 0) => {
	position += velocity;
	return position;
};

const updatePosition = (object) => {
	object.vx = applyAcceleration(object.vx, object.ax);
	object.vy = applyAcceleration(object.vy, object.ay);
	object.vx = applyFriction(object.vx, object.fx);
	object.vy = applyFriction(object.vy, object.fy);
	object.x = applyPosition(object.x, object.vx);
	object.y = applyPosition(object.y, object.vy);
};

// ---------------------------------------------------

//user interactivity

var keys = [];
document.addEventListener('keydown', function(e){
	keys[e.which] = true;
});
document.addEventListener('keyup', function(e){
	keys[e.which] = false;
});

(function animloop(){
	requestAnimationFrame(animloop, canvas);
	ctx.clearRect(0, 0, w, h);
	
	//rotation
	if(keys[37]) spaceship.r -= 0.05;// left
	if(keys[39]) spaceship.r += 0.05;// right
	
	//thrust
	if(keys[38]){// up
		spaceship.ax = Math.cos(spaceship.r) * 0.05;
		spaceship.ay = Math.sin(spaceship.r) * 0.05;
		console.log('up', spaceship.ax);
	}else{// 
		console.log('reset');
		spaceship.ax = spaceship.ay = 0;
	}
	
	//friction is applied inside the updatePosition function
	updatePosition(spaceship);
	spaceship.draw();
})();

spaceship-simulation-with-friction-the-cheat-s-way.markdown

Spaceship simulation (with friction, the cheat's way)

A Pen by Tobsta on CodePen.

License.

style.css

body{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
canvas{
	background: black;
}