Game

- Update all class

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 00:57:42 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 10:33:58 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -14,7 +14,9 @@ import * as THREE from 'three';
 
 /*
 	Todo (Eddy) :
-		- Ajouter fonction pour changer la gravité de la balle
+		- Ajouter fonction pour changer la gravité de la balle (OK)
+		- Ajouter un effet plus naturel pour le déplacement de la balle (OK)
+		
 */
 
 class Ball
@@ -58,9 +60,10 @@ class Ball
 
 	changeGravity()
 	{
-		let	diffTop	= this.limits.up - this.object.position.y;
+		let		diffTop	= this.limits.up - this.object.position.y;
-		let	diffBot	= this.object.position.y - this.limits.down;
+		let		diffBot	= this.object.position.y - this.limits.down;
-		let	speed	= 0.1; 
+		let		speed	= 0.25;
+		const	slower	= speed / 3;
 
 		if (diffBot > diffTop)
 			speed *= -1;
@@ -78,6 +81,7 @@ class Ball
 				else
 					this.setPosition(this.object.position.x, this.limits.down, this.object.position.z);
 			}
+			speed -= speed * slower;
 		}, 10);
 	}
 

site/real_game/class/Map.js

@@ -6,22 +6,27 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/20 14:52:55 by hubourge          #+#    #+#             */
-/*   Updated: 2024/08/21 00:59:01 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 14:56:10 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from 'three';
+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é
 */
 
+const loader = new GLTFLoader();
+
 class Map
 {
 	scene = null;
 	arrObject = [];
+	ballObject = null;
 	centerPos = {
 		x: -1,
 		y: -1,
@@ -44,11 +49,11 @@ class Map
 		scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
 		this.centerPos.x = 0;
 		this.centerPos.y = 0.15;
-		this.centerPos.z = -length/2;
+		this.centerPos.z = -length / 2 + length / 2;
 		this.mapLength = length;
 	};
 
-	#createPlanes(x, y, rot, name, isBottom, visual) // passer un materiel
+	#createPlanes(x, y, rot, name, isBottom, visual)
 	{
 		for (let i = 0; i < this.arrObject.length; i++)
 		{
@@ -68,16 +73,13 @@ class Map
 		else if (typeof(visual) == 'number')
 			material = new THREE.MeshPhysicalMaterial({ color: visual });
 		else
-		{
-			console.log("kjdsjksd");
 			material = new THREE.MeshPhysicalMaterial();
-		}
 		mesh = new THREE.Mesh(geometry, material);
 		mesh.rotateX(rot);
 		if (isBottom)
-			mesh.position.set(0, 0.15, -6);
+			mesh.position.set(0, 0.15, 0);
 		else
-			mesh.position.set(0, 3.15, -6);
+			mesh.position.set(0, 3.15, 0);
 		this.arrObject.push({mesh: mesh, name: name});
 		mesh.receiveShadow = true;
 		return (mesh);
@@ -101,6 +103,13 @@ class Map
 		return (mesh);
 	};
 
+	createGravityChanger(ball, x, z, onTop)
+	{
+		if (this.ballObject == null)
+			throw Error("Ball is not init");
+		
+	}
+
 	update(ball)
 	{
 		for (let i = 0; i < this.arrObject.length; i++)
@@ -136,7 +145,7 @@ class Map
 						this.arrObject[i].mesh.material.opacity = 1 - (diff / 2);
 				}
 		}
-	}
+	};
 };
 
 export { Map };

site/real_game/class/Opponent.js

@@ -0,0 +1,48 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   Opponent.js                                        :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/21 10:34:49 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/21 14:38:44 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+import { playerExist } from './Player'
+import * as THREE from 'three';
+
+let opponentExist = false;
+
+class Opponent
+{
+	object		= null;
+	speed		= 0.1;
+	interval	= null;
+	limits		= {};
+	player		= null;
+
+	constructor (object, map)
+	{
+		if (!playerExist)
+			throw Error('Player need to be init before opponent.')
+		if (opponentExist)
+			throw Error("Opponent is already init.");
+		opponentExist = true;
+		this.object = object;
+		this.limits = map.limits;
+		this.object.position.set(0, 0.3, -map.mapLength / 2 + 0.2);
+		this.cleanup = new FinalizationRegistry((heldValue) => {
+			playerExist = false;
+		})
+		this.cleanup.register(this, null);
+	}
+
+	update()
+	{
+		//en attente du serveur
+	}
+}
+
+export { Opponent };

site/real_game/class/Player.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/21 00:27:01 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 14:42:20 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -40,6 +40,7 @@ import * as THREE from 'three';
 		- Ajouter les mouvements définis sur l'axe y (OK)
 		- Faire une fonction qui change de camera quand il y a un but avec un fondu en noir (OK)
 		- Ajouter un zoom sur la camera de la fonction pointAnimation (OK)
+		- Ajouter une fonction pour l'animation de point marqué (OK)
 */
 
 let playerExist = false;
@@ -63,12 +64,12 @@ class Player
 		this.object = object;
 		this.limits = map.playerLimits;
 		this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
+		this.object.position.set(0, 0.32, 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.set(this.object.position.x, this.limits.down, this.object.position.z);
 		this.cleanup = new FinalizationRegistry((heldValue) => {
 			playerExist = false;
 		})
@@ -103,7 +104,7 @@ 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 + 2
+						this.object.position.z + 5
 					);
 					this.camera.rotation.set(0, 0, 0);
 				}
@@ -113,7 +114,7 @@ class Player
 		});
 	}
 
-	pointAnimation(scene)
+	pointAnimation(map)
 	{
 		const	tmpCamera	= new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
 		const	tmp			= this.camera;
@@ -128,7 +129,7 @@ class Player
 			document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
 		}, 300)
 		setTimeout(() => {
-			tmpCamera.position.set(-3, this.limits.up / 2 + 0.5, -3);
+			tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
 			this.isOnPointAnim = true;
 			this.camera = tmpCamera;
 			interval = setInterval(() => {
@@ -164,6 +165,58 @@ class Player
 		}, 200)
 	}
 
+	pointOpponentAnimation(map, oppponentObject)
+	{
+		const	tmpCamera	= new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
+		const	tmp			= this.camera;
+		let		interval	= null;
+		const	startColor	= oppponentObject.material.color.clone();
+		let		hue			= 0;
+
+		document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s';
+		document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
+		setTimeout(() => {
+			document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
+			document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
+		}, 300)
+		setTimeout(() => {
+			tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z);
+			this.isOnPointAnim = true;
+			this.camera = tmpCamera;
+			interval = setInterval(() => {
+				tmpCamera.lookAt(oppponentObject.position);
+				console.log(tmpCamera.position)
+				hue += 0.01;
+				if (hue > 1)
+					hue = 0;
+				oppponentObject.material.color.setHSL(hue, 1, 0.5);
+				tmpCamera.fov -= 0.05;
+				tmpCamera.updateProjectionMatrix();
+			}, 10);
+			setTimeout(() => {
+				clearInterval(interval);
+				document.getElementsByTagName('canvas')[0].style.animation = null;
+				document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.19s';
+				document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
+				setTimeout(() => {
+					this.camera = tmp;
+					oppponentObject.material.color.copy(startColor);
+					this.isOnPointAnim = false;
+					if (!this.cameraFixed)
+					{
+						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 + 2
+						);
+					}
+					document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
+					document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
+				}, 200);
+			}, 4000);
+		}, 200)
+	}
+
 	update()
 	{
 		let i;
@@ -223,4 +276,4 @@ class Player
 	}
 };
 
-export { Player };
+export { Player, playerExist };

site/real_game/main.js

@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/21 00:10:46 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/21 14:51:31 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -14,6 +14,10 @@ import * as THREE from 'three';
 import { Player } from './class/Player'
 import { Map } from './class/Map'
 import { Ball } from './class/Ball'
+import { Opponent } from './class/Opponent'
+import { OrbitControls } from 'three/examples/jsm/Addons.js';
+
+let	debug = false;
 
 function createBarPlayer(color)
 {
@@ -21,7 +25,6 @@ function createBarPlayer(color)
 	const material	= new THREE.MeshPhysicalMaterial({color: color});
 	const mesh		= new THREE.Mesh(geometry, material);
 
-	mesh.position.set(0, 0.2, 0);
 	mesh.castShadow = true;
 	return (mesh);
 }
@@ -30,24 +33,35 @@ function loop()
 {
 	player.update();
 	map.update(ball.object);
-	renderer.render(scene, player.camera);
+	if (debug)
+	{
+		controls.update();
+		renderer.render(scene, cameraTmp);
+	}
+	else
+		renderer.render(scene, player.camera);
 	
 }
 
 const scene			= new THREE.Scene();
 const map			= new Map(scene, 13);
-const bar			= createBarPlayer(0xed56ea);
+const bar1			= createBarPlayer(0xed56ea);
 const renderer		= new THREE.WebGLRenderer({antialias: true});
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-const player		= new Player(bar, map);
+const player		= new Player(bar1, map);
 const spotLight		= new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
 spotLight.castShadow = true;
 const ambiantLight	= new THREE.AmbientLight(0xffffff, 0.5);
-const ball			= new Ball(scene, map)
+const ball			= new Ball(scene, map);
+const bar2			= createBarPlayer(0xf3e11e);
+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);
@@ -55,10 +69,28 @@ scene.background = new THREE.Color(0x1a1a1a);
 renderer.setSize(window.innerWidth, window.innerHeight);
 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(15, 0, 15);
+controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z);
+
+/*------------------------------------*/
 
 document.addEventListener('keypress', (e) => {
 	if (e.key == 'g')
-		player.pointAnimation(scene);
+		player.pointAnimation(map);
+	if (e.key == 'h')
+		player.pointOpponentAnimation(map, opponent.object);
+	if (e.key == 'c')
+		debug = !debug;
 })
 
 renderer.setAnimationLoop(loop)