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

Gane

Browse Source 
- Update class Player, Map, Ball
This commit is contained in:
Kum1ta
2024-08-21 01:02:23 +02:00
parent 23eb01a03e
commit 3498f32635
6 changed files with 165 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,26 +6,31 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */ /* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/08/20 17:23:41 by edbernar ### ########.fr */ /* Updated: 2024/08/21 00:57:42 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from 'three';
const centerPos = { /*
x: 0, Todo (Eddy) :
y: 0.3, - Ajouter fonction pour changer la gravité de la balle
z: -0.1 */
}
class Ball class Ball
{ {
object = null; object = null;
centerPos = {};
limits = {};
interval = null;
constructor(scene) constructor(scene, map)
{ {
this.object = this.#createBall(); this.object = this.#createBall();
this.centerPos = map.centerPos;
this.centerPos.y += this.object.geometry.parameters.radius;
this.limits = map.playerLimits;
this.resetPosBall();
scene.add(this.object); scene.add(this.object);
} }
@ -37,9 +42,66 @@ class Ball
mesh.receiveShadow = true; mesh.receiveShadow = true;
mesh.castShadow = true; mesh.castShadow = true;
mesh.position.set(centerPos.x, centerPos.y, centerPos.z); mesh.position.set(this.centerPos.x, this.centerPos.y, this.centerPos.z);
return (mesh); return (mesh);
} }
resetPosBall()
{
this.setPosition(this.centerPos.x, this.centerPos.y, this.centerPos.z);
}
setPosition(x, y, z)
{
this.object.position.set(x, y, z);
}
changeGravity()
{
let diffTop = this.limits.up - this.object.position.y;
let diffBot = this.object.position.y - this.limits.down;
let speed = 0.1;
if (diffBot > diffTop)
speed *= -1;
if (this.interval)
clearInterval(this.interval);
this.interval = setInterval(() => {
this.object.position.y += speed;
if ((speed > 0 && this.object.position.y >= this.limits.up)
|| (speed < 0 && this.object.position.y <= this.limits.down))
{
clearInterval(this.interval);
this.interval = null;
if (speed > 0)
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);
}
}, 10);
}
/*---------------- FUNCTION FOR TEST ----------------*/
initMoveBallTmp()
{
console.warn("Don't forget to remove function initMoveBallTmp");
const speedBallTmp = 0.1;
document.addEventListener('keypress', (e) => {
if (e.key == '4')
this.object.position.x -= speedBallTmp;
if (e.key == '6')
this.object.position.x += speedBallTmp;
if (e.key == '8')
this.object.position.z -= speedBallTmp;
if (e.key == '2')
this.object.position.z += speedBallTmp;
if (e.key == '9')
this.changeGravity();
});
}
/*---------------------------------------------------*/
} }
export { Ball }; export { Ball };

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

@ -3,29 +3,43 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Map.js :+: :+: :+: */ /* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/08/20 18:29:17 by hubourge ### ########.fr */ /* Updated: 2024/08/21 00:59:01 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from 'three';
/*
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)
*/
class Map class Map
{ {
scene = null; scene = null;
arrObject = []; arrObject = [];
centerPos = {x:-1,y:-1,z:-1} centerPos = {
x: -1,
y: -1,
z:-1
};
playerLimits = {
up : 3,
down: 0.3,
left: -3,
right: 3,
};
mapLength = 0; mapLength = 0;
constructor(scene, length) constructor(scene, length)
{ {
this.scene = scene; this.scene = scene;
scene.add(this.#createPlanes(7.5, length, -(Math.PI / 2), "planeBottom", true)); scene.add(this.#createPlanes(7.5, length, -(Math.PI / 2), "planeBottom", true, 0xaaffff));
scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false)); scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/textures/testTmp.jpg'));
scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft")); 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.#createWall(3.5, 0.4, -length/2, "wallRight"));
this.centerPos.x = 0; this.centerPos.x = 0;
@ -34,22 +48,36 @@ class Map
this.mapLength = length; this.mapLength = length;
}; };
#createPlanes(x, y, rot, name, isBottom) // passer un materiel #createPlanes(x, y, rot, name, isBottom, visual) // passer un materiel
{ {
for (let i = 0; i < this.arrObject.length; i++) for (let i = 0; i < this.arrObject.length; i++)
{ {
if (this.arrObject[i].name == name) if (this.arrObject[i].name == name)
throw Error("Name already exist."); throw Error("Name already exist.");
} }
const geometry = new THREE.PlaneGeometry(x, y); const geometry = new THREE.PlaneGeometry(x, y);
const material = new THREE.MeshPhysicalMaterial() let material = null;
const mesh = new THREE.Mesh(geometry, material); let mesh = null;
if (typeof(visual) == 'string')
{
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(visual);
material = new THREE.MeshPhysicalMaterial({ map: texture });
}
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); mesh.rotateX(rot);
if (isBottom) if (isBottom)
mesh.position.set(0, 0.15, -6); mesh.position.set(0, 0.15, -6);
else else
mesh.position.set(0, 3.05, -6); mesh.position.set(0, 3.15, -6);
this.arrObject.push({mesh: mesh, name: name}); this.arrObject.push({mesh: mesh, name: name});
mesh.receiveShadow = true; mesh.receiveShadow = true;
return (mesh); return (mesh);
@ -67,6 +95,8 @@ class Map
const mesh = new THREE.Mesh(geometry, material); const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, y, z); mesh.position.set(x, y, z);
mesh.material.transparent = true;
mesh.material.opacity = 0.5;
this.arrObject.push({mesh: mesh, name: name}); this.arrObject.push({mesh: mesh, name: name});
return (mesh); return (mesh);
}; };
@ -87,6 +117,24 @@ class Map
this.arrObject[i].mesh.position.z = ball.position.z; this.arrObject[i].mesh.position.z = ball.position.z;
this.arrObject[i].mesh.position.y = ball.position.y; this.arrObject[i].mesh.position.y = ball.position.y;
} }
if (this.arrObject[i].name == "wallLeft")
{
let diff = ball.position.x - this.arrObject[i].mesh.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].name == "wallRight")
{
let diff = this.arrObject[i].mesh.position.x - ball.position.x - 0.1;
if (diff > 2)
this.arrObject[i].mesh.material.opacity = 0;
else
this.arrObject[i].mesh.material.opacity = 1 - (diff / 2);
}
} }
} }
}; };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/08/20 17:01:01 by edbernar ### ########.fr */ /* Updated: 2024/08/21 00:27:01 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -28,11 +28,6 @@ import * as THREE from 'three';
- La variable "limits" sert à délimiter les mouvements de la barre - La variable "limits" sert à délimiter les mouvements de la barre
*/ */
/*
Information :
- La map devra faire maximum 8 largueur car ça pose des problèmes avec la caméra fixe
/* /*
Todo (Eddy) : Todo (Eddy) :
- Ajouter une camera sur l'object (OK) - Ajouter une camera sur l'object (OK)
@ -48,12 +43,6 @@ import * as THREE from 'three';
*/ */
let playerExist = false; let playerExist = false;
const limits = {
up : 3,
down: 0.2,
left: -3,
right: 3,
}
class Player class Player
{ {
@ -64,19 +53,22 @@ class Player
cameraFixed = false; cameraFixed = false;
interval = null; interval = null;
isOnPointAnim = false; isOnPointAnim = false;
limits = {};
constructor (object) constructor (object, map)
{ {
if (playerExist) if (playerExist)
throw Error("Player is already init."); throw Error("Player is already init.");
playerExist = true; playerExist = true;
this.object = object; this.object = object;
this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000); this.limits = map.playerLimits;
this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
this.setCameraPosition( this.setCameraPosition(
this.object.position.x, this.object.position.x,
this.object.position.y + 0.7, this.object.position.y + 0.7,
this.object.position.z + 1 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) => { this.cleanup = new FinalizationRegistry((heldValue) => {
playerExist = false; playerExist = false;
}) })
@ -110,20 +102,20 @@ class Player
{ {
this.setCameraPosition( this.setCameraPosition(
this.object.position.x, this.object.position.x,
this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7), this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
this.object.position.z + 1 this.object.position.z + 2
); );
this.camera.rotation.set(0, 0, 0); this.camera.rotation.set(0, 0, 0);
} }
else else
this.setCameraPosition(0, 1.5, 2.6); this.setCameraPosition(0, 1.5, 4);
} }
}); });
} }
pointAnimation(scene) pointAnimation(scene)
{ {
const tmpCamera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000); const tmpCamera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera; const tmp = this.camera;
let interval = null; let interval = null;
const startColor = this.object.material.color.clone(); const startColor = this.object.material.color.clone();
@ -136,7 +128,7 @@ class Player
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
}, 300) }, 300)
setTimeout(() => { setTimeout(() => {
tmpCamera.position.set(-3, 3, -3); tmpCamera.position.set(-3, this.limits.up / 2 + 0.5, -3);
this.isOnPointAnim = true; this.isOnPointAnim = true;
this.camera = tmpCamera; this.camera = tmpCamera;
interval = setInterval(() => { interval = setInterval(() => {
@ -161,17 +153,13 @@ class Player
{ {
this.setCameraPosition( this.setCameraPosition(
this.object.position.x, this.object.position.x,
this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7), this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
this.object.position.z + 1 this.object.position.z + 2
); );
} }
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)'; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
}, 200); }, 200);
// document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
// setTimeout(() => {
// document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
// }, 300)
}, 4000); }, 4000);
}, 200) }, 200)
} }
@ -183,7 +171,7 @@ class Player
i = 0; i = 0;
while (i < this.pressedButton.length) while (i < this.pressedButton.length)
{ {
if (this.pressedButton[i] == 'w' && this.object.position.y < limits.up) if (this.pressedButton[i] == 'w' && this.object.position.y < this.limits.up)
{ {
if (this.interval) if (this.interval)
clearInterval(this.interval); clearInterval(this.interval);
@ -191,14 +179,14 @@ class Player
this.object.position.y += this.speed; this.object.position.y += this.speed;
if (!this.cameraFixed && !this.isOnPointAnim) if (!this.cameraFixed && !this.isOnPointAnim)
this.camera.position.y += (this.speed / 2); this.camera.position.y += (this.speed / 2);
if (this.object.position.y >= limits.up) if (this.object.position.y >= this.limits.up)
{ {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = null; this.interval = null;
} }
}, 5); }, 5);
} }
if (this.pressedButton[i] == 's' && this.object.position.y > limits.down) if (this.pressedButton[i] == 's' && this.object.position.y > this.limits.down)
{ {
if (this.interval) if (this.interval)
clearInterval(this.interval); clearInterval(this.interval);
@ -206,20 +194,20 @@ class Player
this.object.position.y -= this.speed; this.object.position.y -= this.speed;
if (!this.cameraFixed && !this.isOnPointAnim) if (!this.cameraFixed && !this.isOnPointAnim)
this.camera.position.y -= (this.speed / 2); this.camera.position.y -= (this.speed / 2);
if (this.object.position.y <= limits.down) if (this.object.position.y <= this.limits.down)
{ {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = null; this.interval = null;
} }
}, 5); }, 5);
} }
if (this.pressedButton[i] == 'd' && this.object.position.x < limits.right) if (this.pressedButton[i] == 'd' && this.object.position.x < this.limits.right)
{ {
this.object.position.x += this.speed; this.object.position.x += this.speed;
if (!this.cameraFixed && !this.isOnPointAnim) if (!this.cameraFixed && !this.isOnPointAnim)
this.camera.position.x += this.speed; this.camera.position.x += this.speed;
} }
if (this.pressedButton[i] == 'a' && this.object.position.x > limits.left) if (this.pressedButton[i] == 'a' && this.object.position.x > this.limits.left)
{ {
this.object.position.x -= this.speed; this.object.position.x -= this.speed;
if (!this.cameraFixed && !this.isOnPointAnim) if (!this.cameraFixed && !this.isOnPointAnim)

43
site/real_game/main.js
View File

@ -6,15 +6,14 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/08/20 17:55:31 by edbernar ### ########.fr */ /* Updated: 2024/08/21 00:10:46 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from 'three';
import { Player } from './class/Player' import { Player } from './class/Player'
import { Map } from './class/Map' import { Map } from './class/Map'
import { OrbitControls } from 'three/examples/jsm/Addons.js'; import { Ball } from './class/Ball'
import { update } from 'three/examples/jsm/libs/tween.module.js';
function createBarPlayer(color) function createBarPlayer(color)
{ {
@ -23,15 +22,16 @@ function createBarPlayer(color)
const mesh = new THREE.Mesh(geometry, material); const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.2, 0); mesh.position.set(0, 0.2, 0);
mesh.castShadow = true;
return (mesh); return (mesh);
} }
function loop() function loop()
{ {
player.update(); player.update();
map.update(ball.object);
renderer.render(scene, player.camera); renderer.render(scene, player.camera);
// ===== test ball =====
} }
const scene = new THREE.Scene(); const scene = new THREE.Scene();
@ -40,40 +40,12 @@ const bar = createBarPlayer(0xed56ea);
const renderer = new THREE.WebGLRenderer({antialias: true}); const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
const player = new Player(bar); const player = new Player(bar, map);
const spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2); const spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2);
const ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);
// ===== test ball =====
const geometryBall = new THREE.SphereGeometry(0.15, 32, 32);
const materialBall = new THREE.MeshPhysicalMaterial({color: 0xff0000});
const ball = new THREE.Mesh(geometryBall, materialBall);
ball.position.x = map.centerPos.x;
ball.position.y = map.centerPos.y + 0.15;
ball.position.z = map.centerPos.z;
ball.receiveShadow = true;
ball.castShadow = true;
scene.add(ball);
spotLight.castShadow = true; spotLight.castShadow = true;
const ambiantLight = new THREE.AmbientLight(0xffffff, 0.5);
const ball = new Ball(scene, map)
let speed = 0.1;
const limits = {
up : 3,
down: 0.2,
left: -3,
right: 3,
}
document.addEventListener('keypress', (e) => {
if (e.key == '9')
{
ball.position.z += speed;
console.log(e.key);
}
});
// =====================
scene.add(player.object); scene.add(player.object);
scene.add(ambiantLight); scene.add(ambiantLight);
@ -82,6 +54,7 @@ scene.add(spotLight);
scene.background = new THREE.Color(0x1a1a1a); scene.background = new THREE.Color(0x1a1a1a);
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
ball.initMoveBallTmp();
document.addEventListener('keypress', (e) => { document.addEventListener('keypress', (e) => {
if (e.key == 'g') if (e.key == 'g')

12
site/real_game/node_modules/.vite/deps/_metadata.json generated vendored
View File

@ -1,25 +1,25 @@
{ {
"hash": "b5ed7c4e", "hash": "aeb97021",
"configHash": "4027b9ee", "configHash": "0b4c6e74",
"lockfileHash": "cd36b699", "lockfileHash": "cd36b699",
"browserHash": "c12de373", "browserHash": "84f752d1",
"optimized": { "optimized": {
"three": { "three": {
"src": "../../three/build/three.module.js", "src": "../../three/build/three.module.js",
"file": "three.js", "file": "three.js",
"fileHash": "2e49ea84", "fileHash": "a5c835fb",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/Addons.js": { "three/examples/jsm/Addons.js": {
"src": "../../three/examples/jsm/Addons.js", "src": "../../three/examples/jsm/Addons.js",
"file": "three_examples_jsm_Addons__js.js", "file": "three_examples_jsm_Addons__js.js",
"fileHash": "a119f2f8", "fileHash": "aa17f873",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/libs/tween.module.js": { "three/examples/jsm/libs/tween.module.js": {
"src": "../../three/examples/jsm/libs/tween.module.js", "src": "../../three/examples/jsm/libs/tween.module.js",
"file": "three_examples_jsm_libs_tween__module__js.js", "file": "three_examples_jsm_libs_tween__module__js.js",
"fileHash": "4f2aca7a", "fileHash": "b4479a8c",
"needsInterop": false "needsInterop": false
} }
}, },

BIN
site/real_game/textures/testTmp.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB