* add menu

* add demo

index.html

@@ -11,6 +11,9 @@
         <style>
             body {
                 margin: 0px;
+                background-color: black;
+                text-align: center;
+                font-family: sans-serif;
             }
         </style>
     </head>

js/Env.js

@@ -100,8 +100,9 @@ export class Env {
 
     /**
      * Animate all the entities in the environnement
+     * @param {boolean} demo
      */
-    animate = () => {
+    animate = (demo) => {
         let playerDead = false;
 
         // Retrieve ennemies
@@ -116,7 +117,10 @@ export class Env {
             .forEach((player) => {
                 if (player.animation) {
                     if (
-                        !player.animation(ennemies.map((object) => object.data))
+                        !player.animation(
+                            ennemies.map((object) => object.data),
+                            demo
+                        )
                     ) {
                         // If animation returned false, the player died!
                         playerDead = true;
@@ -143,9 +147,10 @@ export class Env {
 
     /**
      * Update the game logic
+     * @param {boolean} demo
      */
-    update = () => {
+    update = (demo) => {
-        if (this.animate()) {
+        if (this.animate(demo)) {
             return true;
         }
         this.render();

js/Game.js

@@ -0,0 +1,113 @@
+import { Env, TypeEntity } from "./Env.js";
+import { Plane } from "./Plane.js";
+import { Player } from "./Player.js";
+import { Quality } from "./utils.js";
+
+/**
+ * Jump event for the demo
+ */
+export const jumpDemo = new CustomEvent("jumpKey", {
+    detail: {
+        code: "Space",
+    },
+});
+
+/**
+ * Run the game
+ * @param {boolean} demo
+ */
+export const runGame = (demo) => {
+    // THREE.js
+    const env = new Env();
+    document.body.appendChild(env.getDomElement());
+
+    // World
+    const plan = new Plane(
+        window.innerWidth / 50,
+        10,
+        THREE.Color.NAMES.white,
+        THREE.Color.NAMES.black
+    );
+    env.addToScene(plan);
+
+    // Player
+    const player = new Player(THREE.Color.NAMES.pink);
+    env.addToScene(player, TypeEntity.player);
+
+    if (demo) {
+        addEventListener("jumpKey", (e) => player.controlUser(e.detail));
+    } else {
+        addEventListener("keypress", player.controlUser);
+    }
+
+    // Generate random map
+    env.generateRandomMap(10);
+
+    // GUI
+    const gui = new dat.gui.GUI({ closeOnTop: true });
+    const menu = Quality.buildGUI(env.quality);
+    for (const quality in menu) {
+        gui.add(menu, quality)
+            .listen()
+            .onFinishChange(() => {
+                Quality.update(env.setQuality, menu, quality);
+            });
+    }
+
+    let score = document.getElementById("score");
+    score.style =
+        "position: absolute; \
+         top: 10px; \
+         width: 100%; \
+         display: block; \
+         color: white; \
+         font-size: xx-large;";
+
+    /**
+     * Run the game
+     */
+    const animate = () => {
+        const delta = env.clock.getDelta();
+        const ticks = Math.round(delta / (1 / 120));
+        for (let i = 0; i < ticks; i++) {
+            if (env.update(demo)) {
+                let end = document.createElement("p");
+                end.textContent = "Partie terminée !";
+                end.style =
+                    "margin: 0; \
+                     position: absolute; \
+                     top: 50%; \
+                     left: 35%; \
+                     font-size: 400%; \
+                     color: white;";
+                document.body.appendChild(end);
+
+                let restart = document.createElement("button");
+                restart.textContent = "Cliquez ici pour redémarrer";
+                restart.style =
+                    "position: absolute; \
+                     top: 60%; \
+                     left: 27%; \
+                     border: none; \
+                     background: none; \
+                     color: white; \
+                     font-size: 400%;";
+                document.body.appendChild(restart);
+
+                restart.addEventListener("click", () => {
+                    location.href = location.href;
+                });
+
+                gui.destroy();
+                return;
+            }
+        }
+
+        score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`;
+
+        requestAnimationFrame(animate);
+    };
+
+    // Run it
+    animate();
+};

js/Player.js

@@ -1,5 +1,6 @@
 import { Cube } from "./Cube.js";
 import { Rotation } from "./utils.js";
+import { jumpDemo } from "./Game.js";
 
 export class Player extends Cube {
     constructor(color) {
@@ -14,9 +15,19 @@ export class Player extends Cube {
     /**
      * Play the player animation
      * @param {*} listEnnemies
+     * @param {boolean} demo
      * @returns boolean if the player is alive or not
      */
-    animation = (listEnnemies) => {
+    animation = (listEnnemies, demo) => {
+        if (demo) {
+            listEnnemies.forEach((ennemy) => {
+                const pos = ennemy.position.x - this.data.position.x;
+                if (pos < Math.random() * 2.8 + 0.2 && pos > 0) {
+                    dispatchEvent(jumpDemo);
+                }
+            });
+        }
+
         // If we jump
         if (this.movementData.state) {
             // Rotation

js/main.js

@@ -1,104 +1,66 @@
-import { Env, TypeEntity } from "./Env.js";
+import { runGame } from "./Game.js";
-import { Plane } from "./Plane.js";
-import { Player } from "./Player.js";
-import { Quality } from "./utils.js";
 
 window.addEventListener("load", () => main());
 
+/**
+ * Load the menu
+ */
 const main = () => {
-    // THREE.js
+    document.body.style = "background-color: black;";
-    const env = new Env();
-    document.body.appendChild(env.getDomElement());
 
-    // World
+    let titleGame = document.createElement("p");
-    const plan = new Plane(
+    titleGame.textContent = "GeometryDash 3D";
-        window.innerWidth / 50,
+    titleGame.style =
-        10,
+        "background: none; \
-        THREE.Color.NAMES.white,
-        THREE.Color.NAMES.black
-    );
-    env.addToScene(plan);
-
-    // Player
-    const player = new Player(THREE.Color.NAMES.pink);
-    env.addToScene(player, TypeEntity.player);
-    addEventListener("keypress", player.controlUser);
-
-    // Generate random map
-    env.generateRandomMap(10);
-
-    // GUI
-    const gui = new dat.gui.GUI({ closeOnTop: true });
-    const menu = Quality.buildGUI(env.quality);
-    for (const quality in menu) {
-        gui.add(menu, quality)
-            .listen()
-            .onFinishChange(() => {
-                Quality.update(env.setQuality, menu, quality);
-            });
-    }
-
-    let score = document.getElementById("score");
-    score.style =
-        "position: absolute; \
-         top: 10px; \
-         width: 100%; \
-         text-align: center; \
-         display: block; \
          color: white; \
-         font-size: xx-large; \
+         font-size: 400%;";
-         font-family: sans-serif;";
+    document.body.appendChild(titleGame);
 
-    /**
+    let normalGame = document.createElement("button");
-     * Run the game
+    normalGame.textContent = "Partie normale";
-     */
+    normalGame.style =
-    const animate = () => {
+        "position: absolute; \
-        const delta = env.clock.getDelta();
+         top: 30%; \
-        const ticks = Math.round(delta / (1 / 120));
+         left: 35%; \
-        for (let i = 0; i < ticks; i++) {
+         border: none; \
-            if (env.update()) {
+         background: none; \
-                let end = document.createElement("p");
+         color: white; \
-                end.textContent = "Partie terminée !";
+         font-size: 400%;";
-                end.style =
+    document.body.appendChild(normalGame);
-                    "margin: 0; \
-                     position: absolute; \
-                     top: 50%; \
-                     left: 35%; \
-                     font-size: 400%; \
-                     font-family: sans-serif; \
-                     color: white; \
-                     transform: translate(-50%, -50%) }";
-                document.body.appendChild(end);
 
-                let restart = document.createElement("button");
+    let demoGame = document.createElement("button");
-                restart.textContent = "Cliquez ici pour redémarrer";
+    demoGame.textContent = "Partie démo";
-                restart.style =
+    demoGame.style =
-                    "margin: 0; \
+        "position: absolute; \
-                     position: absolute; \
+         top: 40%; \
-                     top: 60%; \
+         left: 37%; \
-                     left: 27%; \
+         border: none; \
-                     border: none; \
+         background: none; \
-                     background: none; \
+         color: white; \
-                     color: white; \
+         font-size: 400%;";
-                     font-size: 400%; \
+    document.body.appendChild(demoGame);
-                     font-family: sans-serif; \
-                     transform: translate(-50%, -50%) }";
-                document.body.appendChild(restart);
 
-                restart.addEventListener("click", () => {
+    const removeMenu = () => {
-                    location.href = location.href;
+        document.body.removeChild(titleGame);
-                });
+        document.body.removeChild(normalGame);
-
+        document.body.removeChild(demoGame);
-                gui.destroy();
-                return;
-            }
-        }
-
-        score.textContent = `Score : ${Math.floor(env.clock.elapsedTime)}`;
-
-        requestAnimationFrame(animate);
     };
 
-    // Run it
+    normalGame.addEventListener(
-    animate();
+        "click",
+        () => {
+            removeMenu();
+            runGame(false);
+        },
+        { once: true }
+    );
+
+    demoGame.addEventListener(
+        "click",
+        () => {
+            removeMenu();
+            runGame(true);
+        },
+        { once: true }
+    );
 };