handle player's death

js/Env.js

@@ -102,6 +102,8 @@ export class Env {
      * Animate all the entities in the environnement
      */
     animate = () => {
+        let playerDead = false;
+
         // Retrieve ennemies
         const ennemies = this.elements
             .filter((entityData) => entityData[1] == TypeEntity.ennemy)
@@ -117,10 +119,9 @@ export class Env {
                         !player.animation(ennemies.map((object) => object.data))
                     ) {
                         // If animation returned false, the player died!
-                        console.log("player died!");
-                        // TODO: Stop the game
-                        //       Destroy the player?
-                        //       End game
+                        player.deadAnimation();
+
+                        playerDead = true;
                     }
                 }
             });
@@ -132,6 +133,8 @@ export class Env {
                 ennemy.data.position.x = ennemy.startPos + Math.random() * 20;
             }
         });
+
+        return playerDead;
     };
 
     /**
@@ -144,8 +147,12 @@ export class Env {
      * Update the game logic
      */
     update = () => {
-        this.animate();
+        if (this.animate()) {
+            return true;
+        }
         this.render();
+
+        return false;
     };
 
     /**

js/Player.js

@@ -117,4 +117,8 @@ export class Player extends Cube {
         // No ennemies found
         return false;
     };
+
+    deadAnimation = () => {
+        console.log("player died!");
+    };
 }

js/main.js

@@ -56,7 +56,42 @@ const main = () => {
         const delta = env.clock.getDelta();
         const ticks = Math.round(delta / (1 / 120));
         for (let i = 0; i < ticks; i++) {
-            env.update();
+            if (env.update()) {
+                let end = document.createElement("p");
+                end.textContent = "Partie terminée !";
+                end.style =
+                    "margin: 0; \
+                     position: absolute; \
+                     top: 50%; \
+                     left: 40%; \
+                     font-size: 400%; \
+                     font-family: sans-serif; \
+                     color: white; \
+                     transform: translate(-50%, -50%) }";
+                document.body.appendChild(end);
+
+                let restart = document.createElement("button");
+                restart.textContent = "Cliquez ici pour redémarrer";
+                restart.style =
+                    "margin: 0; \
+                     position: absolute; \
+                     top: 60%; \
+                     left: 27%; \
+                     border: none; \
+                     background: none; \
+                     color: white; \
+                     font-size: 400%; \
+                     font-family: sans-serif; \
+                     transform: translate(-50%, -50%) }";
+                document.body.appendChild(restart);
+
+                restart.addEventListener("click", () => {
+                    location.href = location.href;
+                });
+
+                gui.destroy();
+                return;
+            }
         }
 
         score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`;