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

Game

Browse Source 
- Added effect on jumper
    - Added function in class Map for create wall
    - Ajusted/patched player camera
    - next step for me : banner :)
This commit is contained in:
Kum1ta
2024-08-22 01:05:21 +02:00
parent 182bafdca1
commit a8c8c658af
4 changed files with 140 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
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 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);

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

@ -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;
if (Math.random() < 0.5)
{
randomNumber = Math.random();
if (randomNumber < 0.5)
this.#createGravityChanger(-1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom1", 0);
else
this.#createGravityChanger(1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom2", 0);
}
if (Math.random() < 0.5)
{
randomNumber = Math.random();
if (randomNumber < 0.5)
this.#createGravityChanger(-1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom3", 0);
else
this.#createGravityChanger(1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom4", 0);
}
if (Math.random() < 0.5)
{
randomNumber = Math.random();
if (randomNumber < 0.5)
this.#createGravityChanger(-1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop1", 1);
else
this.#createGravityChanger(1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop2", 1);
}
if (Math.random() < 0.5)
{
randomNumber = Math.random();
if (randomNumber < 0.5)
this.#createGravityChanger(-1.5, 3.2, -this.mapLength / 4, "gravityChangerGroupTop3", 1);
else
this.#createGravityChanger(1.5, 3.2, -this.mapLength / 4, "gravityChangerGroupTop4", 1);
}
this.#createGravityChanger(-1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom1", 0);
// let randomNumber;
// if (Math.random() < 0.5)
// {
// randomNumber = Math.random();
// if (randomNumber < 0.5)
// this.#createGravityChanger(-1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom1", 0);
// else
// this.#createGravityChanger(1.5, 0.2, this.mapLength / 4, "gravityChangerGroupBottom2", 0);
// }
// if (Math.random() < 0.5)
// {
// randomNumber = Math.random();
// if (randomNumber < 0.5)
// this.#createGravityChanger(-1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom3", 0);
// else
// this.#createGravityChanger(1.5, 0.2, -this.mapLength / 4, "gravityChangerGroupBottom4", 0);
// }
// if (Math.random() < 0.5)
// {
// randomNumber = Math.random();
// if (randomNumber < 0.5)
// this.#createGravityChanger(-1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop1", 1);
// else
// this.#createGravityChanger(1.5, 3.2, this.mapLength / 4, "gravityChangerGroupTop2", 1);
// }
// if (Math.random() < 0.5)
// {
// randomNumber = Math.random();
// if (randomNumber < 0.5)
// 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)
this.arrObject[i].mesh.position.z = ball.position.z;
this.arrObject[i].mesh.position.y = ball.position.y;
if (ball.object.position.z < 0.1 && ball.object.position.z > -this.mapLength + 1)
this.arrObject[i].mesh.position.z = ball.object.position.z;
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)
this.arrObject[i].mesh.position.z = ball.position.z;
this.arrObject[i].mesh.position.y = ball.position.y;
if (ball.object.position.z < 0.1 && ball.object.position.z > -this.mapLength + 1)
this.arrObject[i].mesh.position.z = ball.object.position.z;
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++)

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

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

16
site/real_game/main.js
View File

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