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

Game

Browse Source 
- Update player class (all info in player.js in comment)
This commit is contained in:
Kum1ta
2024-08-19 23:57:19 +02:00
parent 227327fdf4
commit 6eb00a8fdf
9 changed files with 146 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,11 +6,10 @@
/* 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/19 00:42:13 by edbernar ### ########.fr */ /* Updated: 2024/08/19 23:55:40 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import * as THREE from 'three'; import * as THREE from 'three';
/* /*
@ -21,7 +20,7 @@ import * as THREE from 'three';
- Les lignes avec cleanup sont l'êquivalent d'un destructeur en CPP - Les lignes avec cleanup sont l'êquivalent d'un destructeur en CPP
- Pour appliquer des actions sur les touches, il suffit de faire ça dans la fonction - Pour appliquer des actions sur les touches, il suffit de faire ça dans la fonction
update en regardant si la touche voulue est dans la variable "pressedButton" update en regardant si la touche voulue est dans la variable "pressedButton"
- Par défaut, la caméra est accroché, si on veut qu'elle ne bouge plus, il faut - Par défaut, la caméra est accrochée, si on veut qu'elle ne bouge plus, il faut
modifier "cameraFixed" à true (se fait avec la touche 'm' en jeu) modifier "cameraFixed" à true (se fait avec la touche 'm' en jeu)
- Si on utilise une touche qui ne sera utilisée que pour un appui simple, il faudra la - Si on utilise une touche qui ne sera utilisée que pour un appui simple, il faudra la
mettre dans 'addEventListerner('keypress') et pas dans update() pour eviter les mettre dans 'addEventListerner('keypress') et pas dans update() pour eviter les
@ -29,6 +28,11 @@ 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)
@ -37,15 +41,18 @@ import * as THREE from 'three';
- Corriger bug quand changement de caméra (camera qui se remet au dessus - Corriger bug quand changement de caméra (camera qui se remet au dessus
quand on repasse au dessus alors qu'elle devrait être en dessous vu que la quand on repasse au dessus alors qu'elle devrait être en dessous vu que la
barre est en haut). Mais peut etre faire ça quand la barre aura des mouvements barre est en haut). Mais peut etre faire ça quand la barre aura des mouvements
définis sur la hauteur. définis sur la hauteur. (OK)
- 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
- Ajouter un zoom sur la camera de la fonction pointAnimation (OK)
*/ */
let playerExist = false; let playerExist = false;
const limits = { const limits = {
up : 2, up : 3,
down: 0.2, down: 0.2,
left: -4, left: -3,
right: 4, right: 3,
} }
class Player class Player
@ -55,15 +62,21 @@ class Player
camera = null; camera = null;
speed = 0.1; speed = 0.1;
cameraFixed = false; cameraFixed = false;
interval = null;
isOnPointAnim = false;
constructor (object, renderer) constructor (object)
{ {
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.camera = new THREE.PerspectiveCamera(80, 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.cleanup = new FinalizationRegistry((heldValue) => { this.cleanup = new FinalizationRegistry((heldValue) => {
playerExist = false; playerExist = false;
}) })
@ -90,60 +103,110 @@ class Player
}); });
document.addEventListener('keypress', (e) => { document.addEventListener('keypress', (e) => {
if (e.key == 'm') if (e.key == 'm' && !this.isOnPointAnim)
{ {
this.cameraFixed = !this.cameraFixed; this.cameraFixed = !this.cameraFixed;
if (!this.cameraFixed) if (!this.cameraFixed)
{ {
this.setCameraPosition( this.setCameraPosition(
this.object.position.x, this.object.position.x,
this.object.position.y + 0.5, this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7),
this.object.position.z + 1 this.object.position.z + 1
); );
this.camera.rotation.set(0, 0, 0); this.camera.rotation.set(0, 0, 0);
} }
else else
this.setCameraPosition(0, 1, 0.7) this.setCameraPosition(0, 1.5, 2.6);
} }
}); });
} }
pointAnimation(scene, ...lights)
{
const tmpCamera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera;
let interval = null;
const startColor = this.object.material.color.clone();
let hue = 0;
tmpCamera.position.set(3, 3, 3);
this.isOnPointAnim = true;
this.camera = tmpCamera;
interval = setInterval(() => {
tmpCamera.lookAt(this.object.position);
hue += 0.01;
if (hue > 1)
hue = 0;
this.object.material.color.setHSL(hue, 1, 0.5);
tmpCamera.fov -= 0.05;
tmpCamera.updateProjectionMatrix();
}, 10);
setTimeout(() => {
clearInterval(interval);
this.camera = tmp;
this.object.material.color.copy(startColor);
this.isOnPointAnim = false;
if (!this.cameraFixed)
{
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
);
}
}, 4000);
}
update() update()
{ {
let i; let i;
i = 0; i = 0;
if (this.cameraFixed)
this.camera.lookAt(new THREE.Vector3(this.object.position.x / 4, (this.object.position.y + 1) / 1.75, this.object.position.z - 1.5));
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 < limits.up)
{ {
this.object.position.y += this.speed; if (this.interval)
if (!this.cameraFixed) clearInterval(this.interval);
this.camera.position.y += (this.speed / 2); this.interval = setInterval(() => {
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)
{
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 > limits.down)
{ {
this.object.position.y -= this.speed; if (this.interval)
if (!this.cameraFixed) clearInterval(this.interval);
this.camera.position.y -= (this.speed / 2); this.interval = setInterval(() => {
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)
{
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 < limits.right)
{ {
this.object.position.x += this.speed; this.object.position.x += this.speed;
if (!this.cameraFixed) 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 > limits.left)
{ {
this.object.position.x -= this.speed; this.object.position.x -= this.speed;
if (!this.cameraFixed) if (!this.cameraFixed && !this.isOnPointAnim)
this.camera.position.x -= this.speed; this.camera.position.x -= this.speed;
} }
i++; i++;
} }
} }
@ -153,5 +216,4 @@ class Player
} }
}; };
export { Player }; export { Player };

17
site/real_game/main.js
View File

@ -6,7 +6,7 @@
/* 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/19 00:37:34 by edbernar ### ########.fr */ /* Updated: 2024/08/19 23:08:38 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -42,17 +42,24 @@ function createMap()
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const bar = createBarPlayer(0xed56ea); const bar = createBarPlayer(0xed56ea);
const renderer = new THREE.WebGLRenderer(); const renderer = new THREE.WebGLRenderer({antialias: true});
const player = new Player(bar, renderer); const player = new Player(bar);
const spotLight = new THREE.SpotLight(0xffffff, 1000, 0, Math.PI / 4); const spotLight = new THREE.SpotLight(0xffffff, 10000, 0, Math.PI / 4);
const ambiantLight = new THREE.AmbientLight(0xffffff, 1);
const map = createMap(); const map = createMap();
scene.add(player.object); scene.add(player.object);
scene.add(ambiantLight);
spotLight.position.set(0, 100, 0); spotLight.position.set(0, 100, 0);
scene.add(spotLight); scene.add(spotLight);
scene.add(map); scene.add(map);
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);
player.setCameraPosition(0, 0.5, 1)
document.addEventListener('keypress', (e) => {
if (e.key == 'g')
player.pointAnimation(scene);
})
renderer.setAnimationLoop(loop) renderer.setAnimationLoop(loop)

12
site/real_game/node_modules/.package-lock.json generated vendored
View File

@ -35,6 +35,18 @@
"node": ">=12" "node": ">=12"
} }
}, },
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
"integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==",
"cpu": [
"arm64"
],
"license": "MIT",
"os": [
"darwin"
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": { "node_modules/@rollup/rollup-linux-x64-gnu": {
"version": "4.21.0", "version": "4.21.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz",

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

@ -1,19 +1,19 @@
{ {
"hash": "0d872a36", "hash": "b5ed7c4e",
"configHash": "0b4c6e74", "configHash": "4027b9ee",
"lockfileHash": "db0c8729", "lockfileHash": "cd36b699",
"browserHash": "9bd24b43", "browserHash": "32c4be3f",
"optimized": { "optimized": {
"three": { "three": {
"src": "../../three/build/three.module.js", "src": "../../three/build/three.module.js",
"file": "three.js", "file": "three.js",
"fileHash": "cbcebf47", "fileHash": "aeffa42d",
"needsInterop": false "needsInterop": false
}, },
"three/examples/jsm/controls/OrbitControls.js": { "three/examples/jsm/controls/OrbitControls.js": {
"src": "../../three/examples/jsm/controls/OrbitControls.js", "src": "../../three/examples/jsm/controls/OrbitControls.js",
"file": "three_examples_jsm_controls_OrbitControls__js.js", "file": "three_examples_jsm_controls_OrbitControls__js.js",
"fileHash": "40fe091e", "fileHash": "fcc35eca",
"needsInterop": false "needsInterop": false
} }
}, },

3
site/real_game/node_modules/@rollup/rollup-darwin-arm64/README.md generated vendored Normal file
View File

@ -0,0 +1,3 @@
# `@rollup/rollup-darwin-arm64`
This is the **aarch64-apple-darwin** binary for `rollup`

19
site/real_game/node_modules/@rollup/rollup-darwin-arm64/package.json generated vendored Normal file
View File

@ -0,0 +1,19 @@
{
"name": "@rollup/rollup-darwin-arm64",
"version": "4.21.0",
"os": [
"darwin"
],
"cpu": [
"arm64"
],
"files": [
"rollup.darwin-arm64.node"
],
"description": "Native bindings for Rollup",
"author": "Lukas Taegert-Atkinson",
"homepage": "https://rollupjs.org/",
"license": "MIT",
"repository": "rollup/rollup",
"main": "./rollup.darwin-arm64.node"
}

BIN
site/real_game/node_modules/@rollup/rollup-darwin-arm64/rollup.darwin-arm64.node generated vendored Normal file
View File

Binary file not shown.

2
site/real_game/package-lock.json generated
View File

@ -5,6 +5,7 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"@rollup/rollup-darwin-arm64": "^4.21.0",
"rollup": "^4.21.0", "rollup": "^4.21.0",
"three": "^0.167.1", "three": "^0.167.1",
"vite": "^5.4.1" "vite": "^5.4.1"
@ -412,7 +413,6 @@
"arm64" "arm64"
], ],
"license": "MIT", "license": "MIT",
"optional": true,
"os": [ "os": [
"darwin" "darwin"
] ]

1
site/real_game/package.json
View File

@ -3,6 +3,7 @@
"dev": "vite" "dev": "vite"
}, },
"dependencies": { "dependencies": {
"@rollup/rollup-darwin-arm64": "^4.21.0",
"rollup": "^4.21.0", "rollup": "^4.21.0",
"three": "^0.167.1", "three": "^0.167.1",
"vite": "^5.4.1" "vite": "^5.4.1"