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

do u guys wanna see my balls ?

Browse Source
This commit is contained in:
AdrienLSH 2023-12-10 11:05:00 +01:00
parent 12056554fc
commit aa35514c44
1 changed files with 78 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,22 +10,41 @@ export default class extends AbstractView {
return ` return `
<h1>Game</h1> <h1>Game</h1>
<button id='startGameButton'>Start Game</button> <button id='startGameButton'>Start Game</button>
<button id='stopGameButton'>Stop Game</button>
`; `;
} }
async postInit() { async postInit() {
document.getElementById('startGameButton').onclick = this.startGame; document.getElementById('startGameButton').onclick = this.startGame.bind(this);
document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
} }
startGame() { startGame() {
if (this.game == null) if (this.game == null) {
document.getElementById('startGameButton').innerHTML = 'Reset Game';
this.game = new Game; this.game = new Game;
}
else {
document.getElementById('app').removeChild(this.game.canvas);
this.game.cleanup();
this.game = new Game;
}
}
stopGame() {
if (!this.game)
return;
document.getElementById('app').removeChild(this.game.canvas);
this.game.cleanup();
this.game = null;
document.getElementById('startGameButton').innerHTML = 'Start Game';
} }
} }
class Game { class Game {
constructor() { constructor() {
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.canvas.id = 'gameCanvas';
this.canvas.width = 480; this.canvas.width = 480;
this.canvas.height = 270; this.canvas.height = 270;
this.canvas.style.border = '1px solid #d3d3d3'; this.canvas.style.border = '1px solid #d3d3d3';
@ -33,13 +52,22 @@ class Game {
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
this.paddle = new Paddle(this.context); this.paddle = new Paddle(this.context);
this.ball = new Ball(this.context);
document.getElementById('app').appendChild(this.canvas); document.getElementById('app').appendChild(this.canvas);
this.interval = setInterval(this.updateGame.bind(this), 10); this.interval = setInterval(this.updateGame.bind(this), 10);
this.keys = []; this.keys = [];
document.addEventListener('keydown', this.keyDownHandler.bind(this)); this.keyUpHandler = this.keyUpHandler.bind(this);
document.addEventListener('keyup', this.keyUpHandler.bind(this)); this.keyDownHandler = this.keyDownHandler.bind(this);
document.addEventListener('keydown', this.keyDownHandler);
document.addEventListener('keyup', this.keyUpHandler);
}
cleanup() {
clearInterval(this.interval);
document.removeEventListener('keydown', this.keyDownHandler);
document.removeEventListener('keyup', this.keyUpHandler);
} }
clear() { clear() {
@ -47,13 +75,34 @@ class Game {
} }
updateGame() { updateGame() {
if (this.keys.includes('s'))
this.paddle.y += 3; if (this.keys.includes('Escape'))
if (this.keys.includes('w')) this.cleanup();
this.paddle.y -= 3;
if (this.keys.includes('s') &&
this.paddle.y + this.paddle.height < this.canvas.height - this.paddle.x)
this.paddle.y += this.paddle.speed;
if (this.keys.includes('w') &&
this.paddle.y > 0 + this.paddle.x)
this.paddle.y -= this.paddle.speed;
if (this.ball.x - this.ball.radius <= this.paddle.x + this.paddle.width
&& (this.ball.y >= this.paddle.y && this.ball.y <= this.paddle.y + this.paddle.height))
this.ball.vx *= -1;
if (this.ball.x - this.ball.radius <= 0)
this.ball.vx *= -1;
else if (this.ball.x + this.ball.radius >= this.canvas.width)
this.ball.vx *= -1;
if (this.ball.y - this.ball.radius <= 0)
this.ball.vy *= -1;
else if (this.ball.y + this.ball.radius >= this.canvas.height)
this.ball.vy *= -1;
this.ball.x += this.ball.vx;
this.ball.y += this.ball.vy;
this.clear(); this.clear();
this.paddle.update(); this.paddle.update();
this.ball.update();
} }
keyUpHandler(ev) { keyUpHandler(ev) {
@ -63,7 +112,7 @@ class Game {
} }
keyDownHandler(ev) { keyDownHandler(ev) {
if (this.keys.indexOf(ev.key) == -1) if (!this.keys.includes(ev.key))
this.keys.push(ev.key); this.keys.push(ev.key);
} }
} }
@ -74,6 +123,7 @@ class Paddle {
this.height = 70; this.height = 70;
this.x = 5; this.x = 5;
this.y = 100; this.y = 100;
this.speed = 3;
this.ctx = context; this.ctx = context;
this.update(); this.update();
} }
@ -83,3 +133,22 @@ class Paddle {
this.ctx.fillRect(this.x, this.y, this.width, this.height); this.ctx.fillRect(this.x, this.y, this.width, this.height);
} }
} }
class Ball {
constructor(context) {
this.radius = 5;
this.x = 240;
this.y = 135;
this.vx = 2;
this.vy = 2;
this.ctx = context;
this.update();
}
update() {
this.ctx.fillStyle = 'black';
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
this.ctx.fill();
}
}