42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

find a way to sharing init

Browse Source 
+ vector.normalized()
+ misc
This commit is contained in:
LuckyLaszlo
2022-11-28 04:33:27 +01:00
parent 4aafbac1a5
commit 7f248b5449
10 changed files with 45 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/client/class/GameComponents.ts
View File

@@ -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}

24
src/client/class/GameComponentsClient.ts
View File

@@ -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;

4
src/client/class/RectangleClient.ts
View File

@@ -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;

6
src/client/draw.ts
View File

@@ -5,13 +5,13 @@ import { gridDisplay } from "./handleInput.js";
function drawLoop()
{
pong.clear();
drawStatic();
if (gridDisplay) {
drawGrid();
}
drawStatic();
drawDynamic();
}

6
src/server/class/GameComponentsServer.ts
View File

@@ -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();
}
}

2
src/server/constants.ts
View File

@@ -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

12
src/shared_js/class/GameComponents.ts
View File

@@ -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);
}
}

16
src/shared_js/class/Rectangle.ts
View File

@@ -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}`);
}
}

4
src/shared_js/class/Vector.ts
View File

@@ -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 {

3
src/shared_js/constants.ts
View File

@@ -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