diff --git a/frontend/static/js/api/game/Ball.js b/frontend/static/js/api/game/Ball.js index 59dd121..b29165b 100644 --- a/frontend/static/js/api/game/Ball.js +++ b/frontend/static/js/api/game/Ball.js @@ -2,7 +2,46 @@ class Ball { - constructor (position_x, position_y, velocity_x, velocity_y) + constructor(game) + { + this.game = game; + this.position_x = game.config.size_x / 2; + this.position_y = game.config.size_y / 2; + this.velocity_x = game.config.ball_speed_start; + this.velocity_y = game.config.ball_speed_start; + } + + _collision(old_pos_x, old_pos_y, new_pos_x, new_pos_y) + { + + return 0; + } + + draw(ctx) + { + ctx.rect(this.position_x, this.position_y, this.game.config.ball_size, this.game.config.ball_size); + } + + render() + { + new_pos_x = this.position_x + this.velocity_x * this.game.time.deltaTime(); + new_pos_y = this.position_y + this.velocity_y * this.game.time.deltaTime(); + + if (this._collision(this.position_x, this.position_y, new_pos_x, new_pos_y)) + { + this.velocity_x = -this.velocity_x; + this.velocity_y = -this.velocity_y; + new_pos_x = this.position_x + this.velocity_x * this.game.time.deltaTime(); + new_pos_y = this.position_y + this.velocity_y * this.game.time.deltaTime(); + } + this.position_x = new_pos_x + this.position_y = new_pos_y + + this.velocity_x = this.velocity_x + this.game.config.ball_speed_inc; + this.velocity_y = this.velocity_y + this.game.config.ball_speed_inc; + } + + update (position_x, position_y, velocity_x, velocity_y) { this.position_x = position_x; this.position_y = position_y; diff --git a/frontend/static/js/api/game/Game.js b/frontend/static/js/api/game/Game.js index 4d2cce3..071fc16 100644 --- a/frontend/static/js/api/game/Game.js +++ b/frontend/static/js/api/game/Game.js @@ -45,15 +45,60 @@ class Game this.players = []; response_data.players_id.forEach(player_id => { - let player = new Player(player_id, 0.5, 0, this); + let player = new Player(player_id, 0.5, 0, this, 0, 0, 0, 0); this.players.push(player); }); - this.ball = new Ball(response_data.ball_pos_x, response_data.ball_pos_y, response_data.ball_vel_x, response_data.ball_vel_y); + this.ball = new Ball(this); return 0; } + draw_wall(ctx, stop_x, stop_y) + { + ctx.lineTo(stop_x, stop_y); + } + + draw_sides(ctx, nb_sides) + { + let start_x, + start_y, + stop_x, + stop_y; + + let radius = Math.min(this.config.size_x, this.config.size_y) / 2 - 10; + + for (let i = 0; i <= nb_sides; i++) + { + let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI * 3 / 4); + + stop_x = this.config.center_x + radius * Math.cos(angle); + stop_y = this.config.center_y + radius * Math.sin(angle); + + if (i == 0) + ctx.moveTo(stop_x, start_y); + if (i % 2 == 0) + this.draw_wall(ctx, stop_x, stop_y); + else + this.players[(i - 1) / 2].draw(ctx); + start_x = stop_x; + start_y = stop_y; + } + } + + draw(ctx) + { + ctx.beginPath() + + ctx.clearRect(0, 0, this.config.size_x, this.config.size_y); + this.draw_sides(ctx, (this.players_id.length) * 2); + this.ball.draw(ctx); + + ctx.strokeStyle = "#000000"; + ctx.lineWidth = 10; + ctx.stroke(); + } + _send(data) { if (this._socket === undefined) diff --git a/frontend/static/js/api/game/MyPlayer.js b/frontend/static/js/api/game/MyPlayer.js index caff0a8..64e3d98 100644 --- a/frontend/static/js/api/game/MyPlayer.js +++ b/frontend/static/js/api/game/MyPlayer.js @@ -3,9 +3,9 @@ import { Player } from "./Player.js"; class MyPlayer extends Player { - constructor(client, pos, nb_goal, game, time) + constructor(client, pos, nb_goal, game, time, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y) { - super(client.me.id, pos, nb_goal, game); + super(client.me.id, pos, nb_goal, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y); this.time = time; this.client = client; } diff --git a/frontend/static/js/api/game/Player.js b/frontend/static/js/api/game/Player.js index bc555c9..e8f75ff 100644 --- a/frontend/static/js/api/game/Player.js +++ b/frontend/static/js/api/game/Player.js @@ -1,18 +1,51 @@ class Player { - constructor(id, pos, nb_goal, game) + constructor(id, pos, nb_goal, game, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y) { this.id = id; this.pos = pos; this.nb_goal = nb_goal; this.game = game; + + this.rail_start_x = rail_start_x; + this.rail_start_y = rail_start_y; + this.rail_stop_x = rail_stop_x; + this.rail_stop_y = rail_stop_y; + + this.rail_size = Math.abs(this.rail_stop_x - this.rail_start_x) + Math.abs(this.rail_stop_y - this.rail_start_y) + + this.paddle_size = this.rail_size * this.game.config.paddle_ratio; + + this.diff_x = this.rail_stop_x - this.rail_start_x, + this.diff_y = this.rail_stop_y - this.rail_start_y; } update_pos(new_position, time) { this.pos = new_position; } + + draw(ctx) + { + let paddle_pos_x = this.rail_start_x + this.diff_x * this.pos, + paddle_pos_y = this.rail_start_y + this.diff_y * this.pos; + + console.log(this) + + let start_x = paddle_pos_x - (this.diff_x * (this.paddle_size / 2 / this.rail_size)), + start_y = paddle_pos_y - (this.diff_y * (this.paddle_size / 2 / this.rail_size)), + stop_x = paddle_pos_x + (this.diff_x * (this.paddle_size / 2 / this.rail_size)), + stop_y = paddle_pos_y + (this.diff_y * (this.paddle_size / 2 / this.rail_size)); + + console.log(start_x, stop_x); + console.log(start_y, stop_y) + + ctx.moveTo(start_x, start_y); + ctx.lineTo(stop_x, stop_y); + + ctx.moveTo(this.rail_stop_x, this.rail_stop_y); + } } export { Player } \ No newline at end of file diff --git a/frontend/static/js/views/GameView.js b/frontend/static/js/views/GameView.js index e6efb07..8bfcddd 100644 --- a/frontend/static/js/views/GameView.js +++ b/frontend/static/js/views/GameView.js @@ -3,6 +3,7 @@ import { Game } from "../api/game/Game.js"; import AbstractView from "./abstracts/AbstractView.js"; import { Time } from "../api/game/Time.js"; import { MyPlayer } from "../api/game/MyPlayer.js"; +import { Ball } from "../api/game/Ball.js"; export default class extends AbstractView { @@ -11,38 +12,10 @@ export default class extends AbstractView super(params, "Game"); this.game = new Game(client, params.id); this.keys_pressed = []; - this.time = new Time() + this.time = new Time(); this.my_player = undefined; } - draw_wall(ctx, stop_x, stop_y) - { - ctx.lineTo(stop_x, stop_y); - } - - draw_paddle(ctx, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, pos) - { - let rail_size = Math.abs(rail_stop_x - rail_start_x) + Math.abs(rail_stop_y - rail_start_y) - - let paddle_size = rail_size * this.game.config.paddle_ratio; - - let diff_x = rail_stop_x - rail_start_x, - diff_y = rail_stop_y - rail_start_y; - - let paddle_pos_x = rail_start_x + diff_x * pos, - paddle_pos_y = rail_start_y + diff_y * pos; - - let start_x = paddle_pos_x - (diff_x * (paddle_size / 2 / rail_size)), - start_y = paddle_pos_y - (diff_y * (paddle_size / 2 / rail_size)), - stop_x = paddle_pos_x + (diff_x * (paddle_size / 2 / rail_size)), - stop_y = paddle_pos_y + (diff_y * (paddle_size / 2 / rail_size)); - - ctx.moveTo(start_x, start_y); - ctx.lineTo(stop_x, stop_y); - - ctx.moveTo(rail_stop_x, rail_stop_y); - } - keyStretchHandler(event) { const idx = this.keys_pressed.indexOf(event.key); @@ -56,51 +29,11 @@ export default class extends AbstractView this.keys_pressed.push(event.key); } - draw_ball(ctx, x, y) - { - ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size); - } - - draw_sides(ctx, nb_sides) - { - let start_x, - start_y, - stop_x, - stop_y; - - let radius = Math.min(this.game.config.size_x, this.game.config.size_y) / 2 - 10; - - for (let i = 0; i <= nb_sides; i++) - { - let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI * 3 / 4); - - stop_x = this.game.config.center_x + radius * Math.cos(angle); - stop_y = this.game.config.center_y + radius * Math.sin(angle); - - if (i == 0) - ctx.moveTo(stop_x, start_y); - if (i % 2 == 0) - this.draw_wall(ctx, stop_x, stop_y); - else - this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, this.game.players[(i - 1) / 2].pos); - start_x = stop_x; - start_y = stop_y; - } - } - - draw_game() + draw() { let ctx = document.getElementById('canva').getContext('2d'); - ctx.beginPath() - - ctx.clearRect(0, 0, this.game.config.size_x, this.game.config.size_y); - this.draw_sides(ctx, (this.game.players_id.length) * 2); - this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y); - - ctx.strokeStyle = "#000000"; - ctx.lineWidth = 10; - ctx.stroke(); + this.game.draw(ctx); } render_game() @@ -108,7 +41,7 @@ export default class extends AbstractView let loop_id = setInterval(() => { if (this.my_player) this.my_player.update_paddle(this.keys_pressed); - this.draw_game(); + this.draw(); this.time.new_frame(); //clearInterval(loop_id); // 1 sec fps