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

Game

Browse Source 
- Update all class
This commit is contained in:
Kum1ta
2024-08-21 14:58:28 +02:00
parent add92e6b27
commit 72d823348f
8 changed files with 173 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
site/real_game/blender/exported/map1.glb Normal file
View File

Binary file not shown.

BIN
site/real_game/blender/map1.blend Normal file
View File

Binary file not shown.

BIN
site/real_game/blender/map1.blend1 Normal file
View File

Binary file not shown.

14
site/real_game/class/Ball.js
View File

@ -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 diffBot = this.object.position.y - this.limits.down;
let speed = 0.1;
let diffTop = this.limits.up - this.object.position.y;
let diffBot = this.object.position.y - this.limits.down;
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);
}

27
site/real_game/class/Map.js
View File

@ -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 };

48
site/real_game/class/Opponent.js Normal file
View File

@ -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 };

65
site/real_game/class/Player.js
View File

@ -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 };

46
site/real_game/main.js
View File

@ -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)