Game

- Added effect on jumper
    - Added function in class Map for create wall
    - Ajusted/patched player camera
    - next step for me : banner :)

site/real_game/class/Ball.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 17:02:47 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/21 10:33:58 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/22 00:04:30 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -58,7 +58,7 @@ class Ball
 		this.object.position.set(x, y, z);
 	}
 
-	changeGravity()
+	changeGravity(ballIsOnJumper)
 	{
 		let		diffTop	= this.limits.up - this.object.position.y;
 		let		diffBot	= this.object.position.y - this.limits.down;
@@ -80,6 +80,7 @@ class Ball
 					this.setPosition(this.object.position.x, this.limits.up, this.object.position.z);
 				else
 					this.setPosition(this.object.position.x, this.limits.down, this.object.position.z);
+				ballIsOnJumper.can = true;
 			}
 			speed -= speed * slower;
 		}, 10);

site/real_game/class/Map.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/08/21 18:59:08 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/08/22 01:02:41 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -17,7 +17,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 	Todo (Eddy) :
 		- Ajouter la transparence sur les murs sur la distance de la balle (OK)
 		- Ajouter des textures selon le type : number pour couleur, string pour img (OK)
-		- Ajouter une fonctione pour modifier la gravité
+		- Ajouter une fonctione pour modifier la gravité (OK)
 */
 
 const loader = new GLTFLoader();
@@ -27,6 +27,7 @@ class Map
 	scene = null;
 	arrObject = [];
 	ballObject = null;
+	mapLength = 0;
 	centerPos = {
 		x: -1,
 		y: -1,
@@ -38,7 +39,9 @@ class Map
 		left: -3,
 		right: 3,
 	};
-	mapLength = 0;
+	ballIsOnJumper = {
+		can: true
+	};
 
 	constructor(scene, length, obstacles)
 	{
@@ -51,8 +54,25 @@ class Map
 		scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/textures/pastel.jpg'));
 		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.#createWallObstacle(1, 1, 1, false));
+		scene.add(this.#createWallObstacle(-1, 1, 1, true));
+		scene.add(this.#createBanner(10, 1))
 		if (obstacles)
 			this.#generateObstacle();
+
+
+		/***** JUST FOR TEST *****/
+		document.addEventListener('keypress', (e) => {
+			if (e.key == 'q')
+			{
+				for (let i = 0; i < this.arrObject.length; i++)
+				{
+					if (this.arrObject[i].type == 'jumper')
+						this.#animationGravityChanger(this.arrObject[i].mesh)
+				}
+			}
+		})
+		/*************************/
 	};
 
 	#createPlanes(x, y, rot, name, isBottom, visual)
@@ -62,6 +82,7 @@ class Map
 			if (this.arrObject[i].name == name)
 				throw Error("Name already exist.");
 		}
+
 		const	geometry	= new THREE.PlaneGeometry(x, y);
 		let		material	= null;
 		let		mesh		= null;
@@ -82,7 +103,7 @@ class Map
 			mesh.position.set(0, 0.15, 0);
 		else
 			mesh.position.set(0, 3.15, 0);
-		this.arrObject.push({mesh: mesh, name: name});
+		this.arrObject.push({mesh: mesh, name: name, type: "plane"});
 		mesh.receiveShadow = true;
 		return (mesh);
 	};
@@ -101,7 +122,7 @@ class Map
 		mesh.position.set(x, y, z);
 		material.transparent = true;
 		material.opacity = 0.5;
-		this.arrObject.push({mesh: mesh, name: name});
+		this.arrObject.push({mesh: mesh, name: name, type: "wall"});
 		return (mesh);
 	};
 
@@ -171,46 +192,91 @@ class Map
 			group.rotateX(Math.PI);
 			group.translateY(-6.3);
 		}
-		this.arrObject.push({mesh: group, name: name});
+		this.arrObject.push({mesh: group, name: name, type: 'jumper'});
 
 		this.scene.add(group);
 	};
 
+	#createWallObstacle(x, y, size, onTop)
+	{
+		const	geometry	= new THREE.BoxGeometry(size, 0.5, 0.1);
+		const	material	= new THREE.MeshPhysicalMaterial({color: 0xaaaafe});
+		const	mesh		= new THREE.Mesh(geometry, material);
+
+
+		if (onTop)
+			mesh.position.set(x, this.playerLimits.up - 0.1, y);
+		else
+			mesh.position.set(x, 0.4, y);
+		return (mesh);
+	}
+
+	#createBanner(radius, height)
+	{
+		return (null);
+	}
+
+	#animationGravityChanger(group)
+	{
+		const geometry1		= new THREE.TorusGeometry(1.5, 0.05, 12, 24);
+		const material1		= new THREE.MeshPhysicalMaterial({color: 0x00ff00});
+		const ring1			= new THREE.Mesh(geometry1, material1);
+		const landmark		= group.children[0];
+		let	interval		= null;
+		let	speed			= 0.1;
+
+		ring1.rotateX(-Math.PI / 2);
+		ring1.position.set(landmark.position.x, landmark.position.y, landmark.position.z);
+		ring1.scale.set(0.2, 0.2, 0.2);
+		ring1.material.transparent = true;
+		this.scene.add(ring1);
+
+		interval = setInterval(() => {
+			ring1.position.y += speed;
+			ring1.material.opacity -= 0.02;
+			speed *= 0.90;
+			if (ring1.material.opacity == 0)
+				clearInterval(interval);
+		}, 10);
+	}
+
 	#generateObstacle()
 	{
-		let randomNumber;
+		this.#createGravityChanger(-1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom1", 0);
-		if (Math.random() < 0.5)
+
-		{
+		// let randomNumber;
-			randomNumber = Math.random();
+		// if (Math.random() < 0.5)
-			if (randomNumber < 0.5)
+		// {
-				this.#createGravityChanger(-1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom1", 0);
+		// 	randomNumber = Math.random();
-			else
+		// 	if (randomNumber < 0.5)
-				this.#createGravityChanger(1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom2", 0);
+		// 		this.#createGravityChanger(-1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom1", 0);
-		}
+		// 	else
-		if (Math.random() < 0.5)
+		// 		this.#createGravityChanger(1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom2", 0);
-		{
+		// }
-			randomNumber = Math.random();
+		// if (Math.random() < 0.5)
-			if (randomNumber < 0.5)
+		// {
-				this.#createGravityChanger(-1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom3", 0);
+		// 	randomNumber = Math.random();
-			else
+		// 	if (randomNumber < 0.5)
-				this.#createGravityChanger(1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom4", 0);
+		// 		this.#createGravityChanger(-1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom3", 0);
-		}
+		// 	else
-		if (Math.random() < 0.5)
+		// 		this.#createGravityChanger(1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom4", 0);
-		{
+		// }
-			randomNumber = Math.random();
+		// if (Math.random() < 0.5)
-			if (randomNumber < 0.5)
+		// {
-				this.#createGravityChanger(-1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop1", 1);
+		// 	randomNumber = Math.random();
-			else
+		// 	if (randomNumber < 0.5)
-				this.#createGravityChanger(1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop2", 1);
+		// 		this.#createGravityChanger(-1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop1", 1);
-		}
+		// 	else
-		if (Math.random() < 0.5)
+		// 		this.#createGravityChanger(1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop2", 1);
-		{
+		// }
-			randomNumber = Math.random();
+		// if (Math.random() < 0.5)
-			if (randomNumber < 0.5)
+		// {
-				this.#createGravityChanger(-1.5, 3.2, -this.mapLength / 4, "gravityChangerGroupTop3", 1);
+		// 	randomNumber = Math.random();
-			else
+		// 	if (randomNumber < 0.5)
-				this.#createGravityChanger(1.5, 3.2, -this.mapLength / 4, "gravityChangerGroupTop4", 1);
+		// 		this.#createGravityChanger(-1.5, 3.2, -this.mapLength / 4, "gravityChangerGroupTop3", 1);
-		}
+		// 	else
+		// 		this.#createGravityChanger(1.5, 3.2, -this.mapLength / 4, "gravityChangerGroupTop4", 1);
+		// }
 	};
 
 	update(ball)
@@ -219,19 +285,19 @@ class Map
 		{
 			if (this.arrObject[i].name == "wallLeft")
 			{
-				if (ball.position.z < 0.1 && ball.position.z > -this.mapLength + 1)
+				if (ball.object.position.z < 0.1 && ball.object.position.z > -this.mapLength + 1)
-					this.arrObject[i].mesh.position.z = ball.position.z;
+					this.arrObject[i].mesh.position.z = ball.object.position.z;
-				this.arrObject[i].mesh.position.y = ball.position.y;
+				this.arrObject[i].mesh.position.y = ball.object.position.y;
 			}
 			if (this.arrObject[i].name == "wallRight")
 			{
-				if (ball.position.z < 0.1 && ball.position.z > -this.mapLength + 1)
+				if (ball.object.position.z < 0.1 && ball.object.position.z > -this.mapLength + 1)
-					this.arrObject[i].mesh.position.z = ball.position.z;
+					this.arrObject[i].mesh.position.z = ball.object.position.z;
-				this.arrObject[i].mesh.position.y = ball.position.y;
+				this.arrObject[i].mesh.position.y = ball.object.position.y;
 			}
 			if (this.arrObject[i].name == "wallLeft")
 			{
-				let	diff = ball.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)
 					this.arrObject[i].mesh.material.opacity = 0;
@@ -240,13 +306,26 @@ class Map
 			}
 			if (this.arrObject[i].name == "wallRight")
 			{
-				let	diff = this.arrObject[i].mesh.position.x - ball.position.x - 0.1;
+				let	diff = this.arrObject[i].mesh.position.x - ball.object.position.x - 0.1;
 
 				if (diff > 2)
 					this.arrObject[i].mesh.material.opacity = 0;
 				else
 					this.arrObject[i].mesh.material.opacity = 1 - (diff / 2);
 			}
+			if (this.arrObject[i].type == 'jumper')
+			{
+				const cylinder	= this.arrObject[i].mesh.children[5];
+				const distance	= ball.object.position.distanceTo(cylinder.position);
+				const speed		= 0.1
+
+				if (distance < 0.25 && this.ballIsOnJumper.can)
+				{
+					this.ballIsOnJumper.can = false;
+					ball.changeGravity(this.ballIsOnJumper);
+					this.#animationGravityChanger(this.arrObject[i].mesh);
+				}
+			}
 			if (this.arrObject[i].name == "gravityChangerGroupBottom1")
 			{
 				for (let j = 2; j < this.arrObject[i].mesh.children.length - 1; j++)

site/real_game/class/Player.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Player.js                                          :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/21 16:54:36 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/08/22 00:52:14 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -63,12 +63,12 @@ class Player
 		playerExist = true;
 		this.object = object;
 		this.limits = map.playerLimits;
-		this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
+		this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
 		this.object.position.set(0, this.limits.down, map.mapLength / 2 - 0.2);
 		this.setCameraPosition(
 			this.object.position.x,
 			this.object.position.y + 0.7,
-			this.object.position.z + 2
+			this.object.position.z + 1.5
 		);
 		this.cleanup = new FinalizationRegistry((heldValue) => {
 			playerExist = false;
@@ -104,12 +104,12 @@ class Player
 					this.setCameraPosition(
 						this.object.position.x,
 						this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
-						this.object.position.z + 5
+						this.object.position.z + 1.5
 					);
 					this.camera.rotation.set(0, 0, 0);
 				}
 				else
-					this.setCameraPosition(0, 1.5, 4);
+					this.setCameraPosition(0, 1.5, this.object.position.z + 3);
 			}				
 		});
 	}

site/real_game/main.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   main.js                                            :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/21 18:46:41 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/08/22 00:53:14 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -35,7 +35,7 @@ Controls :
 	- 9 : inversion gravite
 */
 
-let	debug = true;
+let	debug = false;
 
 function createBarPlayer(color)
 {
@@ -50,7 +50,7 @@ function createBarPlayer(color)
 function loop()
 {
 	player.update();
-	map.update(ball.object);
+	map.update(ball);
 	if (debug)
 	{
 		controls.update();
@@ -78,8 +78,6 @@ const opponent		= new Opponent(bar2, map);
 
 scene.add(player.object);
 scene.add(opponent.object);
-console.log(player.object.position);
-console.log(opponent.object.position);
 scene.add(ambiantLight);
 spotLight.position.set(0, 100, 0);
 scene.add(spotLight);
@@ -89,17 +87,11 @@ document.body.appendChild(renderer.domElement);
 ball.initMoveBallTmp();
 map.ballObject = ball.object;
 
-// map.addDecor('blender/exported/map1.glb')
-// map.createGravityChanger(1, 1, false);
-
-
-
 /*---------------DEBUG----------------*/
 const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight);
 const controls = new OrbitControls(cameraTmp, renderer.domElement);
 cameraTmp.position.set(5, 3, 5);
 controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z);
-
 /*------------------------------------*/
 
 document.addEventListener('keypress', (e) => {

site/real_game/node_modules/.vite/deps/_metadata.json

@@ -1,25 +1,25 @@
 {
-  "hash": "fba7eca6",
+  "hash": "aeb97021",
-  "configHash": "345fb419",
+  "configHash": "0b4c6e74",
   "lockfileHash": "cd36b699",
-  "browserHash": "e2576fb7",
+  "browserHash": "7877d18e",
   "optimized": {
     "three": {
       "src": "../../three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "692a1237",
+      "fileHash": "25132e42",
       "needsInterop": false
     },
     "three/examples/jsm/Addons.js": {
       "src": "../../three/examples/jsm/Addons.js",
       "file": "three_examples_jsm_Addons__js.js",
-      "fileHash": "f47f44f4",
+      "fileHash": "99fa9e6e",
       "needsInterop": false
     },
     "three/addons/loaders/GLTFLoader.js": {
       "src": "../../three/examples/jsm/loaders/GLTFLoader.js",
       "file": "three_addons_loaders_GLTFLoader__js.js",
-      "fileHash": "23466596",
+      "fileHash": "1e0e6771",
       "needsInterop": false
     }
   },