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
Download Patch File Download Diff File Expand all files Collapse all files

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