Merge pull request #7 from ndorfin/requestion-animation-frame

Use requestAnimationFrame rather
OCBroCode · Feb 24, 2024 · ee8a797 · ee8a797
2 parents b811bda + eedb1c5
commit ee8a797
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 32 deletions.
diff --git a/assets/css/wc/lander-vehicle.css b/assets/css/wc/lander-vehicle.css
@@ -1,16 +1,17 @@
 lander-vehicle {
+	--lander-altitude: calc(var(--lander_position_y) * 1%);
+	--lander-scale: calc(1 - (var(--lander_position_y) / 100));
+
 	display: block;
 	position: absolute;
-	inset-block-end: calc(var(--lander_position_y) * 1%);
+	inset-block-end: var(--lander-altitude);
 	inset-inline-start: calc(var(--lander_position_x) * 1%);
 	inline-size: calc(5 * var(--unit_root));
 	block-size: calc(4 * var(--unit_root));
 	transform-origin: 50% 50%;
-	transition-property: transform, inset-block-end, inset-inline-start;
-	transition-duration: 0.05s;
-	transition-timing-function: linear;
 	transform:
-		translate(-50%, -50%)
+		translateX(-50%)
+		scale(var(--lander-scale), var(--lander-scale))
 		rotate(
 			calc(var(--lander_rotation) * 1deg)
 		);

diff --git a/assets/mjs/model.mjs b/assets/mjs/model.mjs
@@ -1,4 +1,11 @@
 export const MODEL = {
+	altitude: {
+		name: 'Altitude',
+		initial: 10_000,
+		min: 0,
+		max: 11_0000,
+		affects: 'lander',
+	},
 	fuel: {
 		name: 'Fuel',
 		initial: 100,
@@ -23,8 +30,15 @@ export const MODEL = {
 	rotation: {
 		name: 'Rotation',
 		initial: 0,
-		min: -90,
-		max: 90,
+		min: 0,
+		max: 360,
+		affects: 'lander',
+	},
+	rotational_speed: {
+		name: 'Rotational speed',
+		initial: 0,
+		min: -10,
+		max: 10,
 		affects: 'lander',
 	},
 	running: {
@@ -37,8 +51,8 @@ export const MODEL = {
 	speed: {
 		name: 'Speed',
 		initial: 0.1,
-		min: -5,
-		max: 5,
+		min: -1,
+		max: 1,
 		affects: 'lander',
 	},
 	thruster: {
@@ -110,26 +124,26 @@ export const INDICATORS = {
 export const KEYMAP = {
 	'ArrowUp': {
 		affects: 'thruster',
-		change: 5,
+		change: 2,
 		active: false,
 	},
 	'ArrowDown': {
 		affects: 'thruster',
-		change: -5,
+		change: -2,
 		active: false,
 	},
 	'ArrowLeft': {
-		affects: 'rotation',
-		change: -5,
+		affects: 'rotational_speed',
+		change: -0.1,
 		active: false,
 	},
 	'ArrowRight': {
-		affects: 'rotation',
-		change: 5,
+		affects: 'rotational_speed',
+		change: 0.1,
 		active: false,
 	},
 };
 
 export const PARAMETERS = {
-	gravity: 0.1,
+	gravity: 0.25,
 }
diff --git a/assets/mjs/wc/game-engine.mjs b/assets/mjs/wc/game-engine.mjs
@@ -11,11 +11,15 @@ export default class GameEngine extends GameElement {
 	#gameRunning;
 	#gameStarted;
 	#gameEnded;
-	#gameEventFrequency = 50; // Milliseconds
-	#gameDuration = 0; // Counts the time elapsed based on multiples of `this.#gameEventFrequency`
-	#gameInterval; // Placeholder for window.setInterval so that it can be cleared later.
+	#timers = {
+		gameTimeStart: 0,
+		elapsedTime: 0,
+		currentTime: 0,
+	};
 	#keyMap = KEYMAP;
 	#limitsExceeded = false;
+	#animationRef;
+	#landerElem;
 
 	#gameRunningStateChanged = (runningState) => {
 		this.#gameRunning = runningState;
@@ -25,29 +29,29 @@ export default class GameEngine extends GameElement {
 		this.#gameStarted = true;
 		this.#gameRunningStateChanged(true);
 		this.#addLanderKeyboardHandlers();
-		this.#gameDuration = 0;
-		this.#gameInterval = window.setInterval(this.gameLoop, this.#gameEventFrequency);
+		this.#timers.gameTimeStart = performance.now();
+		this.#animationRef = requestAnimationFrame(this.gameLoop);
 	}
 
 	#unpauseGame() {
 		if (!this.#gameRunning) {
 			this.#addLanderKeyboardHandlers();
 			this.#gameRunningStateChanged(true);
-			this.#gameInterval = window.setInterval(this.gameLoop, this.#gameEventFrequency);
+			this.#animationRef = requestAnimationFrame(this.gameLoop);
 		}
 	}
 
 	#pauseGame() {
 		this.#gameRunningStateChanged(false);
 		this.#removeLanderKeyboardHandlers();
-		window.clearInterval(this.#gameInterval);
+		cancelAnimationFrame(this.#animationRef);
 	}
 
 	#stopGame() {
 		this.#gameEnded = true;
-		console.log('Game ended after duration', this.#gameDuration);
+		console.log('Game ended after duration', performance.now() - this.#timers.gameTimeStart);
 		this.#removeLanderKeyboardHandlers();
-		window.clearInterval(this.#gameInterval);
+		cancelAnimationFrame(this.#animationRef);
 	}
 
 	#addLanderKeyboardHandlers() {
@@ -93,6 +97,7 @@ export default class GameEngine extends GameElement {
 			let currentItem = INDICATORS[keyName];
 			this.modelIndicators[keyName] = currentItem.initial;
 		});
+		this.#landerElem = this.querySelector('lander-vehicle');
 		this.#updateCustomProperties();
 		this.#startGame();
 	}
@@ -143,7 +148,7 @@ export default class GameEngine extends GameElement {
 
 	handleGameStateKeyboardInupts(event) {
 		let keyName = event.key;
-
+		
 		if (keyName == 'Enter') {
 			if (this.#gameStarted && !this.#gameRunning) {
 				this.#unpauseGame();
@@ -165,14 +170,21 @@ export default class GameEngine extends GameElement {
 	}
 
 	updateLanderPosition() {
-		let newSpeed = parseFloat(this.modelLander.speed) + PARAMETERS.gravity - parseFloat(this.modelLander.thruster * 0.005);
-		this.modelLander.speed = newSpeed.toFixed(1);
-		this.modelLander.position_y = (parseFloat(this.modelLander.position_y) - newSpeed).toFixed(1);
+		// let timeSinceLastPosition = this.#timers.elapsedTime;
+
+		// let newSpeed = parseFloat(this.modelLander.speed) + PARAMETERS.gravity - parseFloat(this.modelLander.thruster * 0.005);
+		// this.modelLander.speed = newSpeed.toFixed(1);
+
+		let newYPosition = parseFloat(this.modelLander.position_y - PARAMETERS.gravity + (this.modelLander.thruster * 0.005)).toFixed(2);
+
+		// this.modelLander.thruster @ 50% = counters gravity @ 0.25
+		this.modelLander.position_y = newYPosition;
+		// this.modelLander.rotation = this.modelLander.rotation + this.modelLander.rotational_speed;
 	}
 
 	gameLoop() {
-		// Increment game duration counter
-		this.#gameDuration = this.#gameDuration + this.#gameEventFrequency;
+		this.#timers.elapsedTime = performance.now() - this.#timers.currentTime;
+		this.#timers.currentTime = performance.now();
 
 		// Go through the batched inputs and change the lander's position
 		Object.keys(this.#keyMap).forEach(keyName => {
@@ -186,7 +198,12 @@ export default class GameEngine extends GameElement {
 		this.checkLimits();
 		this.updateLanderPosition();
 		this.#updateCustomProperties();
-		if (this.#limitsExceeded) this.#stopGame();
+
+		if (this.#limitsExceeded) {
+			this.#stopGame();
+		} else {
+			this.#animationRef = requestAnimationFrame(this.gameLoop);
+		}
 	}
 
 	connectedCallback() {