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 :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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.#createWall(-3.5, 0.4, -length/2, "wallLeft"));
scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
if (obstacles)
this.#generateObstacle();
// if (obstacles)
// this.#generateObstacle();
{ // A retirer
/* Style de couleur why not
@ -273,6 +273,7 @@ class Map
for (let i = 0; i < this.arrObject.length; i++)
{
console.log(name);
if (this.arrObject[i].name == name)
throw Error("Name already exist.");
}
@ -820,7 +821,7 @@ class Map
{
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++;
}
else if (listObject[i].type == 2)
@ -828,13 +829,23 @@ class Map
}
}
activeJumper(index)
activeJumper(name)
{
ball.changeGravity();
if (this.arrObject[index].isUp)
this.#animationGravityChanger(this.arrObject[index].mesh, true);
else
this.#animationGravityChanger(this.arrObject[index].mesh, false);
for (let i = 0; this.arrObject && i < this.arrObject.length; i++)
{
console.log("/////////////");
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()
@ -884,9 +895,9 @@ class Map
// 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)
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;
// Change the opacity of the wall
let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1;
if (diff > 2)
@ -899,7 +910,7 @@ class Map
// 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)
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;
// Change the opacity of the wall
@ -1002,6 +1013,23 @@ class Map
}, 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)
{
this.#clearAnimationGoal();
@ -1010,6 +1038,7 @@ class Map
this.updateScore(name, this.score);
player.reserCameraPlayer();
this.resetPosWalls();
ball.resetPosBall();
// player.resetPosPlayer();
// opponent.resetPosOpponent();

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Player.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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();
}, 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(() => {
if (0)
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);
map.animationGoal(this.object.position.x, this.object.position.y, this.object.position.z, this.playerGoalAnimation);
}, 1000);
///////////////////////
setTimeout(() => {
clearInterval(interval);
@ -215,11 +208,13 @@ class Player
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)';
setTimeout(() => {
document.getElementsByTagName('canvas')[canvasIndex].style.animation = null;
document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)';
}, 300)
setTimeout(() => {
tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
isOnPointAnim = true;
@ -233,11 +228,18 @@ class Player
tmpCamera.fov -= 0.05;
tmpCamera.updateProjectionMatrix();
}, 10);
setTimeout(() => {
map.animationGoal(this.opponent.object.position.x, this.opponent.object.position.y,
this.opponent.object.position.z, this.opponent.playerGoalAnimation);
}, 1000);
setTimeout(() => {
clearInterval(interval);
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)';
setTimeout(() => {
this.camera = tmp;
oppponentObject.material.color.copy(startColor);
@ -251,9 +253,9 @@ class Player
);
}
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)';
}, 200);
}, 400);
}, 4000);
}, 200)
}

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* typeGame.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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)
map.placeObject(content);
else if (content.action == 8 && pageRenderer.actualPage == MultiOnlineGamePage)
map.activeJumper(content.index);
map.activeJumper(content.name);
}
export { typeGame };