Browse Source

* Speed increase in pong game

master
vvandenb 2 years ago
parent
commit
087831ec0b
  1. 1
      back/volume/src/pong/dtos/GameInfo.ts
  2. 22
      back/volume/src/pong/game/Ball.ts
  3. 26
      back/volume/src/pong/game/Game.ts
  4. 2
      back/volume/src/pong/game/Games.ts
  5. 5
      back/volume/src/pong/game/constants.ts
  6. 2
      back/volume/src/users/entity/user.entity.ts
  7. 1
      front/volume/src/components/Channels.svelte
  8. 43
      front/volume/src/components/Chat.svelte
  9. 7
      front/volume/src/components/Pong/Game.ts
  10. 13
      front/volume/src/components/Pong/Paddle.ts
  11. 5
      front/volume/src/components/Pong/constants.ts
  12. 1
      front/volume/src/components/Pong/dtos/GameInfo.ts

1
back/volume/src/pong/dtos/GameInfo.ts

@ -6,7 +6,6 @@ export class GameInfo {
gameId!: string gameId!: string
walls!: Rect[] walls!: Rect[]
paddleSize!: Point paddleSize!: Point
playerXOffset!: number
ballSize!: Point ballSize!: Point
winScore!: number winScore!: number
ranked!: boolean ranked!: boolean

22
back/volume/src/pong/game/Ball.ts

@ -4,7 +4,9 @@ import { type MapDtoValidated } from '../dtos/MapDtoValidated'
import { import {
DEFAULT_BALL_SIZE, DEFAULT_BALL_SIZE,
DEFAULT_BALL_INITIAL_SPEED, DEFAULT_BALL_INITIAL_SPEED,
GAME_TICKS GAME_TICKS,
DEFAULT_BALL_SPEED_INCREMENT,
DEFAULT_MAX_BALL_SPEED
} from './constants' } from './constants'
export class Ball { export class Ball {
@ -22,7 +24,7 @@ export class Ball {
) { ) {
this.rect = new Rect(spawn, size) this.rect = new Rect(spawn, size)
this.speed = speed this.speed = speed
this.initial_speed = speed this.initial_speed = speed.clone()
this.spawn = spawn.clone() this.spawn = spawn.clone()
this.indexPlayerScored = -1 this.indexPlayerScored = -1
this.timeoutTime = 0 this.timeoutTime = 0
@ -73,6 +75,19 @@ export class Ball {
} }
if (!canvasRect.contains_y(this.rect)) this.speed.y = this.speed.y * -1 if (!canvasRect.contains_y(this.rect)) this.speed.y = this.speed.y * -1
if (this.speed.x > 0 && this.speed.x < DEFAULT_MAX_BALL_SPEED.x) {
this.speed.x += DEFAULT_BALL_SPEED_INCREMENT.x
}
if (this.speed.x < 0 && this.speed.x > -DEFAULT_MAX_BALL_SPEED.x) {
this.speed.x -= DEFAULT_BALL_SPEED_INCREMENT.x
}
if (this.speed.y > 0 && this.speed.y > DEFAULT_MAX_BALL_SPEED.y) {
this.speed.y += DEFAULT_MAX_BALL_SPEED.y
}
if (this.speed.y < 0 && this.speed.y < -DEFAULT_MAX_BALL_SPEED.y) {
this.speed.y -= DEFAULT_MAX_BALL_SPEED.y
}
this.rect.center.add_inplace(this.speed) this.rect.center.add_inplace(this.speed)
} }
@ -85,10 +100,11 @@ export class Ball {
} }
this.rect.center = this.spawn.clone() this.rect.center = this.spawn.clone()
this.speed.x = this.speed.x * -1
if (this.speed.x < 0) { if (this.speed.x < 0) {
this.speed.x = this.initial_speed.x
this.speed.y = -this.initial_speed.y this.speed.y = -this.initial_speed.y
} else { } else {
this.speed.x = -this.initial_speed.x
this.speed.y = this.initial_speed.y this.speed.y = this.initial_speed.y
} }

26
back/volume/src/pong/game/Game.ts

@ -5,7 +5,6 @@ import { Player } from './Player'
import { import {
DEFAULT_BALL_SIZE, DEFAULT_BALL_SIZE,
DEFAULT_PADDLE_SIZE, DEFAULT_PADDLE_SIZE,
DEFAULT_PLAYER_X_OFFSET,
DEFAULT_WIN_SCORE, DEFAULT_WIN_SCORE,
GAME_EVENTS, GAME_EVENTS,
GAME_TICKS GAME_TICKS
@ -57,7 +56,6 @@ export class Game {
gameId: this.id, gameId: this.id,
walls: this.map.walls, walls: this.map.walls,
paddleSize: DEFAULT_PADDLE_SIZE, paddleSize: DEFAULT_PADDLE_SIZE,
playerXOffset: DEFAULT_PLAYER_X_OFFSET,
ballSize: DEFAULT_BALL_SIZE, ballSize: DEFAULT_BALL_SIZE,
winScore: DEFAULT_WIN_SCORE, winScore: DEFAULT_WIN_SCORE,
ranked: this.ranked ranked: this.ranked
@ -65,10 +63,13 @@ export class Game {
} }
private addPlayer (socket: Socket, uuid: string, name: string): void { private addPlayer (socket: Socket, uuid: string, name: string): void {
let paddleCoords = new Point(DEFAULT_PLAYER_X_OFFSET, this.map.size.y / 2) let paddleCoords = new Point(
DEFAULT_PADDLE_SIZE.x / 2,
this.map.size.y / 2
)
if (this.players.length === 1) { if (this.players.length === 1) {
paddleCoords = new Point( paddleCoords = new Point(
this.map.size.x - DEFAULT_PLAYER_X_OFFSET, this.map.size.x - DEFAULT_PADDLE_SIZE.x / 2,
this.map.size.y / 2 this.map.size.y / 2
) )
} }
@ -114,13 +115,16 @@ export class Game {
this.playing = false this.playing = false
clearInterval(this.timer) clearInterval(this.timer)
this.timer = null this.timer = null
this.pongService.saveResult(this.players, this.ranked).then(() => { this.pongService
this.gameStoppedCallback(this.players[0].name) .saveResult(this.players, this.ranked)
this.players = [] .then(() => {
}).catch(() => { this.gameStoppedCallback(this.players[0].name)
this.gameStoppedCallback(this.players[0].name) this.players = []
this.players = [] })
}) .catch(() => {
this.gameStoppedCallback(this.players[0].name)
this.players = []
})
} }
} }

2
back/volume/src/pong/game/Games.ts

@ -9,7 +9,6 @@ import {
DEFAULT_BALL_SIZE, DEFAULT_BALL_SIZE,
DEFAULT_MAP_SIZE, DEFAULT_MAP_SIZE,
DEFAULT_PADDLE_SIZE, DEFAULT_PADDLE_SIZE,
DEFAULT_PLAYER_X_OFFSET,
DEFAULT_WIN_SCORE DEFAULT_WIN_SCORE
} from './constants' } from './constants'
@ -80,7 +79,6 @@ export class Games {
mapSize: new Point(0, 0), mapSize: new Point(0, 0),
walls: [], walls: [],
paddleSize: DEFAULT_PADDLE_SIZE, paddleSize: DEFAULT_PADDLE_SIZE,
playerXOffset: DEFAULT_PLAYER_X_OFFSET,
ballSize: DEFAULT_BALL_SIZE, ballSize: DEFAULT_BALL_SIZE,
winScore: DEFAULT_WIN_SCORE, winScore: DEFAULT_WIN_SCORE,
ranked: false ranked: false

5
back/volume/src/pong/game/constants.ts

@ -13,9 +13,10 @@ export const GAME_EVENTS = {
} }
export const DEFAULT_MAP_SIZE = new Point(500, 400) export const DEFAULT_MAP_SIZE = new Point(500, 400)
export const DEFAULT_PADDLE_SIZE = new Point(6, 30) export const DEFAULT_PADDLE_SIZE = new Point(30, 50)
export const DEFAULT_BALL_SIZE = new Point(10, 10) export const DEFAULT_BALL_SIZE = new Point(10, 10)
export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2) export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2)
export const DEFAULT_PLAYER_X_OFFSET = 50 export const DEFAULT_MAX_BALL_SPEED = new Point(30, 20)
export const DEFAULT_BALL_SPEED_INCREMENT = new Point(0.05, 0)
export const DEFAULT_WIN_SCORE = 5 export const DEFAULT_WIN_SCORE = 5
export const GAME_TICKS = 30 export const GAME_TICKS = 30

2
back/volume/src/users/entity/user.entity.ts

@ -34,7 +34,7 @@ export class User {
@Column({ default: false, nullable: true }) @Column({ default: false, nullable: true })
isVerified: boolean isVerified: boolean
@Column('uuid',{ unique: true }) @Column('uuid', { unique: true })
socketKey: string socketKey: string
@Column({ unique: true }) @Column({ unique: true })

1
front/volume/src/components/Channels.svelte

@ -13,7 +13,6 @@
</script> </script>
<script lang="ts"> <script lang="ts">
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
export let channels: Array<ChannelsType> = []; export let channels: Array<ChannelsType> = [];

43
front/volume/src/components/Chat.svelte

@ -91,18 +91,16 @@
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
const blockUser = async (username : string) => { const blockUser = async (username: string) => {};
};
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
const banUser = async (username : string) => { const banUser = async (username: string) => {
// const prompt = window.prompt("Enter ban duration in seconds"); // const prompt = window.prompt("Enter ban duration in seconds");
// const res1 = await fetch(API_URL + "/user/" + username, { // const res1 = await fetch(API_URL + "/user/" + username, {
// mode: "cors", // mode: "cors",
// }); // });
// const data1 = await res1.json(); // const data1 = await res1.json();
// const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/ban", { // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/ban", {
// method: "POST", // method: "POST",
// mode: "cors", // mode: "cors",
@ -117,13 +115,12 @@
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
const kickUser = async (username : string) => { const kickUser = async (username: string) => {
// set-up channel joining and kicking // set-up channel joining and kicking
// const res1 = await fetch(API_URL + "/user/" + username, { // const res1 = await fetch(API_URL + "/user/" + username, {
// mode: "cors", // mode: "cors",
// }); // });
// const data1 = await res1.json(); // const data1 = await res1.json();
// const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/kick", { // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/kick", {
// method: "POST", // method: "POST",
// mode: "cors", // mode: "cors",
@ -138,14 +135,13 @@
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
const muteUser = async (username : string) => { const muteUser = async (username: string) => {
// use minutes prompt to determine mute duration // use minutes prompt to determine mute duration
// const prompt = window.prompt("Enter mute duration in seconds"); // const prompt = window.prompt("Enter mute duration in seconds");
// const res1 = await fetch(API_URL + "/user/" + username, { // const res1 = await fetch(API_URL + "/user/" + username, {
// mode: "cors", // mode: "cors",
// }); // });
// const data1 = await res1.json(); // const data1 = await res1.json();
// const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/mute", { // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/mute", {
// method: "POST", // method: "POST",
// mode: "cors", // mode: "cors",
@ -160,12 +156,11 @@
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
const adminUser = async (username : string) => { const adminUser = async (username: string) => {
// const res1 = await fetch(API_URL + "/user/" + username, { // const res1 = await fetch(API_URL + "/user/" + username, {
// mode: "cors", // mode: "cors",
// }); // });
// const data1 = await res1.json(); // const data1 = await res1.json();
// const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/admin", { // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/admin", {
// method: "POST", // method: "POST",
// mode: "cors", // mode: "cors",
@ -180,12 +175,11 @@
//--------------------------------------------------------------------------------/ //--------------------------------------------------------------------------------/
const removeAdminUser = async (username : string) => { const removeAdminUser = async (username: string) => {
// const res1 = await fetch(API_URL + "/user/" + username, { // const res1 = await fetch(API_URL + "/user/" + username, {
// mode: "cors", // mode: "cors",
// }); // });
// const data1 = await res1.json(); // const data1 = await res1.json();
// const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/admin", { // const res2 = await fetch(API_URL + "/chat/channels/" + data1.ftId + "/admin", {
// method: "DELETE", // method: "DELETE",
// mode: "cors", // mode: "cors",
@ -246,9 +240,7 @@
</li> </li>
<li> <li>
<!-- block only if not blocked --> <!-- block only if not blocked -->
<button on:click={() => blockUser(selectedUser)} <button on:click={() => blockUser(selectedUser)}>Block User</button>
>Block User</button
>
</li> </li>
<li><button on:click={closeProfileMenu}>Close</button></li> <li><button on:click={closeProfileMenu}>Close</button></li>
</ul> </ul>
@ -277,11 +269,22 @@
<p> <p>
{member.username} {member.username}
<button on:click={() => banUser(member.username)}>ban</button> <button on:click={() => banUser(member.username)}>ban</button>
<button on:click={() => kickUser(member.username)}>kick</button> <button on:click={() => kickUser(member.username)}
<button on:click={() => muteUser(member.username)}>mute</button> >kick</button
<button on:click={() => adminUser(member.username)}>promote</button> >
<button on:click={() => removeAdminUser(member.username)}>demote</button> <button on:click={() => muteUser(member.username)}
<p> ----------------------------------------------------------------------------------- </p> >mute</button
>
<button on:click={() => adminUser(member.username)}
>promote</button
>
<button on:click={() => removeAdminUser(member.username)}
>demote</button
>
</p>
<p>
-----------------------------------------------------------------------------------
</p>
</li> </li>
{/each} {/each}
</ul> </ul>

7
front/volume/src/components/Pong/Game.ts

@ -62,11 +62,14 @@ export class Game {
data.ballSize data.ballSize
); );
const paddle1: Paddle = new Paddle( const paddle1: Paddle = new Paddle(
new Point(data.playerXOffset, this.canvas.height / 2), new Point(data.paddleSize.x / 2, this.canvas.height / 2),
data.paddleSize data.paddleSize
); );
const paddle2: Paddle = new Paddle( const paddle2: Paddle = new Paddle(
new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2), new Point(
this.canvas.width - data.paddleSize.x / 2,
this.canvas.height / 2
),
data.paddleSize data.paddleSize
); );
this.players = [new Player(paddle1), new Player(paddle2)]; this.players = [new Player(paddle1), new Player(paddle2)];

13
front/volume/src/components/Pong/Paddle.ts

@ -1,3 +1,4 @@
import { DEFAULT_MAP_SIZE } from "./constants";
import { Point, Rect } from "./utils"; import { Point, Rect } from "./utils";
export class Paddle { export class Paddle {
@ -8,7 +9,17 @@ export class Paddle {
} }
draw(context: CanvasRenderingContext2D, color: string) { draw(context: CanvasRenderingContext2D, color: string) {
this.rect.draw(context, color); let offset: number;
if (this.rect.center.x < DEFAULT_MAP_SIZE.x / 2) {
offset = this.rect.size.x / 3;
} else {
offset = -(this.rect.size.x / 3);
}
const render_rect: Rect = new Rect(
new Point(this.rect.center.x + offset, this.rect.center.y),
new Point(this.rect.size.x / 3, this.rect.size.y)
);
render_rect.draw(context, "yellow");
} }
move(e: MouseEvent) { move(e: MouseEvent) {

5
front/volume/src/components/Pong/constants.ts

@ -13,9 +13,10 @@ export const GAME_EVENTS = {
}; };
export const DEFAULT_MAP_SIZE = new Point(500, 400); export const DEFAULT_MAP_SIZE = new Point(500, 400);
export const DEFAULT_PADDLE_SIZE = new Point(6, 30); export const DEFAULT_PADDLE_SIZE = new Point(30, 50);
export const DEFAULT_BALL_SIZE = new Point(10, 10); export const DEFAULT_BALL_SIZE = new Point(10, 10);
export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2); export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2);
export const DEFAULT_PLAYER_X_OFFSET = 50; export const DEFAULT_MAX_BALL_SPEED = new Point(30, 20);
export const DEFAULT_BALL_SPEED_INCREMENT = new Point(0.05, 0);
export const DEFAULT_WIN_SCORE = 5; export const DEFAULT_WIN_SCORE = 5;
export const GAME_TICKS = 30; export const GAME_TICKS = 30;

1
front/volume/src/components/Pong/dtos/GameInfo.ts

@ -6,7 +6,6 @@ export class GameInfo {
gameId!: string; gameId!: string;
walls!: Rect[]; walls!: Rect[];
paddleSize!: Point; paddleSize!: Point;
playerXOffset!: number;
ballSize!: Point; ballSize!: Point;
winScore!: number; winScore!: number;
ranked!: boolean; ranked!: boolean;

Loading…
Cancel
Save