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

Game

Browse Source 
- Update player class (point animation)
This commit is contained in:
Kum1ta
2024-08-20 14:51:01 +02:00
parent 108e753d22
commit 240182bb54
3 changed files with 78 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
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/19 23:55:40 by edbernar ### ########.fr */ /* Updated: 2024/08/20 14:33:51 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -51,8 +51,8 @@ let playerExist = false;
const limits = { const limits = {
up : 3, up : 3,
down: 0.2, down: 0.2,
left: -3, left: -4,
right: 3, right: 4,
} }
class Player class Player
@ -121,7 +121,7 @@ class Player
}); });
} }
pointAnimation(scene, ...lights) pointAnimation(scene)
{ {
const tmpCamera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000); const tmpCamera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10000);
const tmp = this.camera; const tmp = this.camera;
@ -129,32 +129,44 @@ class Player
const startColor = this.object.material.color.clone(); const startColor = this.object.material.color.clone();
let hue = 0; let hue = 0;
tmpCamera.position.set(3, 3, 3); document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s';
this.isOnPointAnim = true; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
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(() => { setTimeout(() => {
clearInterval(interval); document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
this.camera = tmp; document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
this.object.material.color.copy(startColor); }, 300)
this.isOnPointAnim = false; setTimeout(() => {
if (!this.cameraFixed) tmpCamera.position.set(3, 3, 3);
{ this.isOnPointAnim = true;
this.setCameraPosition( this.camera = tmpCamera;
this.object.position.x, interval = setInterval(() => {
this.object.position.y - (this.object.position.y >= limits.up ? 0.7 : -0.7), tmpCamera.lookAt(this.object.position);
this.object.position.z + 1 hue += 0.01;
); if (hue > 1)
} hue = 0;
}, 4000); 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
);
}
document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s';
setTimeout(() => {
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
}, 300)
}, 4000);
}, 200)
} }
update() update()

9
site/real_game/index.html
View File

@ -2,14 +2,7 @@
<html> <html>
<head> <head>
<title>Page</title> <title>Page</title>
<style> <link rel='stylesheet' type='text/css' href='style.css'>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<script src="./main.js" type="module"></script> <script src="./main.js" type="module"></script>
</head> </head>
<body> <body>

36
site/real_game/style.css Normal file
View File

@ -0,0 +1,36 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* style.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 11:23:41 by edbernar #+# #+# */
/* Updated: 2024/08/20 13:15:29 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@keyframes fadeIn {
from {
filter: brightness(1);
}
to {
filter: brightness(0);
}
}
@keyframes fadeOut {
from {
filter: brightness(0);
}
to {
filter: brightness(1);
}
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}