Game
- Add fade layout while goal3
This commit is contained in:
@ -6,7 +6,7 @@
|
||||
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */
|
||||
/* Updated: 2024/09/02 18:08:13 by hubourge ### ########.fr */
|
||||
/* Updated: 2024/09/03 17:18:13 by hubourge ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -33,6 +33,8 @@ let player2Body = null;
|
||||
let speed = 3;
|
||||
let initialZ = 0;
|
||||
let score = {player1: 0, player2: 0};
|
||||
let onUpdate = false;
|
||||
const scoreElement = document.getElementById('score');
|
||||
|
||||
class Map
|
||||
{
|
||||
@ -123,6 +125,9 @@ class Map
|
||||
vec3.z += 0.1;
|
||||
break;
|
||||
}
|
||||
|
||||
scoreElement.innerHTML = score.player1 + " - " + score.player2;
|
||||
|
||||
});
|
||||
|
||||
ground.position.copy(groundBody.position);
|
||||
@ -158,6 +163,8 @@ class Map
|
||||
|
||||
static update()
|
||||
{
|
||||
if (onUpdate)
|
||||
return ;
|
||||
world.step(timeStep);
|
||||
|
||||
if (ballBody.position.x > 20)
|
||||
@ -175,6 +182,36 @@ class Map
|
||||
|
||||
static reCreate(dirLeft)
|
||||
{
|
||||
onUpdate = true;
|
||||
document.getElementsByTagName('canvas')[3].style.animation = 'fadeIn 0.199s';
|
||||
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(0)';
|
||||
|
||||
setTimeout(() => {
|
||||
speed = 3;
|
||||
if (dirLeft)
|
||||
{
|
||||
vec3.x = -3;
|
||||
vec3.y = 0;
|
||||
vec3.z = Math.random() * 10 % 4 - 2;
|
||||
}
|
||||
else
|
||||
{
|
||||
vec3.x = 3;
|
||||
vec3.y = 0;
|
||||
vec3.z = Math.random() * 10 % 4 - 2;
|
||||
}
|
||||
initialZ = vec3.z;
|
||||
|
||||
onUpdate = false;
|
||||
}, 1500);
|
||||
|
||||
setTimeout(() => {
|
||||
if (dirLeft)
|
||||
score.player2++;
|
||||
else
|
||||
score.player1++;
|
||||
|
||||
ballBody.velocity.set(0,0,0);
|
||||
ballBody.position.set(0, 0.15, 0);
|
||||
ball.position.copy(ballBody.position);
|
||||
player1Body.position.set(-12, 0.4, 0);
|
||||
@ -182,25 +219,10 @@ class Map
|
||||
player2Body.position.set(12, 0.4, 0);
|
||||
player2.position.copy(player2Body.position);
|
||||
|
||||
speed = 3;
|
||||
if (dirLeft)
|
||||
{
|
||||
score.player2++;
|
||||
vec3.x = -3;
|
||||
vec3.y = 0;
|
||||
vec3.z = Math.random() * 10 % 4 - 2;
|
||||
}
|
||||
else
|
||||
{
|
||||
score.player1++;
|
||||
vec3.x = 3;
|
||||
vec3.y = 0;
|
||||
vec3.z = Math.random() * 10 % 4 - 2;
|
||||
}
|
||||
initialZ = vec3.z;
|
||||
ballBody.velocity.set(vec3.x, vec3.y, vec3.z);
|
||||
|
||||
console.log("score", score);
|
||||
document.getElementsByTagName('canvas')[3].style.animation = 'fadeOut 0.199s';
|
||||
document.getElementsByTagName('canvas')[3].style.filter = 'brightness(1)';
|
||||
scoreElement.innerHTML = score.player1 + " - " + score.player2;
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -6,6 +6,6 @@
|
||||
<script src="./main.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p id="score" ></p>
|
||||
</body>
|
||||
</html>
|
@ -3,10 +3,10 @@
|
||||
/* ::: :::::::: */
|
||||
/* style.css :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/20 11:23:41 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/20 13:15:29 by edbernar ### ########.fr */
|
||||
/* Updated: 2024/09/03 17:13:58 by hubourge ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -34,3 +34,14 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#score {
|
||||
position: absolute;
|
||||
top : 5%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
font : Blippo, fantasy;
|
||||
font-weight: 900;
|
||||
font-size: 5vh;
|
||||
}
|
||||
|
Reference in New Issue
Block a user