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

Game multi - Fix side wall - Fix jumper animation - Fix fondu animation goal player/opponent

Browse Source
This commit is contained in:
Hugo Bourgeon
2024-09-27 18:28:15 +02:00
parent ea23b45b87
commit 9650f0d390
3 changed files with 60 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Map.js :+: :+: :+: */ /* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/09/27 13:44:33 by edbernar ### ########.fr */ /* Updated: 2024/09/27 18:21:20 by hubourge ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -145,8 +145,8 @@ class Map
scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/static/img/multiOnlineGamePage/pastel.jpg')); scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/static/img/multiOnlineGamePage/pastel.jpg'));
scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft")); scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft"));
scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight")); scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
if (obstacles) // if (obstacles)
this.#generateObstacle(); // this.#generateObstacle();
{ // A retirer { // A retirer
/* Style de couleur why not /* Style de couleur why not
@ -273,6 +273,7 @@ class Map
for (let i = 0; i < this.arrObject.length; i++) for (let i = 0; i < this.arrObject.length; i++)
{ {
console.log(name);
if (this.arrObject[i].name == name) if (this.arrObject[i].name == name)
throw Error("Name already exist."); throw Error("Name already exist.");
} }
@ -820,7 +821,7 @@ class Map
{ {
if (listObject[i].type == 1) if (listObject[i].type == 1)
{ {
this.#createGravityChanger(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, "gravityChanger" + i, listObject[i].isUp ? "jumperTop" : "jumperBottom", listObject[i].isUp); this.#createGravityChanger(listObject[i].pos.x, listObject[i].pos.y, listObject[i].pos.z, listObject[i].name, listObject[i].isUp ? "jumperTop" : "jumperBottom", listObject[i].isUp);
nbJumper++; nbJumper++;
} }
else if (listObject[i].type == 2) else if (listObject[i].type == 2)
@ -828,13 +829,23 @@ class Map
} }
} }
activeJumper(index) activeJumper(name)
{ {
ball.changeGravity(); ball.changeGravity();
if (this.arrObject[index].isUp) for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
this.#animationGravityChanger(this.arrObject[index].mesh, true); {
else console.log("/////////////");
this.#animationGravityChanger(this.arrObject[index].mesh, false); console.log(this.arrObject[i].name);
console.log(name);
console.log("/////////////");
if (this.arrObject[i].name == name)
{
if (this.arrObject[i].name == "jumperTop")
this.#animationGravityChanger(this.arrObject[i].mesh, true);
else
this.#animationGravityChanger(this.arrObject[i].mesh, false);
}
}
} }
#generateObstacle() #generateObstacle()
@ -884,9 +895,9 @@ class Map
// Move the wall with the ball position // Move the wall with the ball position
if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35) if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35)
this.arrObject[i].mesh.position.z = ball.object.position.z; this.arrObject[i].mesh.position.z = ball.object.position.z;
if (ball.object.position.y > 0.4 + 0.1 && ball.object.position.y < 3.2) if (ball.object.position.y >= 0.3 && ball.object.position.y <= 3)
this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1; this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1;
// Change the opacity of the wall // Change the opacity of the wall
let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1; let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1;
if (diff > 2) if (diff > 2)
@ -899,7 +910,7 @@ class Map
// Move the wall with the ball position // Move the wall with the ball position
if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35) if (ball.object.position.z < this.mapLength / 2 - 0.35 && ball.object.position.z > -this.mapLength / 2 + 0.35)
this.arrObject[i].mesh.position.z = ball.object.position.z; this.arrObject[i].mesh.position.z = ball.object.position.z;
if (ball.object.position.y > 0.4 + 0.1 && ball.object.position.y < 3.2) if (ball.object.position.y >= 0.3 && ball.object.position.y <= 3)
this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1; this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1;
// Change the opacity of the wall // Change the opacity of the wall
@ -1002,6 +1013,23 @@ class Map
}, 200); }, 200);
} }
resetPosWalls()
{
for (let i = 0; i < this.arrObject.length; i++)
{
if (this.arrObject[i].type == "wallLeft")
{
this.arrObject[i].mesh.position.set(-3.5, 0.4, -length/2);
this.arrObject[i].mesh.material.opacity = 0.5;
}
else if (this.arrObject[i].type == "wallRight")
{
this.arrObject[i].mesh.position.set(3.5, 0.4, -length/2);
this.arrObject[i].mesh.material.opacity = 0.5;
}
}
}
reCreate(name) reCreate(name)
{ {
this.#clearAnimationGoal(); this.#clearAnimationGoal();
@ -1010,6 +1038,7 @@ class Map
this.updateScore(name, this.score); this.updateScore(name, this.score);
player.reserCameraPlayer(); player.reserCameraPlayer();
this.resetPosWalls();
ball.resetPosBall(); ball.resetPosBall();
// player.resetPosPlayer(); // player.resetPosPlayer();
// opponent.resetPosOpponent(); // opponent.resetPosOpponent();

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

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Player.js :+: :+: :+: */ /* Player.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/09/27 13:55:55 by edbernar ### ########.fr */ /* Updated: 2024/09/27 17:21:29 by hubourge ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -166,16 +166,9 @@ class Player
tmpCamera.updateProjectionMatrix(); tmpCamera.updateProjectionMatrix();
}, 10); }, 10);
///////////////////////
// Ici je souhaite savoir ou la camera est oriente : this.playerGoalAnimation soit this.opponent.playerGoalAnimation
// Egalement, l'animation se lance uniquement sur 1 seul client (celui qui a marque le point)
setTimeout(() => { setTimeout(() => {
if (0) map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation);
map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation);
else
map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.opponent.playerGoalAnimation);
}, 1000); }, 1000);
///////////////////////
setTimeout(() => { setTimeout(() => {
clearInterval(interval); clearInterval(interval);
@ -215,11 +208,13 @@ class Player
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300) }, 300)
setTimeout(() => { setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z); tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
isOnPointAnim = true; isOnPointAnim = true;
@ -233,11 +228,18 @@ class Player
tmpCamera.fov -= 0.05; tmpCamera.fov -= 0.05;
tmpCamera.updateProjectionMatrix(); tmpCamera.updateProjectionMatrix();
}, 10); }, 10);
setTimeout(() => {
map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y,
this.opponent.object.position.z, this.opponent.playerGoalAnimation);
}, 1000);
setTimeout(() => { setTimeout(() => {
clearInterval(interval); clearInterval(interval);
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.19s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => { setTimeout(() => {
this.camera = tmp; this.camera = tmp;
oppponentObject.material.color.copy(startColor); oppponentObject.material.color.copy(startColor);
@ -251,9 +253,9 @@ class Player
); );
} }
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.99s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 200); }, 400);
}, 4000); }, 4000);
}, 200) }, 200)
} }

6
docker-compose/requirements/nginx/static/javascript/typeResponse/typeGame.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* typeGame.js :+: :+: :+: */ /* typeGame.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */ /* Created: 2024/09/15 12:00:01 by edbernar #+# #+# */
/* Updated: 2024/09/25 13:38:28 by edbernar ### ########.fr */ /* Updated: 2024/09/27 17:56:06 by hubourge ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -32,7 +32,7 @@ function typeGame(content)
else if (content.action == 7 && pageRenderer.actualPage == MultiOnlineGamePage) else if (content.action == 7 && pageRenderer.actualPage == MultiOnlineGamePage)
map.placeObject(content); map.placeObject(content);
else if (content.action == 8 && pageRenderer.actualPage == MultiOnlineGamePage) else if (content.action == 8 && pageRenderer.actualPage == MultiOnlineGamePage)
map.activeJumper(content.index); map.activeJumper(content.name);
} }
export { typeGame }; export { typeGame };