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 `
<h1>Game</h1>
<button id='startGameButton'>Start Game</button>
<button id='stopGameButton'>Stop Game</button>
`;
}
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() {
if (this.game == null)
if (this.game == null) {
document.getElementById('startGameButton').innerHTML = 'Reset 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 {
constructor() {
this.canvas = document.createElement('canvas');
this.canvas.id = 'gameCanvas';
this.canvas.width = 480;
this.canvas.height = 270;
this.canvas.style.border = '1px solid #d3d3d3';
@ -33,13 +52,22 @@ class Game {
this.context = this.canvas.getContext('2d');
this.paddle = new Paddle(this.context);
this.ball = new Ball(this.context);
document.getElementById('app').appendChild(this.canvas);
this.interval = setInterval(this.updateGame.bind(this), 10);
this.keys = [];
document.addEventListener('keydown', this.keyDownHandler.bind(this));
document.addEventListener('keyup', this.keyUpHandler.bind(this));
this.keyUpHandler = 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() {
@ -47,13 +75,34 @@ class Game {
}
updateGame() {
if (this.keys.includes('s'))
this.paddle.y += 3;
if (this.keys.includes('w'))
this.paddle.y -= 3;
if (this.keys.includes('Escape'))
this.cleanup();
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.paddle.update();
this.ball.update();
}
keyUpHandler(ev) {
@ -63,7 +112,7 @@ class Game {
}
keyDownHandler(ev) {
if (this.keys.indexOf(ev.key) == -1)
if (!this.keys.includes(ev.key))
this.keys.push(ev.key);
}
}
@ -74,6 +123,7 @@ class Paddle {
this.height = 70;
this.x = 5;
this.y = 100;
this.speed = 3;
this.ctx = context;
this.update();
}
@ -83,3 +133,22 @@ class Paddle {
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();
}
}