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 6eb00a8fdf
commit 80f6fff1e0
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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 = {
up : 3,
down: 0.2,
left: -3,
right: 3,
left: -4,
right: 4,
}
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 tmp = this.camera;
@ -129,32 +129,44 @@ class Player
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);
document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(0)';
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);
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
document.getElementsByTagName('canvas')[0].style.filter = 'brightness(1)';
}, 300)
setTimeout(() => {
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
);
}
document.getElementsByTagName('canvas')[0].style.animation = 'fadeIn 0.199s';
setTimeout(() => {
document.getElementsByTagName('canvas')[0].style.animation = 'fadeOut 0.199s';
}, 300)
}, 4000);
}, 200)
}
update()

9
site/real_game/index.html
View File

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