starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

game: core: use draw method instead draw_CLASSNAME

Browse Source
This commit is contained in:
starnakin 2024-01-16 23:27:56 +01:00
parent 516ccdc297
commit e0990db8d1
5 changed files with 128 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/static/js/api/game/Ball.js
View File

@ -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;

49
frontend/static/js/api/game/Game.js
View File

@ -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)

4
frontend/static/js/api/game/MyPlayer.js
View File

@ -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;
}

35
frontend/static/js/api/game/Player.js
View File

@ -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 }

77
frontend/static/js/views/GameView.js
View File

@ -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