michel/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

welp I guess we're done

Browse Source
This commit is contained in:
AdrienLSH 2023-12-12 15:58:50 +01:00
parent ca6dba2763
commit 754e5867f2
1 changed files with 79 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/static/js/views/Game.js
View File

@ -35,6 +35,7 @@ export default class extends AbstractView {
if (!this.game)
return;
document.getElementById('app').removeChild(this.game.canvas);
document.getElementById('app').removeChild(this.game.scoresDisplay);
this.game.cleanup();
this.game = null;
document.getElementById('startGameButton').innerHTML = 'Start Game';
@ -44,7 +45,7 @@ export default class extends AbstractView {
class Game {
constructor() {
//Global variables
this.globVars = {
this.def = {
CANVASHEIGHT: 270,
CANVASWIDTH: 480,
PADDLEHEIGHT: 70,
@ -53,29 +54,39 @@ class Game {
PADDLESPEED: 3,
BALLRADIUS: 5,
BALLSPEED: 2,
MAXBOUNCEANGLE: 10 * (Math.PI / 12)
BALLSPEEDINCR: 0.15,
MAXBOUNCEANGLE: 10 * (Math.PI / 12),
MAXSCORE: 6
};
this.canvas = document.createElement('canvas');
this.canvas.id = 'gameCanvas';
this.canvas.width = this.globVars.CANVASWIDTH;
this.canvas.height = this.globVars.CANVASHEIGHT;
this.canvas.width = this.def.CANVASWIDTH;
this.canvas.height = this.def.CANVASHEIGHT;
this.canvas.style.border = '1px solid #d3d3d3';
this.canvas.style.backgroundColor = '#f1f1f1';
this.context = this.canvas.getContext('2d');
document.getElementById('app').appendChild(this.canvas);
this.scoresDisplay = document.createElement('p');
this.scoresDisplay.innerHTML = 'Scores: 0 - 0';
document.getElementById('app').appendChild(this.scoresDisplay);
this.paddles = [
new Paddle(this.context,
this.globVars.PADDLEMARGIN,
this.globVars
),
new Paddle(this.context,
this.globVars.CANVASWIDTH - this.globVars.PADDLEMARGIN - this.globVars.PADDLEWIDTH,
this.globVars
)
this.players = [
{
paddle: new Paddle(this.context,
this.def.PADDLEMARGIN,
this.def),
score: 0
},
{
paddle: new Paddle(this.context,
this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH,
this.def),
score: 0
}
];
this.ball = new Ball(this.context, this.globVars);
this.ballStartSide = 0;
this.ball = new Ball(this.context, this.def, this.ballStartSide);
this.interval = setInterval(this.updateGame.bind(this), 10);
@ -90,6 +101,7 @@ class Game {
clearInterval(this.interval);
document.removeEventListener('keydown', this.keyDownHandler);
document.removeEventListener('keyup', this.keyUpHandler);
this.canvas.style.display = 'none';
}
clear() {
@ -97,30 +109,32 @@ class Game {
}
updateGame() {
if (this.keys.includes('Escape'))
this.cleanup();
//Paddle movement
if (this.keys.includes('s') &&
this.paddles[0].y + this.globVars.PADDLEHEIGHT < this.globVars.CANVASHEIGHT - this.globVars.PADDLEMARGIN)
this.paddles[0].y += this.globVars.PADDLESPEED;
this.players[0].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
this.players[0].paddle.y += this.def.PADDLESPEED;
if (this.keys.includes('w') &&
this.paddles[0].y > 0 + this.globVars.PADDLEMARGIN)
this.paddles[0].y -= this.globVars.PADDLESPEED;
this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
this.players[0].paddle.y -= this.def.PADDLESPEED;
if (this.keys.includes('ArrowDown') &&
this.paddles[1].y + this.globVars.PADDLEHEIGHT < this.globVars.CANVASHEIGHT - this.globVars.PADDLEMARGIN)
this.paddles[1].y += this.globVars.PADDLESPEED;
this.players[1].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
this.players[1].paddle.y += this.def.PADDLESPEED;
if (this.keys.includes('ArrowUp') &&
this.paddles[1].y > 0 + this.globVars.PADDLEMARGIN)
this.paddles[1].y -= this.globVars.PADDLESPEED;
this.players[1].paddle.y > 0 + this.def.PADDLEMARGIN)
this.players[1].paddle.y -= this.def.PADDLESPEED;
//GOOAAAAL
if (this.ball.x <= 0)
this.updateScore(this.players[0].score, ++this.players[1].score);
else if (this.ball.x >= this.def.CANVASWIDTH)
this.updateScore(++this.players[0].score, this.players[1].score);
//Ball collisions
if (this.detectCollision(this.paddles[0], this.ball))
this.calculateBallVelocity(this.paddles[0].getCenter().y, this.ball);
else if (this.detectCollision(this.paddles[1], this.ball))
this.calculateBallVelocity(this.paddles[1].getCenter().y, this.ball, -1);
if (this.detectCollision(this.players[0].paddle, this.ball))
this.calculateBallVelocity(this.players[0].paddle.getCenter().y, this.ball);
else if (this.detectCollision(this.players[1].paddle, this.ball))
this.calculateBallVelocity(this.players[1].paddle.getCenter().y, this.ball, -1);
if (this.ball.y - this.ball.radius <= 0)
this.ball.vy *= -1;
@ -130,11 +144,26 @@ class Game {
this.ball.y += this.ball.vy;
this.clear();
this.paddles[0].update();
this.paddles[1].update();
this.players[0].paddle.update();
this.players[1].paddle.update();
this.ball.update();
}
updateScore(p1Score, p2Score) {
if (p1Score > this.def.MAXSCORE) {
this.scoresDisplay.innerHTML = 'Player 1 wins!! GGS';
this.cleanup();
}
else if (p2Score > this.def.MAXSCORE) {
this.scoresDisplay.innerHTML = 'Player 2 wins!! GGS';
this.cleanup();
} else {
this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;
this.ballStartSide = 1 - this.ballStartSide;
this.ball = new Ball(this.context, this.def, this.ballStartSide);
}
}
detectCollision(paddle, ball) {
let paddleCenter = paddle.getCenter();
let dx = Math.abs(ball.x - paddleCenter.x);
@ -147,11 +176,12 @@ class Game {
calculateBallVelocity(paddleCenterY, ball, side = 1) {
let relativeIntersectY = paddleCenterY - ball.y;
let normRelIntersectY = relativeIntersectY / this.globVars.PADDLEHEIGHT / 2;
let bounceAngle = normRelIntersectY * this.globVars.MAXBOUNCEANGLE;
let normRelIntersectY = relativeIntersectY / this.def.PADDLEHEIGHT / 2;
let bounceAngle = normRelIntersectY * this.def.MAXBOUNCEANGLE;
ball.vx = this.globVars.BALLSPEED * side * Math.cos(bounceAngle);
ball.vy = this.globVars.BALLSPEED * -Math.sin(bounceAngle);
ball.speed += this.def.BALLSPEEDINCR;
ball.vx = ball.speed * side * Math.cos(bounceAngle);
ball.vy = ball.speed * -Math.sin(bounceAngle);
}
keyUpHandler(ev) {
@ -167,11 +197,11 @@ class Game {
}
class Paddle {
constructor(context, paddleSide, globVars) {
this.width = globVars.PADDLEWIDTH;
this.height = globVars.PADDLEHEIGHT;
constructor(context, paddleSide, def) {
this.width = def.PADDLEWIDTH;
this.height = def.PADDLEHEIGHT;
this.x = paddleSide;
this.y = globVars.CANVASHEIGHT / 2 - this.height / 2;
this.y = def.CANVASHEIGHT / 2 - this.height / 2;
this.ctx = context;
this.update();
}
@ -190,12 +220,16 @@ class Paddle {
}
class Ball {
constructor(context, globVars) {
this.radius = globVars.BALLRADIUS;
this.x = globVars.CANVASWIDTH / 2;
this.y = globVars.CANVASHEIGHT / 2;
this.vx = -globVars.BALLSPEED;
constructor(context, def, startSide) {
this.radius = def.BALLRADIUS;
this.speed = def.BALLSPEED;
this.x = def.CANVASWIDTH / 2;
this.y = def.CANVASHEIGHT / 2;
this.vy = 0;
if (startSide === 0)
this.vx = -this.speed;
else
this.vx = this.speed;
this.ctx = context;
this.update();
}