added delta time

+ #preloadfont hack

src/client/class/Rectangle.ts

@@ -54,13 +54,16 @@ class MovingRectangle extends Rectangle implements Moving {
 		this.baseSpeed = baseSpeed;
 		this.speed = baseSpeed;
 	}
-	move() { // Math.floor WIP until VectorInteger debug
+	move(delta: number) { // Math.floor WIP until VectorInteger debug
-		this.pos.x += Math.floor(this.dir.x * this.speed);
+		console.log("delta: "+ delta);
-		this.pos.y += Math.floor(this.dir.y * this.speed);
+		// console.log("speed: "+ this.speed);
+		// console.log("speed*delta: "+ this.speed * delta);
+		this.pos.x += Math.floor(this.dir.x * this.speed * delta);
+		this.pos.y += Math.floor(this.dir.y * this.speed * delta);
 	}
-	moveAndCollide(colliderArr: Rectangle[]) {
+	moveAndCollide(delta: number, colliderArr: Rectangle[]) {
 		let oldPos = Object.assign({}, this.pos);
-		this.move();
+		this.move(delta);
 		if (colliderArr.some(this.collision, this))
 		{
 			this.pos.x = oldPos.x;
@@ -94,14 +97,14 @@ class Ball extends MovingRectangle {
 			this._bounceWall();
 		}
 	}
-	moveAndBounce(colliderArr: Rectangle[]) {
+	moveAndBounce(delta: number, colliderArr: Rectangle[]) {
 		let oldPos = Object.assign({}, this.pos);
-		this.move();
+		this.move(delta);
 		let i = colliderArr.findIndex(this.collision, this);
 		if (i != -1)
 		{
 			this.bounce(colliderArr[i]);
-			this.move();
+			this.move(delta);
 		}
 		this.clear(oldPos);
 		this.update();

src/client/class/interface.ts

@@ -11,8 +11,8 @@ interface Component {
 
 interface Moving {
 	dir: Vector;
-	speed: number;
+	speed: number; // pixel per second
-	move(): void;
+	move(delta: number): void;
 }
 
 export {Component, Moving}

src/client/gameLoop.ts

@@ -3,7 +3,10 @@ import * as d from "./draw.js";
 import {random} from "./utils.js";
 import {handleInput} from "./handleInput.js";
 
-let ballInPlay = true;
+let ballInPlay = false;
+let actual_time: number = Date.now();
+let last_time: number;
+let delta_time: number;
 
 function gameLoop()
 {
@@ -12,11 +15,15 @@ function gameLoop()
 		// Will revert to clear() all if not satisfactory.
 		pong.clear();
 	*/
-	handleInput();
+	last_time = actual_time;
+	actual_time = Date.now();
+	delta_time = (actual_time - last_time) / 1000;
+
+	handleInput(delta_time);
 
 	if (ballInPlay)
 	{
-		g.ball.moveAndBounce([g.wall_top, g.wall_bottom, g.player1, g.player2]);
+		g.ball.moveAndBounce(delta_time, [g.wall_top, g.wall_bottom, g.player1, g.player2]);
 		if (g.ball.pos.x > g.pong.canvas.width) {
 			ballInPlay = false;
 			g.score1.clear();
@@ -51,10 +58,10 @@ function newRound()
 			return;
 		}
 	}
-	g.ball.pos.x = g.pong.canvas.width/2;
+	g.ball.pos.x = Math.floor(g.pong.canvas.width/2);
-	g.ball.pos.y = (g.pong.canvas.height * 0.1) + Math.floor(random() * (g.pong.canvas.height * 0.8));
+	g.ball.pos.y = Math.floor((g.pong.canvas.height * 0.1) + random() * (g.pong.canvas.height * 0.8));
 	g.ball.speed = g.ball.baseSpeed;
 	ballInPlay = true;
 }
 
-export {gameLoop}
+export {gameLoop, newRound}

src/client/handleInput.ts

@@ -3,7 +3,7 @@ import * as d from "./draw.js";
 
 let gridDisplay = false;
 
-function handleInput()
+function handleInput(delta: number)
 {
 	var keys = g.pong.keys;
 	if (keys.length == 0)
@@ -19,10 +19,10 @@ function handleInput()
 		gridDisplay = !gridDisplay;
 		g.pong.deleteKey("g");
 	}
-	playerMove(keys);
+	playerMove(delta, keys);
 }
 
-function playerMove(keys: string[])
+function playerMove(delta: number, keys: string[])
 {
 	g.player1.dir.y = 0;
 	if (keys.indexOf("w") != -1) {
@@ -31,7 +31,7 @@ function playerMove(keys: string[])
 	if (keys.indexOf("s") != -1) {
 		g.player1.dir.y += 1;
 	}
-	g.player1.moveAndCollide([g.wall_top, g.wall_bottom]);
+	g.player1.moveAndCollide(delta, [g.wall_top, g.wall_bottom]);
 
 	g.player2.dir.y = 0;
 	if (keys.indexOf("ArrowUp".toLowerCase()) != -1) {
@@ -40,7 +40,7 @@ function playerMove(keys: string[])
 	if (keys.indexOf("ArrowDown".toLowerCase()) != -1) {
 		g.player2.dir.y += 1;
 	}
-	g.player2.moveAndCollide([g.wall_top, g.wall_bottom]);
+	g.player2.moveAndCollide(delta, [g.wall_top, g.wall_bottom]);
 }
 
 export {handleInput, gridDisplay}

src/client/pong.html

@@ -11,6 +11,13 @@
 			font-style: normal;
 			font-display: swap;
 		}
+		#preloadfont {
+			font-family: "Bit5x3";
+			opacity:0;
+			height:0;
+			width:0;
+			display:inline-block;
+		}
 		body {
 			margin: 0;
 			background-color: #222425;
@@ -31,6 +38,7 @@
 </head>
 
 <body>
+	<div id="preloadfont">.</div>
 	<div id="canvas-container">
 		<!-- <p> =) </p> -->
 	</div>

src/client/pong.ts

@@ -4,7 +4,8 @@ import {Vector, VectorInteger} from "./class/Vector.js";
 import {Rectangle, MovingRectangle, Player, Ball, Line} from "./class/Rectangle.js";
 import {TextElem, TextNumericValue} from "./class/Text.js";
 import * as d from "./draw.js";
-import {gameLoop} from "./gameLoop.js"
+import {gameLoop, newRound} from "./gameLoop.js"
+import {random} from "./utils.js";
 
 /* Keys
 	Player 1: W/S
@@ -46,8 +47,8 @@ function startGame()
 	const	midLineSize = Math.floor(w/150);
 	const	wallSize = Math.floor(w/100);
 	const	gridSize = Math.floor(w/500);
-	const	playerSpeed = Math.floor(w/75);
+	const	playerSpeed = Math.floor(w/1.5); // pixel per second
-	const	ballSpeed = Math.floor(w/75);
+	const	ballSpeed = Math.floor(w/1.5); // pixel per second
 
 	let pos = new VectorInteger;
 	// Component
@@ -90,7 +91,6 @@ function startGame()
 	h_grid_d1 = new Rectangle(pong.ctx, pos, "darkgreen", gridSize, h);
 
 	// Start
-	score1.update(); // first Text draw init the custom font (graphic leftover ortherwise) (a better solution ?)
 	d.drawInit();
 	window.addEventListener('keydown', function (e) {
 		pong.addKey(e.key);
@@ -98,7 +98,8 @@ function startGame()
 	window.addEventListener('keyup', function (e) {
 		pong.deleteKey(e.key);
 	});
-	pong.interval = window.setInterval(gameLoop, 20);
+	pong.interval = window.setInterval(gameLoop, 15); // min interval on Firefox seems to be 15. Chrome can go lower.
+	setTimeout(newRound, 1000);
 }
 
 /////////////////////////////////////////////////////////////////////////////