diff --git a/src/client/class/GameComponents.ts b/src/client/class/GameComponents.ts deleted file mode 100644 index 64a2911c..00000000 --- a/src/client/class/GameComponents.ts +++ /dev/null @@ -1,33 +0,0 @@ - -import * as c from "../constants.js" -import { VectorInteger } from "../../shared_js/class/Vector.js"; -import { RectangleClient, RacketClient, BallClient } from "./RectangleClient.js"; - -class GameComponentsForClient { - wallTop: RectangleClient; - wallBottom: RectangleClient; - playerLeft: RacketClient; - playerRight: RacketClient; - ball: BallClient; - constructor(ctx: CanvasRenderingContext2D) - { - let pos = new VectorInteger; - - pos.assign(0, 0); - this.wallTop = new RectangleClient(pos, c.w, c.wallSize, ctx, "grey"); - pos.assign(0, c.h-c.wallSize); - this.wallBottom = new RectangleClient(pos, c.w, c.wallSize, ctx, "grey"); - - pos.assign(0+c.pw, c.h_mid-c.ph/2); - this.playerLeft = new RacketClient(pos, c.pw, c.ph, c.playerSpeed, ctx, "white"); - pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2); - this.playerRight = new RacketClient(pos, c.pw, c.ph, c.playerSpeed, ctx, "white"); - - // pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2); // center the ball - pos.assign(-c.ballSize, -c.ballSize); // ball out =) - this.ball = new BallClient(pos, c.ballSize, c.ballSpeed, ctx, "white"); - this.ball.dir.assign(-0.8, +0.2); - } -} - -export {GameComponentsForClient} diff --git a/src/client/class/GameComponentsClient.ts b/src/client/class/GameComponentsClient.ts index 6c9f154c..1bbe2f4d 100644 --- a/src/client/class/GameComponentsClient.ts +++ b/src/client/class/GameComponentsClient.ts @@ -2,10 +2,28 @@ import * as c from "../constants.js" import { Vector, VectorInteger } from "../../shared_js/class/Vector.js"; import { TextElem, TextNumericValue } from "./Text.js"; -import { RectangleClient, Line } from "./RectangleClient.js"; -import { GameComponentsForClient } from "./GameComponents.js"; +import { RectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js"; +import { GameComponents } from "../../shared_js/class/GameComponents.js"; -class GameComponentsClient extends GameComponentsForClient { +class GameComponentsExtensionForClient extends GameComponents { + wallTop: RectangleClient; + wallBottom: RectangleClient; + playerLeft: RacketClient; + playerRight: RacketClient; + ball: BallClient; + constructor(ctx: CanvasRenderingContext2D) + { + super(); + this.wallTop = new RectangleClient(this.wallTop.pos, this.wallTop.width, this.wallTop.height, ctx, "grey"); + this.wallBottom = new RectangleClient(this.wallBottom.pos, this.wallBottom.width, this.wallBottom.height, ctx, "grey"); + this.playerLeft = new RacketClient(this.playerLeft.pos, this.playerLeft.width, this.playerLeft.height, this.playerLeft.baseSpeed, ctx, "white"); + this.playerRight = new RacketClient(this.playerRight.pos, this.playerRight.width, this.playerRight.height, this.playerRight.baseSpeed, ctx, "white"); + this.ball = new BallClient(this.ball.pos, this.ball.width, this.ball.baseSpeed, this.ball.speedIncrease, ctx, "white"); + } +} + + +class GameComponentsClient extends GameComponentsExtensionForClient { midLine: Line; scoreLeft: TextNumericValue; scoreRight: TextNumericValue; diff --git a/src/client/class/RectangleClient.ts b/src/client/class/RectangleClient.ts index 526b7744..5c251704 100644 --- a/src/client/class/RectangleClient.ts +++ b/src/client/class/RectangleClient.ts @@ -80,10 +80,10 @@ class BallClient extends Ball implements GraphicComponent { color: string; update: () => void; clear: (pos?: VectorInteger) => void; - constructor(pos: VectorInteger, size: number, baseSpeed: number, + constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number, ctx: CanvasRenderingContext2D, color: string) { - super(pos, size, baseSpeed); + super(pos, size, baseSpeed, speedIncrease); this.ctx = ctx; this.color = color; this.update = updateRectangle; diff --git a/src/client/draw.ts b/src/client/draw.ts index 11b85b3e..7c5249e2 100644 --- a/src/client/draw.ts +++ b/src/client/draw.ts @@ -5,13 +5,13 @@ import { gridDisplay } from "./handleInput.js"; function drawLoop() { pong.clear(); - - drawStatic(); - + if (gridDisplay) { drawGrid(); } + drawStatic(); + drawDynamic(); } diff --git a/src/server/class/GameComponentsServer.ts b/src/server/class/GameComponentsServer.ts index 769c4c3c..31f3ca67 100644 --- a/src/server/class/GameComponentsServer.ts +++ b/src/server/class/GameComponentsServer.ts @@ -2,18 +2,12 @@ import * as c from "../constants.js" import { GameComponents } from "../../shared_js/class/GameComponents.js"; -// DONT WORK AS EXPECTED. I might try again later. -// Empty object replacement to the web-API (web-API useless on server-side) -// class CanvasRenderingContext2D {} -// const mockCTX = new CanvasRenderingContext2D(); - class GameComponentsServer extends GameComponents { scoreLeft: number = 0; scoreRight: number = 0; ballInPlay: boolean = false; constructor() { - // super(mockCTX); super(); } } diff --git a/src/server/constants.ts b/src/server/constants.ts index 974263ff..031423de 100644 --- a/src/server/constants.ts +++ b/src/server/constants.ts @@ -2,4 +2,4 @@ export * from "../shared_js/constants.js" export const gameLoopIntervalMS = 15; // millisecond -export const clientsUpdateIntervalMS = 100; // millisecond +export const clientsUpdateIntervalMS = 42; // millisecond diff --git a/src/shared_js/class/GameComponents.ts b/src/shared_js/class/GameComponents.ts index 0ef0a64a..d6e4e3de 100644 --- a/src/shared_js/class/GameComponents.ts +++ b/src/shared_js/class/GameComponents.ts @@ -1,7 +1,4 @@ -/* - No more shared. Dont know how to implemente this. - For the moment, this code is only used by the server. -*/ + import * as c from "../constants.js" import { VectorInteger } from "./Vector.js"; import { Rectangle, Racket, Ball } from "./Rectangle.js"; @@ -22,13 +19,12 @@ class GameComponents { this.wallBottom = new Rectangle(pos, c.w, c.wallSize); pos.assign(0+c.pw, c.h_mid-c.ph/2); - this.playerLeft = new Racket(pos, c.pw, c.ph, c.playerSpeed); + this.playerLeft = new Racket(pos, c.pw, c.ph, c.racketSpeed); pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2); - this.playerRight = new Racket(pos, c.pw, c.ph, c.playerSpeed); + this.playerRight = new Racket(pos, c.pw, c.ph, c.racketSpeed); - // pos.assign(c.w_mid-c.ballSize/2, c.h_mid-c.ballSize/2); // center the ball pos.assign(-c.ballSize, -c.ballSize); // ball out =) - this.ball = new Ball(pos, c.ballSize, c.ballSpeed); + this.ball = new Ball(pos, c.ballSize, c.ballSpeed, c.ballSpeedIncrease); this.ball.dir.assign(-0.8, +0.2); } } diff --git a/src/shared_js/class/Rectangle.ts b/src/shared_js/class/Rectangle.ts index c3ad81ad..256460c6 100644 --- a/src/shared_js/class/Rectangle.ts +++ b/src/shared_js/class/Rectangle.ts @@ -66,8 +66,10 @@ class Racket extends MovingRectangle { } class Ball extends MovingRectangle { - constructor(pos: VectorInteger, size: number, baseSpeed: number) { + readonly speedIncrease: number; + constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number) { super(pos, size, size, baseSpeed); + this.speedIncrease = speedIncrease; } bounce(collider?: Rectangle) { this._bounceAlgo(collider); @@ -98,7 +100,7 @@ class Ball extends MovingRectangle { this._bounceRacketAlgo(racket); } protected _bounceRacketAlgo(racket: Racket) { - this.speed += this.baseSpeed/20; + this.speed += this.speedIncrease; let x = this.dir.x * -1; @@ -109,7 +111,7 @@ class Ball extends MovingRectangle { const racketMid = racket.pos.y + racketHalf; let impact = ballMid - racketMid; - const horizontalMargin = racketHalf * 0.10; + const horizontalMargin = racketHalf * 0.15; if (impact < horizontalMargin && impact > -horizontalMargin) { impact = 0; } @@ -122,12 +124,10 @@ class Ball extends MovingRectangle { let y = impact / (racketHalf - horizontalMargin) * angleFactor; - this.dir.assign(x, y); - /* // Normalize Vector (for consistency in speed independent of direction) - const normalizationFactor = Math.abs(y) + Math.abs(x); - this.dir.assign(x/normalizationFactor, y/normalizationFactor); - */ + this.dir.assign(x, y); + this.dir = this.dir.normalized(); + // console.log(`x: ${this.dir.x}, y: ${this.dir.y}`); } } diff --git a/src/shared_js/class/Vector.ts b/src/shared_js/class/Vector.ts index 278394a1..025bca36 100644 --- a/src/shared_js/class/Vector.ts +++ b/src/shared_js/class/Vector.ts @@ -10,6 +10,10 @@ class Vector { this.x = x; this.y = y; } + normalized() : Vector { + const normalizationFactor = Math.abs(this.x) + Math.abs(this.y); + return new Vector(this.x/normalizationFactor, this.y/normalizationFactor); + } } class VectorInteger extends Vector { diff --git a/src/shared_js/constants.ts b/src/shared_js/constants.ts index c540d1a3..4ad26de6 100644 --- a/src/shared_js/constants.ts +++ b/src/shared_js/constants.ts @@ -11,8 +11,9 @@ export const pw = Math.floor(w/60); export const ph = pw*6; export const ballSize = pw; export const wallSize = Math.floor(w/100); -export const playerSpeed = Math.floor(w/1.5); // pixel per second +export const racketSpeed = Math.floor(w/1.5); // pixel per second export const ballSpeed = Math.floor(w/2); // pixel per second +export const ballSpeedIncrease = ballSpeed/20; // pixel per second export const matchStartDelay = 3000; // millisecond export const newRoundDelay = 1500; // millisecond