controller: more GameContext cleanup, introduce ticks

src/controller/gamecontext.ts

@@ -12,18 +12,13 @@ import { vec2 } from 'gl-matrix';
 
 export class GameContext {
 	public static async load(renderer: Renderer): Promise<GameContext> {
-		const [
+		const mapView = this.loadMap(renderer);
-			mapView,
+		const entity = loadSimpleEntity(renderer, 'simple_square');
-			entity,
-		] = await Promise.all([
-			GameContext.loadMap(renderer),
-			loadSimpleEntity(renderer, 'simple_square'),
-		]);
 
 		return new GameContext(
 			renderer,
-			mapView,
+			await mapView,
-			entity,
+			await entity,
 		);
 	}
 
@@ -34,7 +29,9 @@ export class GameContext {
 
 	private time: number|null = null;
 
-	private readonly speed = 1 / 100;
+	private readonly tick = 10; // ms per tick
+	private readonly speed = 0.05; // movement per tick
+	private readonly maxSkip = 20; // maximum ticks to process in a single render step
 
 	private readonly input: DirectionHandler;
 
@@ -64,17 +61,24 @@ export class GameContext {
 		return diff;
 	}
 
-	private update(time: number): void {
+	private updateStep(): void {
-		const diff = this.updateTime(time);
+		vec2.scaleAndAdd(this.entityPos, this.entityPos, this.entityMovement, this.speed);
+	}
 
-		if (vec2.sqrLen(this.entityMovement) > 0)
+	private update(time: number): void {
-			vec2.scaleAndAdd(this.entityPos, this.entityPos, this.entityMovement, diff * this.speed);
+		const diff = Math.min(this.maxSkip, this.updateTime(time));
-		else
+
+		if (vec2.sqrLen(this.entityMovement) === 0) {
 			this.renderer.snapToGrid(this.entityPos, this.entityPos);
+			return;
+		}
+
+		for (let i = 0; i < diff; i++)
+			this.updateStep();
 	}
 
 	private render = (time: number) => {
-		this.update(time);
+		this.update(Math.round(time / this.tick));
 
 		this.renderer.setCenter(this.entityPos);
 		this.renderer.clear();