diff --git a/back/volume/src/pong/dtos/GameUpdate.ts b/back/volume/src/pong/dtos/GameUpdate.ts index 9eefbea..4804119 100644 --- a/back/volume/src/pong/dtos/GameUpdate.ts +++ b/back/volume/src/pong/dtos/GameUpdate.ts @@ -2,6 +2,7 @@ import { type Point } from '../game/utils' export class GameUpdate { paddlesPositions!: Point[] + ballSpeed!: Point ballPosition!: Point scores!: number[] } diff --git a/back/volume/src/pong/game/Game.ts b/back/volume/src/pong/game/Game.ts index 5d07d95..58c8448 100644 --- a/back/volume/src/pong/game/Game.ts +++ b/back/volume/src/pong/game/Game.ts @@ -157,6 +157,7 @@ export class Game { const data: GameUpdate = { paddlesPositions: this.players.map((p) => p.paddle.rect.center), + ballSpeed: this.ball.speed, ballPosition: this.ball.rect.center, scores: this.players.map((p) => p.score) } diff --git a/front/volume/public/audio/edge_hit.wav b/front/volume/public/audio/edge_hit.wav new file mode 100644 index 0000000..f50262a Binary files /dev/null and b/front/volume/public/audio/edge_hit.wav differ diff --git a/front/volume/public/audio/paddle_hit.wav b/front/volume/public/audio/paddle_hit.wav new file mode 100644 index 0000000..d413a24 Binary files /dev/null and b/front/volume/public/audio/paddle_hit.wav differ diff --git a/front/volume/public/audio/score.wav b/front/volume/public/audio/score.wav new file mode 100644 index 0000000..5c9222b Binary files /dev/null and b/front/volume/public/audio/score.wav differ diff --git a/front/volume/src/components/Pong/Ball.ts b/front/volume/src/components/Pong/Ball.ts index 00ef960..4f4465c 100644 --- a/front/volume/src/components/Pong/Ball.ts +++ b/front/volume/src/components/Pong/Ball.ts @@ -1,3 +1,4 @@ +import { DEFAULT_BALL_INITIAL_SPEED } from "./constants"; import { Point, Rect } from "./utils"; export class Ball { @@ -6,6 +7,7 @@ export class Ball { constructor(spawn: Point, size: Point = new Point(20, 20)) { this.rect = new Rect(spawn, size); + this.speed = DEFAULT_BALL_INITIAL_SPEED; } draw(context: CanvasRenderingContext2D, color: string) { diff --git a/front/volume/src/components/Pong/Game.ts b/front/volume/src/components/Pong/Game.ts index ce835c7..5c87ee3 100644 --- a/front/volume/src/components/Pong/Game.ts +++ b/front/volume/src/components/Pong/Game.ts @@ -12,6 +12,7 @@ export class Game { renderCanvas: HTMLCanvasElement; canvas: HTMLCanvasElement; context: CanvasRenderingContext2D; + ballLastVelocity: Point; ball: Ball; players: Player[]; my_paddle: Paddle; @@ -23,6 +24,10 @@ export class Game { ranked: boolean; youAreReady: boolean; + private readonly score_audio = new Audio('audio/score.wav'); + private readonly paddle_hit_audio = new Audio('audio/paddle_hit.wav'); + private readonly edge_hit_audio = new Audio('audio/edge_hit.wav'); + constructor( renderCanvas: HTMLCanvasElement, canvas: HTMLCanvasElement, @@ -83,14 +88,12 @@ export class Game { } start(socket: WebSocket) { - // if (this.my_paddle) { this.renderCanvas.addEventListener("pointermove", (e) => { this.my_paddle.move(e); const data: Point = this.my_paddle.rect.center; socket.send(formatWebsocketData(GAME_EVENTS.PLAYER_MOVE, data)); }); console.log("Game started!"); - // } } update(data: GameUpdate) { @@ -101,8 +104,21 @@ export class Game { if (this.players[1].paddle != this.my_paddle) { this.players[1].paddle.rect.center = data.paddlesPositions[1]; } + + if (data.ballSpeed.x * this.ball.speed.x < 0) { + this.paddle_hit_audio.play(); + } + if (data.ballSpeed.y * this.ball.speed.y < 0) { + this.edge_hit_audio.play(); + } + this.ball.speed = data.ballSpeed; + this.ball.rect.center = data.ballPosition; + for (let i = 0; i < data.scores.length; i++) { + if (this.players[i].score != data.scores[i]) { + this.score_audio.play(); + } this.players[i].score = data.scores[i]; } } diff --git a/front/volume/src/components/Pong/dtos/GameUpdate.ts b/front/volume/src/components/Pong/dtos/GameUpdate.ts index 789bf38..1460410 100644 --- a/front/volume/src/components/Pong/dtos/GameUpdate.ts +++ b/front/volume/src/components/Pong/dtos/GameUpdate.ts @@ -2,6 +2,7 @@ import type { Point } from "../utils"; export class GameUpdate { paddlesPositions!: Point[]; + ballSpeed!: Point; ballPosition!: Point; scores!: number[]; }