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

game: add: vector colision (Not work)

Browse Source
This commit is contained in:
starnakin
2024-02-01 13:18:11 +01:00
committed by AdrienLSH
parent 3e4d52c645
commit 4b092b31bb
12 changed files with 260 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,33 +7,37 @@ class Ball
/**
*
* @param {Game} game
* @param {Number} position_x
* @param {Number} position_y
* @param {Number} velocity_x
* @param {Number} velocity_y
* @param {Point} position
* @param {Number} angle
* @param {Number} speed
* @param {Number} size
*/
constructor(game, position_x, position_y, velocity_x, velocity_y)
constructor(game, size, position, angle, speed)
{
/**
* @type {Game}
*/
this.game = game;
/**
* @type {Point}
*/
this.position = position === undefined ? new Point() : position;
/**
* @type {Number}
*/
this.position_x = position_x;
this.size = size;
/**
* @type {Number}
*/
this.position_y = position_y;
this.angle = angle;
/**
* @type {Number}
*/
this.velocity_x = velocity_x;
/**
* @type {Number}
*/
this.velocity_y = velocity_y;
this.speed = speed;
}
/**
@ -42,40 +46,35 @@ class Ball
*/
draw(ctx)
{
ctx.rect(this.position_x, this.position_y, this.game.config.ball_size, this.game.config.ball_size);
ctx.rect(this.position.x - this.size / 2, this.position.y - this.size / 2, this.game.config.ball_size, this.game.config.ball_size);
}
render()
/**
*
* @param {CanvasRenderingContext2D} ctx
*/
render(ctx)
{
/**
* @type {Number}
*/
let new_pos_x = this.position_x + this.velocity_x * this.game.time.deltaTime();
/**
* @type {Number}
*/
let new_pos_y = position_y + this.velocity_y * this.game.time.deltaTime();
let distance = this.speed * (this.game.time.deltaTime() / 1000)
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
let angle_radian = this.angle * Math.PI / 180
this.velocity_x = this.velocity_x + this.game.config.ball_speed_inc;
this.velocity_y = this.velocity_y + this.game.config.ball_speed_inc;
console.log(angle_radian)
this.position.x = this.position.x + distance * Math.cos(angle_radian);
this.position.y = this.position.y + distance * Math.sin(angle_radian);
this.draw(ctx);
}
update (position_x, position_y, velocity_x, velocity_y)
from_json (data)
{
this.position_x = position_x;
this.position_y = position_y;
this.velocity_x = velocity_x;
this.velocity_y = velocity_y;
this.position = this.position.from_json(data.position);
this.size = data.size;
this.angle = data.angle;
this.speed = data.speed;
return this
}
}

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

@ -4,6 +4,7 @@ import { GameConfig } from "./GameConfig.js"
import { Player } from "./Player.js";
import { Time } from "./Time.js";
import { Wall } from "./Wall.js";
import { Client } from "../client.js";
class Game
{
@ -21,7 +22,7 @@ class Game
/**
*
* @returns {Number}
* @returns {Promise<Number>}
*/
async init()
{
@ -32,23 +33,52 @@ class Game
let response_data = await response.json();
/**
* @type {[Number]}
*/
this.players_id = response_data.players_id;
/**
* @type {String}
*/
this.state = response_data.state;
/**
* @type {Boolean}
*/
this.started = response_data.started;
/**
* @type {Boolean}
*/
this.finished = response_data.finished;
/**
* @type {Number}
*/
this.winner_id = this.finished ? response_data.winner_id : undefined;
if (this.finished === true)
return 0;
/**
* @type {GameConfig}
*/
this.config = new GameConfig(this.client);
let ret = await this.config.init();
if (ret !== 0)
return ret;
/**
* @type {Time}
*/
this.time = new Time();
this.last_pos = null
/**
* @type {Boolean}
*/
this._inited = false;
return 0;
@ -72,11 +102,11 @@ class Game
*
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx)
render(ctx)
{
ctx.clearRect(0, 0, this.config.size_x, this.config.size_y);
this.draw_sides(ctx);
this.ball.draw(ctx);
this.ball.render(ctx);
}
_send(data)
@ -90,50 +120,25 @@ class Game
}
}
/**
* @param {Number} position
* @param {Number} time
*/
_send_paddle_position(position, time)
{
if (this.last_pos !== null && this.last_pos.time >= time)
return;
this.last_pos = {"time": time, "position": position};
this._send({"detail": "update_my_paddle_pos", ...this.last_pos});
}
_receive_player_join(player_data)
{
console.log(player_data)
let index = this.players.indexOf((player) => player.id === player_data.user_id);
this.players[index].is_connected = true;
}
_receive_player_leave(player_data)
{
let index = this.players.indexOf((player) => player.id === player_data.user_id);
this.players[index].is_connected = false;
}
_receive_update_ball(data)
{
this.ball.position_x = data.position_x
this.ball.position_y = data.position_y
this.ball.position_x = data.position_x
this.ball.position_x = data.position_x
this._send({"detail": "update_my_paddle_pos", ...{"time": time, "position": position}});
}
_receive_update_paddle(data)
{
let player = this.players.find((player) => player.id === data.user_id);
if (player === null)
{
this._receive_player_join(data);
return;
}
player.is_connected = data.is_connected;
player.update_pos(data.position.position, data.position.time);
player.from_json(data);
}
_receive_ball(data)
{
this.ball.from_json(data);
}
_receive(data)
@ -141,26 +146,30 @@ class Game
if (data.detail === "update_paddle")
this._receive_update_paddle(data);
else if (data.detail === "update_ball")
this._receive_update_ball(data);
this._receive_ball(data)
else if (data.detail === "init_game")
this._init_game(data)
else if (data.detail === "player_join")
this._receive_player_join(data)
else if (data.detail === "player_leave")
this._receive_player_leave(data)
this._init_game(data);
}
_init_game(data)
{
const ball_data = data.ball;
this.ball = new Ball(this, ball_data.position_x, ball_data.position_y, ball_data.velocity_x, ball_data.velocity_y);
/**
* @type {Ball}
*/
this.ball = (new Ball(this)).from_json(data.ball)
/**
* @type {[Wall]}
*/
this.walls = [];
const walls_data = data.walls;
walls_data.forEach((wall_data) => {
this.walls.push(new Wall().from_json(wall_data));
});
/**
* @type {[Player]}
*/
this.players = []
const players_data = data.players;
players_data.forEach((player_data) => {

5
frontend/static/js/api/game/GameConfig.js
View File

@ -24,14 +24,17 @@ class GameConfig
* @type {Number}
*/
this.size_x = response_data.MAP_SIZE_X;
/**
* @type {Number}
*/
this.size_y = response_data.MAP_SIZE_Y;
/**
* @type {Number}
*/
this.center_x = this.size_x / 2;
/**
* @type {Number}
*/
@ -63,10 +66,12 @@ class GameConfig
* @type {Number}
*/
this.ball_size = response_data.BALL_SIZE;
/**
* @type {Number}
*/
this.ball_spawn_x = this.center_x;
/**
* @type {Number}
*/

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

@ -17,7 +17,9 @@ class Time
deltaTime()
{
return (this._current_frame - this._last_frame) !== NaN ? this._current_frame - this._last_frame : 0;
if (this._last_frame === undefined)
return 0;
return (this._current_frame - this._last_frame);
}
deltaTimeSecond()

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

@ -26,7 +26,7 @@ export default class extends AbstractView
this.keys_pressed.push(event.key);
}
draw()
render_game()
{
const canva = document.getElementById('canva');
@ -40,22 +40,23 @@ export default class extends AbstractView
ctx.beginPath();
this.game.draw(ctx);
this.game.render(ctx);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 10;
ctx.lineWidth = 1;
ctx.stroke();
}
render_game()
render()
{
let loop_id = setInterval(() => {
if (this.game === undefined)
clearInterval(loop_id);
if (this.my_player)
this.my_player.update_paddle(this.keys_pressed);
this.draw();
this.render_game();
this.game?.time.new_frame();
//clearInterval(loop_id);
// 1 sec fps
}, 1000 / 60);
}
@ -99,7 +100,7 @@ export default class extends AbstractView
this.register_key()
this.render_game();
this.render();
}
async update_game_state()