From 79833ede555a0cf2dc4d37316602ce44ef16799e Mon Sep 17 00:00:00 2001 From: Hugo Bourgeon Date: Thu, 22 Aug 2024 19:03:55 +0200 Subject: [PATCH] Game - Add deltaTime of player bar - Add top jumper animation --- site/real_game/class/Map.js | 53 ++++++++++++++++++++-------------- site/real_game/class/Player.js | 28 +++++++++++------- site/real_game/main.js | 22 ++++++++++++-- 3 files changed, 67 insertions(+), 36 deletions(-) diff --git a/site/real_game/class/Map.js b/site/real_game/class/Map.js index 50f1447..7d59c99 100644 --- a/site/real_game/class/Map.js +++ b/site/real_game/class/Map.js @@ -6,7 +6,7 @@ /* By: hubourge +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ -/* Updated: 2024/08/22 16:35:14 by hubourge ### ########.fr */ +/* Updated: 2024/08/22 18:59:54 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -43,9 +43,7 @@ class Map ballIsOnJumper = { can: true }; - previousTime = Date.now(); - deltaTime = 1; - + constructor(scene, length, obstacles) { this.scene = scene; @@ -262,7 +260,7 @@ class Map } ); } - #animationGravityChanger(group) + #animationGravityChanger(group, onTop) { const geometry1 = new THREE.TorusGeometry(1.5, 0.05, 12, 24); const material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); @@ -278,7 +276,10 @@ class Map this.scene.add(ring1); interval = setInterval(() => { - ring1.position.y += speed; + if (onTop) + ring1.position.y -= speed; + else + ring1.position.y += speed; ring1.material.opacity -= 0.02; speed *= 0.90; if (ring1.material.opacity == 0) @@ -323,11 +324,6 @@ class Map update(ball) { - // const currentTime = Date.now(); - // this.deltaTime = (((currentTime - this.previousTime) / 10) + this.deltaTime) / 2; - // this.previousTime = currentTime; - // console.log(deltaTime); - for (let i = 0; i < this.arrObject.length; i++) { if (this.arrObject[i].name == "wallLeft") @@ -366,29 +362,42 @@ class Map const distance = ball.object.position.distanceTo(cylinder.position); const speed = 0.1; + // Detect if the ball is on the jumper if (distance < 0.25 && this.ballIsOnJumper.can) { this.ballIsOnJumper.can = false; ball.changeGravity(this.ballIsOnJumper); - this.#animationGravityChanger(this.arrObject[i].mesh); + this.#animationGravityChanger(this.arrObject[i].mesh, false); } - } - if (this.arrObject[i].type == "jumperBottom") - { + + // Gravity changer animation for (let j = 2; j < this.arrObject[i].mesh.children.length - 1; j++) { - this.arrObject[i].mesh.children[j].rotation.x = this.deltaTime * Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.PI / 2; - this.arrObject[i].mesh.children[j].rotation.y = this.deltaTime * Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;; - this.arrObject[i].mesh.children[j].position.y = this.deltaTime * Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.03 + ( 0.25 * (j - 2) / 2) + 0.25; + this.arrObject[i].mesh.children[j].rotation.x = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.PI / 2; + this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;; + this.arrObject[i].mesh.children[j].position.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.03 + ( 0.25 * (j - 2) / 2) + 0.25; } } - if (this.arrObject[i].type == "jumperTop") + if (this.arrObject[i].type == 'jumperTop') { + const cylinder = this.arrObject[i].mesh.children[5]; + const distance = ball.object.position.distanceTo(cylinder.position); + const speed = 0.1; + + // Detect if the ball is on the jumper + if (distance < 0.4 && this.ballIsOnJumper.can) + { + this.ballIsOnJumper.can = false; + ball.changeGravity(this.ballIsOnJumper); + this.#animationGravityChanger(this.arrObject[i].mesh, true); + } + + // Gravity changer animation for (let j = 2; j < this.arrObject[i].mesh.children.length - 1; j++) { - this.arrObject[i].mesh.children[j].rotation.x = this.deltaTime * Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.PI / 2; - this.arrObject[i].mesh.children[j].rotation.y = this.deltaTime * Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;; - this.arrObject[i].mesh.children[j].position.y = this.deltaTime * Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.03 + ( 0.25 * (j - 2) / 2) + 3.25; + this.arrObject[i].mesh.children[j].rotation.x = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.PI / 2; + this.arrObject[i].mesh.children[j].rotation.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.1 + Math.cos(Date.now() * 0.001) * 0.1;; + this.arrObject[i].mesh.children[j].position.y = Math.sin(Date.now() * 0.001 + (j - 2) * 5) * 0.03 + ( 0.25 * (j - 2) / 2) + 3.25; } } } diff --git a/site/real_game/class/Player.js b/site/real_game/class/Player.js index c70a170..f58728e 100644 --- a/site/real_game/class/Player.js +++ b/site/real_game/class/Player.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* Player.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ -/* Updated: 2024/08/22 00:52:14 by edbernar ### ########.fr */ +/* Updated: 2024/08/22 17:06:28 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -50,11 +50,13 @@ class Player pressedButton = []; object = null; camera = null; - speed = 0.1; + speed = 4; cameraFixed = false; interval = null; isOnPointAnim = false; limits = {}; + previousTime = Date.now(); + deltaTime = 1; constructor (object, map) { @@ -219,6 +221,10 @@ class Player update() { + const currentTime = Date.now(); + this.deltaTime = (currentTime - this.previousTime) / 1000; + this.previousTime = currentTime; + let i; i = 0; @@ -229,9 +235,9 @@ class Player if (this.interval) clearInterval(this.interval); this.interval = setInterval(() => { - this.object.position.y += this.speed; + this.object.position.y += this.speed / 40; if (!this.cameraFixed && !this.isOnPointAnim) - this.camera.position.y += (this.speed / 2); + this.camera.position.y += (this.speed / 80); if (this.object.position.y >= this.limits.up) { clearInterval(this.interval); @@ -244,9 +250,9 @@ class Player if (this.interval) clearInterval(this.interval); this.interval = setInterval(() => { - this.object.position.y -= this.speed; + this.object.position.y -= this.speed / 40; if (!this.cameraFixed && !this.isOnPointAnim) - this.camera.position.y -= (this.speed / 2); + this.camera.position.y -= (this.speed / 80); if (this.object.position.y <= this.limits.down) { clearInterval(this.interval); @@ -257,15 +263,15 @@ class Player } if (this.pressedButton[i] == 'd' && this.object.position.x < this.limits.right) { - this.object.position.x += this.speed; + this.object.position.x += this.speed * this.deltaTime; if (!this.cameraFixed && !this.isOnPointAnim) - this.camera.position.x += this.speed; + this.camera.position.x += this.speed * this.deltaTime; } if (this.pressedButton[i] == 'a' && this.object.position.x > this.limits.left) { - this.object.position.x -= this.speed; + this.object.position.x -= this.speed * this.deltaTime; if (!this.cameraFixed && !this.isOnPointAnim) - this.camera.position.x -= this.speed; + this.camera.position.x -= this.speed * this.deltaTime; } i++; } diff --git a/site/real_game/main.js b/site/real_game/main.js index 37c9a36..947cf48 100644 --- a/site/real_game/main.js +++ b/site/real_game/main.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* main.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ -/* Updated: 2024/08/22 10:48:29 by edbernar ### ########.fr */ +/* Updated: 2024/08/22 17:11:54 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -16,6 +16,7 @@ import { Map } from './class/Map' import { Ball } from './class/Ball' import { Opponent } from './class/Opponent' import { OrbitControls } from 'three/examples/jsm/Addons.js'; +import Stats from 'stats.js'; /* Controls : @@ -38,6 +39,11 @@ Controls : let debug = false; +// ------------------- Stats -------------------- // +const stats = new Stats(); +stats.showPanel(0); // 0: fps, 1: ms, 2: mémoire +document.body.appendChild(stats.dom); + function createBarPlayer(color) { const geometry = new THREE.BoxGeometry(1, 0.1, 0.1); @@ -48,8 +54,17 @@ function createBarPlayer(color) return (mesh); } +let previousTime = Date.now(); function loop() { + stats.begin(); + // ===== FPS locker ===== // + const currentTime = Date.now(); + if (currentTime - previousTime < 1000 / 60) + return ; + previousTime = currentTime; + // ====================== // + player.update(); map.update(ball); if (debug) @@ -59,7 +74,8 @@ function loop() } else renderer.render(scene, player.camera); - + + stats.end(); } const scene = new THREE.Scene();