tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game

Browse Source 
- ball trail change color with speed
    = add goal id for opponnent
This commit is contained in:
Kum1ta
2024-10-11 11:08:52 +02:00
parent 0b58783565
commit be60de564a
6 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/10/07 14:10:52 by edbernar ### ########.fr */
/* Updated: 2024/10/11 10:43:04 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -287,11 +287,9 @@ class Ball
this.updateTrail();
}
updateTrail()
{
updateTrail() {
const trailColors = trailGeometry.attributes.customColor.array;
for (let i = trailPositions.length - 3; i >= 3; i--)
trailPositions[i] = trailPositions[i - 3];
trailPositions[0] = this.object.position.x;
@ -300,19 +298,35 @@ class Ball
for (let i = 0; i < 33; i++)
trailSizes[i] = Math.max(0.5 * (1 - i / 33), 0.1);
const velocityMagnitude = Math.sqrt(
this.srvPos.vel[0] * this.srvPos.vel[0] +
this.srvPos.vel[1] * this.srvPos.vel[1]
);
// Normalisation de la vitesse entre 0 (lente) et 1 (rapide)
const speedFactor = Math.min(velocityMagnitude / 10, 1); // Divisé par 10 pour ajuster l'échelle
for (let i = 0; i < 33; i++) {
const alpha = Math.max(1 - i / 33, 0);
trailColors[i * 4] = 1.0 / Math.max(this.srvPos.vel[0] < 0 ? - this.srvPos.vel[0] : this.srvPos.vel[0], 0.3);
trailColors[i * 4 + 1] = 1.0 / Math.max(this.srvPos.vel[1] < 0 ? - this.srvPos.vel[1] : this.srvPos.vel[1], 0.3);
trailColors[i * 4 + 2] = 1.0 / Math.max((this.srvPos.vel[0] < 0 ? - this.srvPos.vel[0] : this.srvPos.vel[0]) + this.srvPos.vel[1] < 0 ? - this.srvPos.vel[1] : this.srvPos.vel[1], 0.3);
// Couleur entre blanc et rouge selon la vitesse
const r = 1; // Rouge maximum
const g = 1 - speedFactor; // Moins de vert avec l'augmentation de la vitesse
const b = 1 - speedFactor; // Moins de bleu avec l'augmentation de la vitesse
// Appliquer la couleur
trailColors[i * 4] = r;
trailColors[i * 4 + 1] = g;
trailColors[i * 4 + 2] = b;
trailColors[i * 4 + 3] = alpha;
}
// Marquer les attributs comme nécessitant une mise à jour
trailGeometry.attributes.position.needsUpdate = true;
trailGeometry.attributes.size.needsUpdate = true;
trailGeometry.attributes.customColor.needsUpdate = true;
}
dispose()
{

8
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/10/10 13:46:36 by edbernar ### ########.fr */
/* Updated: 2024/10/11 11:08:30 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -87,9 +87,7 @@ class Player
pressedButton = [];
console.log(layoutSelected);
key = {up: layoutSelected.US ? "w" : "z", down: "s", left: layoutSelected.US ? "a" : "q", right: "d"};
console.warn("Remettre opponentGoal = availableGoals[goalIdOppenent] qaund le serveur le permettra");
this.opponentGoal = availableGoals[0];
// opponentGoal = availableGoals[goalIdOppenent];
this.opponentGoal = availableGoals[goalIdOppenent];
this.object = object;
this.limits = map.playerLimits;
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
@ -266,8 +264,6 @@ class Player
tmpCamera.fov -= 0.05;
tmpCamera.updateProjectionMatrix();
}, 10);
console.log("Oppenent : " + this.opponentGoal);
setTimeout(() => {
map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y, this.opponent.object.position.z, this.opponent.playerGoalAnimation, this.opponentGoal);
}, 1000);

5
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/10/10 13:47:22 by edbernar ### ########.fr */
/* Updated: 2024/10/11 10:56:51 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -86,6 +86,7 @@ class MultiOnlineGamePage
{
static create(skin)
{
console.log('skin', skin);
if (!skin)
{
skin = {player: 4, opponent: 0};
@ -108,7 +109,7 @@ class MultiOnlineGamePage
vrMode();
opponent = new Opponent(bar2, map, Math.floor(Math.random() * 100 % 6));
player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6), skin.goalId);
player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6), skin.opponentGoaldId);
spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
spotLight.castShadow = true;
ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);