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

Game

Browse Source 
- Create class video
   - Easy to set up video on banner
   - Start extraction of variable to set up next static dispose
This commit is contained in:
Hugo Bourgeon
2024-08-26 20:24:27 +02:00
parent 40c70bcac5
commit 194b723c02
8 changed files with 241 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,14 +3,15 @@
/* ::: :::::::: */
/* Ball.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */
/* Updated: 2024/08/26 17:19:01 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js';
import * as THREE from '/node_modules/three/build/three.module.js';
// import * as THREE from '/static/javascript/three/build/three.module.js';
/*
Todo (Eddy) :

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

@ -3,28 +3,74 @@
/* ::: :::::::: */
/* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */
/* Updated: 2024/08/26 20:21:15 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js';
// import * as THREE from '/static/javascript/three/build/three.module.js';
import * as THREE from '/node_modules/three/build/three.module.js';
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é (OK)
*/
import { Video } from './Video.js';
const loader = new GLTFLoader();
let scene = null;
// Plane
let geometryPlane = null;
let materialPlane = null;
let meshPlane = null;
let textureLoaderPlane = null;
let texturePlane = null;
// Border wall
let geometryWall = null;
let materialWall = null;
let meshWall = null;
// Gravity changer
let geometry1 = null;
let material1 = null;
let ring1 = null;
let geometry2 = null;
let material2 = null;
let ring2 = null;
let geometry3 = null;
let material3 = null;
let ring3 = null;
let geometry4 = null;
let material4 = null;
let circle1 = null;
let geometry5 = null;
let material5 = null;
let circle2 = null;
let geometry6 = null;
let material6 = null;
let collider = null;
let groupJumper = null;
// Wall obstacle
let geometryWallObs = null;
let materialWallObs = null;
let meshWallObs = null;
// Banner
let videoCanvas = null;
let video1 = null;
let video2 = null;
let video3 = null;
let video4 = null;
let video5 = null;
let videoCanvasTexture = null;
let materialCanvas = null;
// Gravity changer animation
let geometryGC = null;
let materialGC = null;
let ringGC = null;
let landmarkGC = null;
let interval = null;
class Map
{
scene = null;
arrObject = [];
ballObject = null;
mapLength = 0;
@ -43,10 +89,24 @@ class Map
ballIsOnJumper = {
can: true
};
constructor(scene, length, obstacles)
static create()
{
this.scene = scene;
}
static dispose()
{
// Plane
// Border wall
// Gravity changer
// Wall obstacle
// Banner
// Gravity changer animation
}
constructor(sceneToSet, length, obstacles)
{
scene = sceneToSet;
this.centerPos.x = 0;
this.centerPos.y = 0.15;
this.centerPos.z = -length / 2 + length / 2;
@ -65,8 +125,10 @@ class Map
{
for (let i = 0; i < this.arrObject.length; i++)
{
if (this.arrObject[i].type == 'jumper')
this.#animationGravityChanger(this.arrObject[i].mesh)
if (this.arrObject[i].type == 'jumperTop')
this.#animationGravityChanger(this.arrObject[i].mesh, true)
if (this.arrObject[i].type == 'jumperBottom')
this.#animationGravityChanger(this.arrObject[i].mesh, false)
}
}
})
@ -81,29 +143,27 @@ class Map
throw Error("Name already exist.");
}
const geometry = new THREE.PlaneGeometry(x, y);
let material = null;
let mesh = null;
geometryPlane = new THREE.PlaneGeometry(x, y);
if (typeof(visual) == 'string')
{
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load(visual);
material = new THREE.MeshPhysicalMaterial({ map: texture });
textureLoaderPlane = new THREE.TextureLoader();
texturePlane = textureLoaderPlane.load(visual);
materialPlane = new THREE.MeshPhysicalMaterial({ map: texturePlane });
}
else if (typeof(visual) == 'number')
material = new THREE.MeshPhysicalMaterial({ color: visual });
materialPlane = new THREE.MeshPhysicalMaterial({ color: visual });
else
material = new THREE.MeshPhysicalMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(rot);
materialPlane = new THREE.MeshPhysicalMaterial();
meshPlane = new THREE.Mesh(geometryPlane, materialPlane);
meshPlane.rotateX(rot);
if (isBottom)
mesh.position.set(0, 0.15, 0);
meshPlane.position.set(0, 0.15, 0);
else
mesh.position.set(0, 3.15, 0);
this.arrObject.push({mesh: mesh, name: name, type: "plane"});
mesh.receiveShadow = true;
return (mesh);
meshPlane.position.set(0, 3.15, 0);
this.arrObject.push({mesh: meshPlane, name: name, type: "plane"});
meshPlane.receiveShadow = true;
return (meshPlane);
};
#createWall(x, y, z, name)
@ -113,15 +173,15 @@ class Map
if (this.arrObject[i].name == name)
throw Error("Name already exist.");
}
const geometry = new THREE.BoxGeometry(0.05, 0.5, 0.75);
const material = new THREE.MeshPhysicalMaterial();
const mesh = new THREE.Mesh(geometry, material);
geometryWall = new THREE.BoxGeometry(0.05, 0.5, 0.75);
materialWall = new THREE.MeshPhysicalMaterial();
meshWall = new THREE.Mesh(geometryWall, materialWall);
mesh.position.set(x, y, z);
material.transparent = true;
material.opacity = 0.5;
this.arrObject.push({mesh: mesh, name: name, type: "wall"});
return (mesh);
meshWall.position.set(x, y, z);
materialWall.transparent = true;
materialWall.opacity = 0.5;
this.arrObject.push({mesh: meshWall, name: name, type: "wall"});
return (meshWall);
};
#createGravityChanger(x, y, z, name, typeName, onTop)
@ -131,98 +191,97 @@ class Map
if (this.arrObject[i].name == name)
throw Error("Name already exist.");
}
const geometry1 = new THREE.TorusGeometry(1, 0.1, 12, 24);
const material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
const ring1 = new THREE.Mesh(geometry1, material1);
geometry1 = new THREE.TorusGeometry(1, 0.1, 12, 24);
material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ring1 = new THREE.Mesh(geometry1, material1);
ring1.rotateX(-Math.PI / 2);
ring1.position.set(0, 0, 0);
ring1.scale.set(0.2, 0.2, 0.2);
material1.transparent = true;
material1.opacity = 0.75;
const geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24);
const material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
const ring2 = new THREE.Mesh(geometry2, material2);
geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24);
material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ring2 = new THREE.Mesh(geometry2, material2);
ring2.rotateX(-Math.PI / 2);
ring2.position.set(0, 0 + 0.1, 0);
ring2.scale.set(0.18, 0.18, 0.18);
material2.transparent = true;
material2.opacity = 0.65;
const geometry3 = new THREE.TorusGeometry(1, 0.1, 12, 24);
const material3 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
const ring3 = new THREE.Mesh(geometry3, material3);
geometry3 = new THREE.TorusGeometry(1, 0.1, 12, 24);
material3 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ring3 = new THREE.Mesh(geometry3, material3);
ring3.rotateX(-Math.PI / 2);
ring3.position.set(0, 0 + 0.2, 0);
ring3.scale.set(0.16, 0.16, 0.16);
material3.transparent = true;
material3.opacity = 0.35;
const geometry0 = new THREE.CircleGeometry(0.2, 24);
const material0 = new THREE.MeshPhysicalMaterial({color: 0xaaffaa});
const circle1 = new THREE.Mesh(geometry0, material0);
geometry4 = new THREE.CircleGeometry(0.2, 24);
material4 = new THREE.MeshPhysicalMaterial({color: 0xaaffaa});
circle1 = new THREE.Mesh(geometry4, material4);
circle1.rotateX(-Math.PI / 2);
circle1.position.set(0, 0 - 0.048, 0);
const geometry = new THREE.CircleGeometry(0.24, 24);
const material = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
const circle2 = new THREE.Mesh(geometry, material);
geometry5 = new THREE.CircleGeometry(0.24, 24);
material5 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
circle2 = new THREE.Mesh(geometry5, material5);
circle2.rotateX(-Math.PI / 2);
circle2.position.set(0, 0 - 0.049, 0);
const geometry4 = new THREE.CylinderGeometry(0.15, 0.15, 0.35);
const material4 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
const collider = new THREE.Mesh(geometry4, material4);
geometry6 = new THREE.CylinderGeometry(0.15, 0.15, 0.35);
material6 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
collider = new THREE.Mesh(geometry6, material6);
collider.position.set(0, 0 + 0.1, 0);
material4.transparent = true;
material4.opacity = 0.1;
material6.transparent = true;
material6.opacity = 0.1;
const group = new THREE.Group();
group.add(ring1);
group.add(ring2);
group.add(ring3);
group.add(circle1);
group.add(circle2);
group.add(collider);
groupJumper = new THREE.Group();
groupJumper.add(ring1);
groupJumper.add(ring2);
groupJumper.add(ring3);
groupJumper.add(circle1);
groupJumper.add(circle2);
groupJumper.add(collider);
// Set group position groud / top
for (let i = 0; i < group.children.length && onTop; i++)
group.children[i].position.set(x, y - 0.1, z);
for (let i = 0; i < group.children.length && !onTop; i++)
group.children[i].position.set(x, y, z);
// Set groupJumper position groud / top
for (let i = 0; i < groupJumper.children.length && onTop; i++)
groupJumper.children[i].position.set(x, y - 0.1, z);
for (let i = 0; i < groupJumper.children.length && !onTop; i++)
groupJumper.children[i].position.set(x, y, z);
let distanceY = [-0.04, -0.14, -0.24, 0.048, 0.049, -0.125];
let rotate = [0, 0, 0, 1, 1, 0];
// Set distance between each object
for (let i = 0; i < group.children.length; i++)
for (let i = 0; i < groupJumper.children.length; i++)
{
if (onTop)
{
if (rotate[i])
group.children[i].rotateX(Math.PI);
group.children[i].position.set(group.children[i].position.x, group.children[i].position.y + distanceY[i], group.children[i].position.z);
groupJumper.children[i].rotateX(Math.PI);
groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y + distanceY[i], groupJumper.children[i].position.z);
}
else
group.children[i].position.set(group.children[i].position.x, group.children[i].position.y - distanceY[i], group.children[i].position.z);
groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y - distanceY[i], groupJumper.children[i].position.z);
}
this.arrObject.push({mesh: group, name: name, type: typeName});
this.scene.add(group);
this.arrObject.push({mesh: groupJumper, name: name, type: typeName});
scene.add(groupJumper);
};
#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);
geometryWallObs = new THREE.BoxGeometry(size, 0.5, 0.1);
materialWallObs = new THREE.MeshPhysicalMaterial({color: 0xaaaafe});
meshWallObs = new THREE.Mesh(geometryWallObs, materialWallObs);
if (onTop)
mesh.position.set(x, this.playerLimits.up - 0.1, y);
meshWallObs.position.set(x, this.playerLimits.up - 0.1, y);
else
mesh.position.set(x, 0.4, y);
return (mesh);
meshWallObs.position.set(x, 0.4, y);
return (meshWallObs);
}
/* Todo (Hugo) :
@ -236,52 +295,48 @@ class Map
#createBanner()
{
// Create canvas
const videoCanvas = document.createElement('canvas');
videoCanvas = document.createElement('canvas');
const ctx = videoCanvas.getContext('2d');
videoCanvas.width = 100 * 2.33 * 20;
videoCanvas.height = 100;
// Load videos
const video1 = document.createElement('video');
video1.src = '../textures/video/catch.mp4';
video1.muted = true;
video1.autoplay = true;
video1.loop = true;
video1.addEventListener('loadeddata', () => {
video1.play();
drawVideoOnCanvas();
});
let path = [
'../textures/video/goal2.webm',
'../textures/video/pingpong.mp4',
'../textures/video/catch.mp4',
'../textures/video/easteregg.webm',
'../textures/video/fortnite.mp4',
]
path.sort(() => Math.random() - 0.5);
const video2 = document.createElement('video');
video2.src = '../textures/video/pingpong.mp4';
video2.muted = true;
video2.autoplay = true;
video2.loop = true;
video2.addEventListener('loadeddata', () => {
video2.play();
drawVideoOnCanvas();
});
const nbVideos = 2; // 1, 2
const nbImages = 2; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img
let vSettings = [
{video: video1, imageWidth: 100 * 2.33, imageHeight: 100}, // 2 images
{video: video2, imageWidth: 100 * 2.33, imageHeight: 100}, // 4 images
{video: video1, imageWidth: 100 * 2.33, imageHeight: 100}, // 8 images
{video: video2, imageWidth: 100 * 2.33, imageHeight: 100}, // 16 images
];
let vSettings = [];
let spacingImages = [
100 * 2.33 * 10 - (100 * 2.33),
100 * 2.33 * 5 - (100 * 2.33),
100 * 2.33 * 2.5 - (100 * 2.33),
100 * 2.33 * 1.25 - (100 * 2.33),
100 * 2.33 * 10 - (100 * 2.33), // 2 images
100 * 2.33 * 5 - (100 * 2.33), // 4 images
100 * 2.33 * 2.5 - (100 * 2.33), // 8 images
100 * 2.33 * 1.25 - (100 * 2.33), // 16 images
];
const nbVideos = 5; // 1, 2, 3, 4, 5
const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img
const startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length;
for (let i = startIndex; i < nbVideos + startIndex; i++)
{
let videoTmp = new Video(path[i]).video;
videoTmp.addEventListener('loadeddata', () => {
videoTmp.play();
drawVideoOnCanvas();
});
vSettings.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100});
}
function drawVideoOnCanvas() {
ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height);
if (nbVideos == 0)
return ;
let nbDraw = 0;
let vIndex = 0;
let y = 0;
@ -300,21 +355,21 @@ class Map
}
// Create texture
const videoCanvasTexture = new THREE.CanvasTexture(videoCanvas);
videoCanvasTexture = new THREE.CanvasTexture(videoCanvas);
videoCanvasTexture.wrapS = THREE.RepeatWrapping;
videoCanvasTexture.wrapT = THREE.RepeatWrapping;
videoCanvasTexture.repeat.set(-1, 1);
const material = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide });
materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true});
// videoCanvas.innerHTML = 'Test'; // ca sert ca eddy ?
// videoCanvas.innerHTML = 'Test'; // ca sert ca eddy ? Repond stp ?
loader.load( '../blender/exported/banner.glb', (gltf) => {
this.banner = gltf.scene.children[0];
this.banner.material = material;
this.banner.material = materialCanvas;
this.banner.position.y += 1.7;
this.banner.rotation.x = (Math.PI);
this.banner.rotation.y += -0.15;
this.scene.add(gltf.scene);
scene.add(gltf.scene);
setInterval(() => {
this.banner.rotation.y += 0.001;
}, 10);
@ -330,27 +385,26 @@ class Map
#animationGravityChanger(group, onTop)
{
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;
geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24);
materialGC = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ringGC = new THREE.Mesh(geometryGC, materialGC);
landmarkGC = group.children[0];
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);
ringGC.rotateX(-Math.PI / 2);
ringGC.position.set(landmarkGC.position.x, landmarkGC.position.y, landmarkGC.position.z);
ringGC.scale.set(0.2, 0.2, 0.2);
materialGC.transparent = true;
scene.add(ringGC);
interval = setInterval(() => {
if (onTop)
ring1.position.y -= speed;
ringGC.position.y -= speed;
else
ring1.position.y += speed;
ring1.material.opacity -= 0.02;
ringGC.position.y += speed;
materialGC.opacity -= 0.02;
speed *= 0.90;
if (ring1.material.opacity == 0)
if (materialGC.opacity == 0)
clearInterval(interval);
}, 10);
}
@ -366,7 +420,7 @@ class Map
for (let i = 0; i < wallPos.length; i++)
{
if (Math.random() < 0.5)
this.scene.add(this.#createWallObstacle(wallPos[i].x, wallPos[i].y, wallPos[i].z, wallPos[i].onTop));
scene.add(this.#createWallObstacle(wallPos[i].x, wallPos[i].y, wallPos[i].z, wallPos[i].onTop));
}
const type = "gravityChanger";

8
site/real_game/class/Opponent.js
View File

@ -3,15 +3,17 @@
/* ::: :::::::: */
/* Opponent.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/21 10:34:49 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */
/* Updated: 2024/08/26 17:19:16 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
import { playerExist } from './Player'
import * as THREE from '/static/javascript/three/build/three.module.js';
// import * as THREE from '/static/javascript/three/build/three.module.js';
import * as THREE from '/node_modules/three/build/three.module.js';
let opponentExist = false;

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

@ -3,14 +3,15 @@
/* ::: :::::::: */
/* Player.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */
/* Updated: 2024/08/26 17:19:30 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js';
import * as THREE from '/node_modules/three/build/three.module.js';
// import * as THREE from '/static/javascript/three/build/three.module.js';
/*
Explication du code :

30
site/real_game/class/Video.js Normal file
View File

@ -0,0 +1,30 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* Video.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/26 18:57:00 by hubourge #+# #+# */
/* Updated: 2024/08/26 19:20:32 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
// import * as THREE from '/static/javascript/three/build/three.module.js';
import * as THREE from '/node_modules/three/build/three.module.js';
class Video
{
video = null;
constructor(path)
{
this.video = document.createElement('video');
this.video.src = path;
this.video.muted = true;
this.video.autoplay = true;
this.video.loop = true;
}
}
export { Video };

7
site/real_game/main.js
View File

@ -3,14 +3,15 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */
/* Updated: 2024/08/26 17:25:57 by hubourge ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js';
import * as THREE from '/node_modules/three/build/three.module.js';
// import * as THREE from '/static/javascript/three/build/three.module.js';
import { Player } from './class/Player'
import { Map } from './class/Map'
import { Ball } from './class/Ball'

BIN
site/real_game/textures/video/easteregg.webm Normal file
View File

Binary file not shown.

BIN
site/real_game/textures/video/goal2.webm Normal file
View File

Binary file not shown.