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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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';
const centerPos = {
x: 0,
y: 0.3,
z: -0.1
}
/*
Todo (Eddy) :
- Ajouter fonction pour changer la gravité de la balle
*/
class Ball
{
object = null;
object = null;
centerPos = {};
limits = {};
interval = null;
constructor(scene)
constructor(scene, map)
{
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);
}
@ -37,9 +42,66 @@ class Ball
mesh.receiveShadow = 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);
}
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 };

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

@ -3,29 +3,43 @@
/* ::: :::::::: */
/* 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/20 18:29:17 by hubourge ### ########.fr */
/* Updated: 2024/08/21 00:59:01 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
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
{
scene = null;
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;
constructor(scene, length)
{
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), "planeTop", false));
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, '/textures/testTmp.jpg'));
scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft"));
scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight"));
this.centerPos.x = 0;
@ -34,22 +48,36 @@ class Map
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++)
{
if (this.arrObject[i].name == name)
throw Error("Name already exist.");
}
const geometry = new THREE.PlaneGeometry(x, y);
const material = new THREE.MeshPhysicalMaterial()
const mesh = new THREE.Mesh(geometry, material);
const geometry = new THREE.PlaneGeometry(x, y);
let material = null;
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);
if (isBottom)
mesh.position.set(0, 0.15, -6);
else
mesh.position.set(0, 3.05, -6);
mesh.position.set(0, 3.15, -6);
this.arrObject.push({mesh: mesh, name: name});
mesh.receiveShadow = true;
return (mesh);
@ -67,6 +95,8 @@ class Map
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x, y, z);
mesh.material.transparent = true;
mesh.material.opacity = 0.5;
this.arrObject.push({mesh: mesh, name: name});
return (mesh);
};
@ -87,6 +117,24 @@ class Map
this.arrObject[i].mesh.position.z = ball.position.z;
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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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
*/
/*
Information :
- La map devra faire maximum 8 largueur car ça pose des problèmes avec la caméra fixe
/*
Todo (Eddy) :
- Ajouter une camera sur l'object (OK)
@ -48,12 +43,6 @@ import * as THREE from 'three';
*/
let playerExist = false;
const limits = {
up : 3,
down: 0.2,
left: -3,
right: 3,
}
class Player
{
@ -64,19 +53,22 @@ class Player
cameraFixed = false;
interval = null;
isOnPointAnim = false;
limits = {};
constructor (object)
constructor (object, map)
{
if (playerExist)
throw Error("Player is already init.");
playerExist = true;
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.object.position.x,
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) => {
playerExist = false;
})
@ -110,20 +102,20 @@ class Player
{
this.setCameraPosition(
this.object.position.x,
this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7),
this.object.position.z + 1
this.object.position.y - (this.object.position.y >= this.limits.up ? 0.7 : -0.7),
this.object.position.z + 2
);
this.camera.rotation.set(0, 0, 0);
}
else
this.setCameraPosition(0, 1.5, 2.6);
this.setCameraPosition(0, 1.5, 4);
}
});
}
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;
let interval = null;
const startColor = this.object.material.color.clone();
@ -136,7 +128,7 @@ class Player
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
}, 300)
setTimeout(() => {
tmpCamera.position.set(-3, 3, -3);
tmpCamera.position.set(-3, this.limits.up / 2 + 0.5, -3);
this.isOnPointAnim = true;
this.camera = tmpCamera;
interval = setInterval(() => {
@ -161,17 +153,13 @@ class Player
{
this.setCameraPosition(
this.object.position.x,
this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7),
this.object.position.z + 1
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);
// document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
// setTimeout(() => {
// document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
// }, 300)
}, 4000);
}, 200)
}
@ -183,7 +171,7 @@ class Player
i = 0;
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)
clearInterval(this.interval);
@ -191,14 +179,14 @@ class Player
this.object.position.y += this.speed;
if (!this.cameraFixed && !this.isOnPointAnim)
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);
this.interval = null;
}
}, 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)
clearInterval(this.interval);
@ -206,20 +194,20 @@ class Player
this.object.position.y -= this.speed;
if (!this.cameraFixed && !this.isOnPointAnim)
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);
this.interval = null;
}
}, 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;
if (!this.cameraFixed && !this.isOnPointAnim)
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;
if (!this.cameraFixed && !this.isOnPointAnim)

43
site/real_game/main.js
View File

@ -6,15 +6,14 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { Player } from './class/Player'
import { Map } from './class/Map'
import { OrbitControls } from 'three/examples/jsm/Addons.js';
import { update } from 'three/examples/jsm/libs/tween.module.js';
import { Ball } from './class/Ball'
function createBarPlayer(color)
{
@ -23,15 +22,16 @@ function createBarPlayer(color)
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0.2, 0);
mesh.castShadow = true;
return (mesh);
}
function loop()
{
player.update();
map.update(ball.object);
renderer.render(scene, player.camera);
// ===== test ball =====
}
const scene = new THREE.Scene();
@ -40,40 +40,12 @@ const bar = createBarPlayer(0xed56ea);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true;
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 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;
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(ambiantLight);
@ -82,6 +54,7 @@ scene.add(spotLight);
scene.background = new THREE.Color(0x1a1a1a);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
ball.initMoveBallTmp();
document.addEventListener('keypress', (e) => {
if (e.key == 'g')

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

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