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