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

Game multi - Add upScale player when touched Fix sideWall position and reset position - Fix goalAnimation orientation down or up - Change video banner resolution

Browse Source
This commit is contained in:
hubourge
2024-09-30 18:15:28 +02:00
parent a524af9947
commit e66434de87
6 changed files with 96 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docker-compose/requirements/nginx/static/javascript/multiLocalGame/multiLocalGamePage.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* multiLocalGamePage.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */
/* Updated: 2024/09/14 01:59:38 by edbernar ### ########.fr */
/* Updated: 2024/09/30 15:20:47 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -85,7 +85,6 @@ class multiLocalGamePage
}
scene = null;
}
};
function loop()

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Ball.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/09/30 13:58:31 by edbernar ### ########.fr */
/* Updated: 2024/09/30 16:06:58 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */

92
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/29 23:10:31 by edbernar ### ########.fr */
/* Updated: 2024/09/30 18:13:05 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -32,15 +32,9 @@ let contextTextScore = null;
let textureTextScore = null;
let animationSpeed = 0.02;
let animateGoalObjectUpdate = null;
let animateGoalObjectUp = false;
let path = [
{name: 'goal', onChoice: true, src: files.goalVideoPub},
{name: 'easteregg', onChoice: true, src: files.easterEggVideoPub},
{name: 'outstanding', onChoice: true, src: files.outstandingVideoPub},
{name: 'ping', onChoice: false, src: files.pingVideoPub},
{name: 'catch', onChoice: false, src: files.catchVideoPub},
{name: 'fortnite', onChoice: false, src: files.fortniteVideoPub},
]
let path = [];
const colorList = [
0xFFB3BA, 0xFFDFBA, 0xFFFFBA, 0xBAFFC9, 0xBAE1FF, // Pastel pink, peach, yellow, green, blue
@ -94,6 +88,7 @@ class Map
loader = null;
if (texturePlane)
texturePlane.dispose();
this.#clearScoreboard();
this.arrObject.forEach(elem => {
if (elem.mesh instanceof THREE.Group)
{
@ -136,9 +131,6 @@ class Map
scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, files.planeTexture));
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();
{ // A retirer
/* Style de couleur why not
0xFFCCCC
@ -161,7 +153,14 @@ class Map
*/
}
this.putScoreboard(0xCCCCFF);
this.#putNameBoard("Player", "Opponent", 0xCCCCFF);
path = [
{name: 'goal', onChoice: true, src: files.goalVideoPub},
{name: 'easteregg', onChoice: true, src: files.easterEggVideoPub},
{name: 'outstanding', onChoice: true, src: files.outstandingVideoPub},
{name: 'ping', onChoice: false, src: files.pingVideoPub},
{name: 'catch', onChoice: false, src: files.catchVideoPub},
{name: 'fortnite', onChoice: false, src: files.fortniteVideoPub},
];
};
#createPlanes(x, y, rot, name, isBottom, visual)
@ -199,7 +198,6 @@ class Map
changePlane(texture)
{
console.log(this.arrObject);
for (let i = 0; i < this.arrObject.length; i++)
{
if (this.arrObject[i].name == "planeBottom" || this.arrObject[i].name == "planeTop")
@ -264,7 +262,6 @@ 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.");
}
@ -368,6 +365,7 @@ class Map
putScoreboard(color)
{
this.#clearScoreboard();
// this.#putNameBoard("Player", "Opponent", 0xCCCCFF);
let materialScoreboard = null;
let geometryScoreboard1 = null;
let meshScoreboard1 = null;
@ -405,10 +403,10 @@ class Map
meshScoreboard1.rotation.y = Math.PI;
meshText1.rotation.y = Math.PI;
meshScoreboard1.position.set(0, 1.45, 9.5);
meshText1.position.set(0, 1.45, 9.5 - depth / 2 - 0.025);
meshScoreboard2.position.set(0, 1.45, -9.5);
meshText2.position.set(0, 1.45, - 9.5 + depth / 2 + 0.025);
meshScoreboard1.position.set(0, 1.60, 9.5);
meshScoreboard2.position.set(0, 1.60, -9.5);
meshText1.position.set(0, 1.60, 9.5 - depth / 2 - 0.025);
meshText2.position.set(0, 1.60, - 9.5 + depth / 2 + 0.025);
scene.add(meshScoreboard1);
scene.add(meshScoreboard2);
@ -576,8 +574,8 @@ class Map
// Create the canvas for the video
videoCanvas = document.createElement('canvas');
ctx = videoCanvas.getContext('2d');
videoCanvas.width = 100 * 2.33 * 20;
videoCanvas.height = 100;
videoCanvas.width = 50 * 2.33 * 20;
videoCanvas.height = 50;
// Get the number of videos to display
if (vNameNb && typeof(vNameNb) == 'number')
@ -609,7 +607,7 @@ class Map
videoTmp.play();
drawVideoOnCanvas();
});
videoList.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100});
videoList.push({video: videoTmp, imageWidth: 50 * 2.33, imageHeight: 50});
}
// Draw the video on the canvas
@ -753,6 +751,10 @@ class Map
}
animateGoalObjectUpdate = true;
if (cordY > 1.5)
animateGoalObjectUp = true;
else
animateGoalObjectUp = false;
};
#clearAnimationGoal()
@ -881,8 +883,8 @@ 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.3 && ball.object.position.y <= 3)
this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1;
if (ball.object.position.y >= 0.3 + 0.1 && ball.object.position.y <= 3 - 0.1)
this.arrObject[i].mesh.position.y = ball.object.position.y;
// Change the opacity of the wall
let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1;
@ -896,8 +898,8 @@ 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.3 && ball.object.position.y <= 3)
this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1;
if (ball.object.position.y >= 0.3 + 0.1 && ball.object.position.y <= 3 - 0.1)
this.arrObject[i].mesh.position.y = ball.object.position.y;
// Change the opacity of the wall
let diff = this.arrObject[i].mesh.position.x - ball.object.position.x - 0.1;
@ -942,37 +944,55 @@ class Map
if (object.name == "object0")
{
object.mesh.position.x += 0.05 * speed;
object.mesh.position.y += 0.05 * speed;
if (animateGoalObjectUp)
object.mesh.position.y -= 0.05 * speed;
else
object.mesh.position.y += 0.05 * speed;
object.mesh.position.z += 0.02 * speed;
}
else if (object.name == "object1")
{
object.mesh.position.x -= 0.03 * speed;
object.mesh.position.y += 0.04 * speed;
if (animateGoalObjectUp)
object.mesh.position.y -= 0.04 * speed;
else
object.mesh.position.y += 0.04 * speed;
object.mesh.position.z -= 0.05 * speed;
}
else if (object.name == "object2")
{
object.mesh.position.x += 0.04 * speed;
object.mesh.position.y += 0.03 * speed;
if (animateGoalObjectUp)
object.mesh.position.y -= 0.03 * speed;
else
object.mesh.position.y += 0.03 * speed;
object.mesh.position.z += 0.06 * speed;
}
else if (object.name == "object3")
{
object.mesh.position.x -= 0.06 * speed;
object.mesh.position.y += 0.02 * speed;
if (animateGoalObjectUp)
object.mesh.position.y -= 0.02 * speed;
else
object.mesh.position.y += 0.02 * speed;
object.mesh.position.z += 0.05 * speed;
}
else if (object.name == "object4")
{
object.mesh.position.x += 0.03 * speed;
object.mesh.position.y += 0.04 * speed;
if (animateGoalObjectUp)
object.mesh.position.y -= 0.04 * speed;
else
object.mesh.position.y += 0.04 * speed;
object.mesh.position.z += 0.03 * speed;
}
else if (object.name == "object5")
{
object.mesh.position.x -= 0.05 * speed;
object.mesh.position.y += 0.03 * speed;
if (animateGoalObjectUp)
object.mesh.position.y -= 0.03 * speed;
else
object.mesh.position.y += 0.03 * speed;
object.mesh.position.z -= 0.04 * speed;
}
};
@ -993,12 +1013,12 @@ class Map
{
for (let i = 0; i < this.arrObject.length; i++)
{
if (this.arrObject[i].type == "wallLeft")
if (this.arrObject[i].name == "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")
else if (this.arrObject[i].name == "wallRight")
{
this.arrObject[i].mesh.position.set(3.5, 0.4, -length/2);
this.arrObject[i].mesh.material.opacity = 0.5;
@ -1014,8 +1034,8 @@ class Map
this.updateScore(name, this.score);
player.reserCameraPlayer();
this.resetPosWalls();
ball.resetPosBall();
this.resetPosWalls();
// player.resetPosPlayer();
// opponent.resetPosOpponent();
};

32
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/29 01:37:45 by edbernar ### ########.fr */
/* Updated: 2024/09/30 16:48:22 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -329,6 +329,33 @@ class Player
{
this.camera.position.set(x, y, z);
}
scalePlayer(isOpponent)
{
let object;
if (isOpponent)
object = this.opponent.object;
else
object = this.object;
const value = 0.004;
for (let i = 1; i < 10; i++)
{
setTimeout(() => {
object.scale.z += value;
object.scale.x += value * 2;
}, i * 10);
}
for (let i = 10; i < 20; i++)
{
setTimeout(() => {
object.scale.z -= value;
object.scale.x -= value * 2;
}, i * 10);
}
}
};
function addKeyInArr(e)
@ -374,7 +401,6 @@ function simplePressKey(e)
}
}
function goFullscreen()
{
const elem = document.documentElement;

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* multiOnlineGamePage.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/09/29 22:33:06 by edbernar ### ########.fr */
/* Updated: 2024/09/30 17:30:15 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */

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/29 13:24:06 by edbernar ### ########.fr */
/* Updated: 2024/09/30 17:11:10 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
@ -25,6 +25,8 @@ function typeGame(content)
{
if (content.action == 3 && content.is_opponent)
opponent.movePlayer(content);
else if (content.action == 4)
player.scalePlayer(content.is_opponent);
else if (content.action == 5)
ball.updatePos(content);
else if (content.action == 6)