diff --git a/src/client/class/Rectangle.ts b/src/client/class/Rectangle.ts
index 743eedca..44b532ef 100644
--- a/src/client/class/Rectangle.ts
+++ b/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
- this.pos.x += Math.floor(this.dir.x * this.speed);
- this.pos.y += Math.floor(this.dir.y * this.speed);
+ move(delta: number) { // Math.floor WIP until VectorInteger debug
+ console.log("delta: "+ delta);
+ // 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();
diff --git a/src/client/class/interface.ts b/src/client/class/interface.ts
index a06ef28e..3670d48d 100644
--- a/src/client/class/interface.ts
+++ b/src/client/class/interface.ts
@@ -11,8 +11,8 @@ interface Component {
interface Moving {
dir: Vector;
- speed: number;
- move(): void;
+ speed: number; // pixel per second
+ move(delta: number): void;
}
export {Component, Moving}
diff --git a/src/client/gameLoop.ts b/src/client/gameLoop.ts
index fdecf9ab..e61c65dd 100644
--- a/src/client/gameLoop.ts
+++ b/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.y = (g.pong.canvas.height * 0.1) + Math.floor(random() * (g.pong.canvas.height * 0.8));
+ g.ball.pos.x = Math.floor(g.pong.canvas.width/2);
+ 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}
diff --git a/src/client/handleInput.ts b/src/client/handleInput.ts
index c8beda70..c6896f95 100644
--- a/src/client/handleInput.ts
+++ b/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}
diff --git a/src/client/pong.html b/src/client/pong.html
index 976f2aa4..9da09617 100644
--- a/src/client/pong.html
+++ b/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 @@
+ .
diff --git a/src/client/pong.ts b/src/client/pong.ts
index 06fe928a..71da8e91 100644
--- a/src/client/pong.ts
+++ b/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 ballSpeed = Math.floor(w/75);
+ const playerSpeed = Math.floor(w/1.5); // pixel per second
+ 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);
}
/////////////////////////////////////////////////////////////////////////////