Spaces:

awacke1
/

ChooseYourOwnAdventure

Running

App Files Files Community

awacke1 commited on 25 days ago

Commit

756e345

verified ·

1 Parent(s): 960a9eb

Update index.html

Browse files

Files changed (1) hide show

index.html +122 -407

index.html CHANGED Viewed

@@ -3,441 +3,156 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DEBUG - Procedural 3D Dungeon</title>
     <style>
-        body { margin: 0; overflow: hidden; background-color: #000; color: white; font-family: monospace; }
-        canvas { display: block; }
-        #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 10; }
-        #instructions { width: 50%; text-align: center; padding: 20px; background: rgba(20, 20, 20, 0.8); border-radius: 10px; }
-        #crosshair { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: 1px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: difference; display: none; z-index: 11; }
-    </style>
-</head>
-<body>
-    <div id="blocker">
-        <div id="instructions">
-            <h1>Dungeon Explorer (Debug Mode)</h1>
-            <p>Click to Enter</p>
-            <p>(W, A, S, D = Move, MOUSE = Look)</p>
-            <p>Check F12 Console for Errors!</p>
-        </div>
-    </div>
-    <div id="crosshair">+</div>
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
-            }
         }
-    </script>
-    <script type="module">
-        import * as THREE from 'three';
-        import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
-        // BufferGeometryUtils not needed for this debug version
-        // import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
-        console.log("Script Start");
-        // --- Config ---
-        const DUNGEON_WIDTH = 10; // Smaller grid for debug
-        const DUNGEON_HEIGHT = 10;
-        const CELL_SIZE = 5;
-        const WALL_HEIGHT = 4;
-        const PLAYER_HEIGHT = 1.6;
-        const PLAYER_RADIUS = 0.4;
-        const PLAYER_SPEED = 5.0;
-        // --- Three.js Setup ---
-        let scene, camera, renderer;
-        let controls;
-        let clock;
-        let flashlight;
-        // --- Player State ---
-        const playerVelocity = new THREE.Vector3();
-        const playerDirection = new THREE.Vector3();
-        let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
-        // --- World Data ---
-        let dungeonLayout = [];
-        const worldMeshes = []; // Store refs to added meshes for potential cleanup
-        // --- DOM Elements ---
-        const blocker = document.getElementById('blocker');
-        const instructions = document.getElementById('instructions');
-        const crosshair = document.getElementById('crosshair');
-        // --- Materials (Basic Colors) ---
-        const floorMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 }); // Use Lambert for basic lighting check
-        const wallMaterial = new THREE.MeshLambertMaterial({ color: 0x884444 });
-        // --- Initialization ---
-        function init() {
-            console.log("--- Initializing Game ---");
-            clock = new THREE.Clock();
-            // Clear previous scene if restarting
-            if (scene) {
-                 console.log("Clearing previous scene objects...");
-                 worldMeshes.forEach(mesh => {
-                     if(mesh.parent) scene.remove(mesh);
-                     if(mesh.geometry) mesh.geometry.dispose();
-                     // Only dispose material if we know it's unique per object
-                 });
-                 worldMeshes.length = 0; // Clear the array
-            } else {
-                 scene = new THREE.Scene();
-            }
-            scene.background = new THREE.Color(0x111111);
-            scene.fog = new THREE.Fog(0x111111, 10, CELL_SIZE * 6);
-            // Clear previous renderer if restarting
-             if (renderer) {
-                 console.log("Disposing previous renderer...");
-                 renderer.dispose();
-                 if (renderer.domElement.parentNode) {
-                     renderer.domElement.parentNode.removeChild(renderer.domElement);
-                 }
-             }
-             renderer = new THREE.WebGLRenderer({ antialias: true });
-             renderer.setSize(window.innerWidth, window.innerHeight);
-             renderer.setPixelRatio(window.devicePixelRatio);
-             renderer.shadowMap.enabled = true; // Keep shadows enabled
-             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-             document.body.appendChild(renderer.domElement);
-             console.log("Renderer created/reset.");
-            // Camera (First Person)
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.y = PLAYER_HEIGHT;
-            console.log("Camera created.");
-            // Lighting
-            scene.add(new THREE.AmbientLight(0x404040, 0.8)); // Slightly brighter ambient
-            flashlight = new THREE.SpotLight(0xffffff, 3, 30, Math.PI / 5, 0.4, 1.5);
-            flashlight.position.set(0, 0, 0); // Relative to camera
-            flashlight.target.position.set(0, 0, -1); // Relative to camera
-            flashlight.castShadow = true;
-            flashlight.shadow.mapSize.width = 1024;
-            flashlight.shadow.mapSize.height = 1024;
-            flashlight.shadow.camera.near = 0.5;
-            flashlight.shadow.camera.far = 30;
-            camera.add(flashlight);
-            camera.add(flashlight.target);
-            scene.add(camera); // Add camera (with light) to scene
-            console.log("Lighting setup.");
-            // Pointer Lock Controls
-            controls = new PointerLockControls(camera, renderer.domElement);
-            // We don't add controls.getObject() directly to scene IF flashlight is child of camera
-            // scene.add(controls.getObject()); // Only if camera isn't manually added
-            blocker.addEventListener('click', () => { controls.lock(); });
-            controls.addEventListener('lock', () => { instructions.style.display = 'none'; blocker.style.display = 'none'; crosshair.style.display = 'block'; });
-            controls.addEventListener('unlock', () => { blocker.style.display = 'flex'; instructions.style.display = ''; crosshair.style.display = 'none'; });
-            console.log("Controls setup.");
-            // Keyboard Listeners
-            document.removeEventListener('keydown', onKeyDown); // Remove old listeners if restarting
-            document.removeEventListener('keyup', onKeyUp);
-            document.addEventListener('keydown', onKeyDown);
-            document.addEventListener('keyup', onKeyUp);
-            // Resize Listener
-            window.removeEventListener('resize', onWindowResize); // Remove old
-            window.addEventListener('resize', onWindowResize);
-            // --- Generate FIXED Dungeon ---
-            console.log("Generating FIXED dungeon layout...");
-            dungeonLayout = generateFixedDungeonLayout(DUNGEON_WIDTH, DUNGEON_HEIGHT);
-            console.log("Layout generated, creating meshes...");
-            createDungeonMeshes_Direct(dungeonLayout); // Use direct mesh addition
-            console.log("Dungeon meshes created.");
-            // --- Set Player Start Position ---
-            const startPos = findStartPosition(dungeonLayout);
-            if (startPos) {
-                // Position the camera (which is the player view)
-                controls.getObject().position.set(startPos.x, PLAYER_HEIGHT, startPos.z);
-                console.log("Player start position set at:", startPos);
-            } else {
-                console.error("Could not find valid start position! Placing at center.");
-                const fallbackX = (DUNGEON_WIDTH / 2) * CELL_SIZE;
-                const fallbackZ = (DUNGEON_HEIGHT / 2) * CELL_SIZE;
-                controls.getObject().position.set(fallbackX, PLAYER_HEIGHT, fallbackZ);
-            }
-            // Add Axes Helper for orientation check
-            const axesHelper = new THREE.AxesHelper(CELL_SIZE);
-            axesHelper.position.copy(controls.getObject().position); // Place at start pos
-            axesHelper.position.y = 0.1;
-            scene.add(axesHelper);
-            worldMeshes.push(axesHelper); // Track for cleanup
-            console.log("--- Initialization Complete ---");
-            animate(); // Start the loop
         }
-        // --- Dungeon Generation (FIXED LAYOUT) ---
-        function generateFixedDungeonLayout(width, height) {
-            console.log("Generating FIXED 5x5 layout for debugging...");
-            const grid = Array(height).fill(null).map(() => Array(width).fill(0)); // All walls
-            // Simple 5x5 room centered
-            const cx = Math.floor(width / 2);
-            const cy = Math.floor(height / 2);
-            for (let y = cy - 2; y <= cy + 2; y++) {
-                for (let x = cx - 2; x <= cx + 2; x++) {
-                    if (y >= 0 && y < height && x >= 0 && x < width) {
-                         grid[y][x] = 1; // Floor
-                    }
-                }
-            }
-             // Add a corridor
-            for (let y = cy + 3; y < height -1 ; y++) {
-                 if (grid[y]) grid[y][cx] = 1;
-            }
-            console.log(`Fixed Layout Generated (${width}x${height}). Center: ${cx},${cy}`);
-            // console.log("Grid:", grid.map(row => row.join('')).join('\n')); // Optional: Log grid visually
-            return grid;
         }
-        // --- Find Start Position (Same as before) ---
-        function findStartPosition(grid) {
-            const startY = Math.floor(grid.length / 2);
-            const startX = Math.floor(grid[0].length / 2);
-             console.log(`Searching for start near ${startX},${startY}`);
-            for (let r = 0; r < Math.max(startX, startY); r++) {
-                for (let y = startY - r; y <= startY + r; y++) {
-                    for (let x = startX - r; x <= startX + r; x++) {
-                        if (Math.abs(y - startY) === r || Math.abs(x - startX) === r || r === 0) {
-                            if (y >= 0 && y < grid.length && x >= 0 && x < grid[0].length && grid[y][x] === 1) {
-                                console.log(`Found start floor at ${x},${y}`);
-                                return { x: x * CELL_SIZE + CELL_SIZE / 2, z: y * CELL_SIZE + CELL_SIZE / 2 };
-                            }
-                        }
-                    }
-                }
-            }
-             console.error("Valid start position (floor tile = 1) not found near center!");
-            return null; // Fallback
         }
-        // --- Dungeon Meshing (DIRECT ADDITION - NO MERGING) ---
-        function createDungeonMeshes_Direct(grid) {
-             console.log("Creating meshes directly (no merging)...");
-             // Recreate geometries each time to avoid issues with disposed geometries if init is called again
-             const floorGeo = new THREE.PlaneGeometry(CELL_SIZE, CELL_SIZE);
-             const wallGeoN = new THREE.BoxGeometry(CELL_SIZE, WALL_HEIGHT, 0.1);
-             const wallGeoS = new THREE.BoxGeometry(CELL_SIZE, WALL_HEIGHT, 0.1);
-             const wallGeoE = new THREE.BoxGeometry(0.1, WALL_HEIGHT, CELL_SIZE);
-             const wallGeoW = new THREE.BoxGeometry(0.1, WALL_HEIGHT, CELL_SIZE);
-            for (let y = 0; y < grid.length; y++) {
-                for (let x = 0; x < grid[y].length; x++) {
-                    if (grid[y][x] === 1) { // If it's a floor cell
-                        // Create Floor Tile Mesh
-                        const floorInstance = new THREE.Mesh(floorGeo, floorMaterial); // Use shared geometry instance
-                        floorInstance.rotation.x = -Math.PI / 2;
-                        floorInstance.position.set(x * CELL_SIZE + CELL_SIZE / 2, 0, y * CELL_SIZE + CELL_SIZE / 2);
-                        floorInstance.receiveShadow = true;
-                        scene.add(floorInstance);
-                        worldMeshes.push(floorInstance); // Track mesh
-                        // console.log(`Added floor mesh at ${x},${y}`);
-                        // Check neighbors for Walls
-                        // North Wall
-                        if (y === 0 || grid[y - 1][x] === 0) {
-                            const wallInstance = new THREE.Mesh(wallGeoN, wallMaterial);
-                            wallInstance.position.set(x * CELL_SIZE + CELL_SIZE / 2, WALL_HEIGHT / 2, y * CELL_SIZE);
-                            wallInstance.castShadow = true; wallInstance.receiveShadow = true;
-                            scene.add(wallInstance); worldMeshes.push(wallInstance);
-                        }
-                        // South Wall
-                        if (y === grid.length - 1 || grid[y + 1][x] === 0) {
-                             const wallInstance = new THREE.Mesh(wallGeoS, wallMaterial);
-                            wallInstance.position.set(x * CELL_SIZE + CELL_SIZE / 2, WALL_HEIGHT / 2, y * CELL_SIZE + CELL_SIZE);
-                             wallInstance.castShadow = true; wallInstance.receiveShadow = true;
-                            scene.add(wallInstance); worldMeshes.push(wallInstance);
-                        }
-                        // West Wall
-                        if (x === 0 || grid[y][x - 1] === 0) {
-                             const wallInstance = new THREE.Mesh(wallGeoW, wallMaterial);
-                            wallInstance.position.set(x * CELL_SIZE, WALL_HEIGHT / 2, y * CELL_SIZE + CELL_SIZE / 2);
-                             wallInstance.castShadow = true; wallInstance.receiveShadow = true;
-                            scene.add(wallInstance); worldMeshes.push(wallInstance);
-                        }
-                        // East Wall
-                        if (x === grid[y].length - 1 || grid[y][x + 1] === 0) {
-                              const wallInstance = new THREE.Mesh(wallGeoE, wallMaterial);
-                            wallInstance.position.set(x * CELL_SIZE + CELL_SIZE, WALL_HEIGHT / 2, y * CELL_SIZE + CELL_SIZE / 2);
-                              wallInstance.castShadow = true; wallInstance.receiveShadow = true;
-                            scene.add(wallInstance); worldMeshes.push(wallInstance);
-                        }
-                    }
-                }
-            }
-            // Geometries are shared, no need to dispose here unless we cloned them.
-            // If we were cloning: floorGeo.dispose(); wallGeoN.dispose(); ...
-            console.log("Direct mesh creation complete.");
         }
-        // --- Player Movement & Collision (No Physics) ---
-        function handleInputAndMovement(deltaTime) {
-            if (!controls || !controls.isLocked) return;
-            const speed = PLAYER_SPEED * deltaTime;
-            // Reset velocity, we calculate total displacement based on keys
-            playerVelocity.x = 0;
-            playerVelocity.z = 0;
-            // Get camera direction (ignore Y)
-            controls.getDirection(playerDirection); // Gets normalized direction vector
-            playerDirection.y = 0;
-            playerDirection.normalize();
-            // Calculate right vector based on camera direction
-            const rightDirection = new THREE.Vector3();
-            rightDirection.crossVectors(camera.up, playerDirection).normalize(); // camera.up is (0,1,0)
-            // Apply movement based on keys
-            if (moveForward) playerVelocity.add(playerDirection);
-            if (moveBackward) playerVelocity.sub(playerDirection);
-            if (moveLeft) playerVelocity.sub(rightDirection);
-            if (moveRight) playerVelocity.add(rightDirection);
-            // Normalize diagonal velocity if needed and apply speed
-            if (playerVelocity.lengthSq() > 0) {
-                playerVelocity.normalize().multiplyScalar(speed);
-            }
-            // --- Basic Collision Detection BEFORE moving ---
-            const currentPos = controls.getObject().position;
-            let moveXAllowed = true;
-            let moveZAllowed = true;
-            // Check X Collision
-            if (playerVelocity.x !== 0) {
-                const nextX = currentPos.x + playerVelocity.x;
-                // Check slightly ahead in X direction, at feet and head level Z
-                const checkGridX = Math.floor((nextX + Math.sign(playerVelocity.x) * PLAYER_RADIUS) / CELL_SIZE);
-                const checkGridZFeet = Math.floor((currentPos.z - PLAYER_RADIUS) / CELL_SIZE);
-                const checkGridZHead = Math.floor((currentPos.z + PLAYER_RADIUS) / CELL_SIZE);
-                if ((dungeonLayout[checkGridZFeet]?.[checkGridX] === 0) || (dungeonLayout[checkGridZHead]?.[checkGridX] === 0)) {
-                    moveXAllowed = false;
-                    // console.log(`Collision X at grid ${checkGridX},${checkGridZFeet}/${checkGridZHead}`);
-                }
-            }
-            // Check Z Collision
-            if (playerVelocity.z !== 0) {
-                const nextZ = currentPos.z + playerVelocity.z;
-                // Check slightly ahead in Z direction, at feet and head level X
-                const checkGridZ = Math.floor((nextZ + Math.sign(playerVelocity.z) * PLAYER_RADIUS) / CELL_SIZE);
-                const checkGridXFeet = Math.floor((currentPos.x - PLAYER_RADIUS) / CELL_SIZE);
-                const checkGridXHead = Math.floor((currentPos.x + PLAYER_RADIUS) / CELL_SIZE);
-                 if ((dungeonLayout[checkGridZ]?.[checkGridXFeet] === 0) || (dungeonLayout[checkGridZ]?.[checkGridXHead] === 0)) {
-                    moveZAllowed = false;
-                    // console.log(`Collision Z at grid ${checkGridXFeet}/${checkGridXHead},${checkGridZ}`);
-                }
-            }
-            // Apply movement only if allowed
-            if (moveXAllowed) {
-                controls.moveRight(playerVelocity.x); // moveRight uses internal right vector, so feed X velocity
-            }
-            if (moveZAllowed) {
-                controls.moveForward(playerVelocity.z); // moveForward uses internal forward vector, so feed Z velocity
-            }
-            // Keep player at fixed height (no gravity/jump yet)
-             controls.getObject().position.y = PLAYER_HEIGHT;
-             // Log position occasionally
-            // if (Math.random() < 0.05) console.log("Player Pos:", controls.getObject().position);
         }
-        // --- Event Handlers ---
-        function onKeyDown(event) {
-            // console.log("KeyDown:", event.code); // Debug key codes
-            switch (event.code) {
-                case 'ArrowUp': case 'KeyW': moveForward = true; break;
-                case 'ArrowLeft': case 'KeyA': moveLeft = true; break;
-                case 'ArrowDown': case 'KeyS': moveBackward = true; break;
-                case 'ArrowRight': case 'KeyD': moveRight = true; break;
-                 // QWE ZXC movement not implemented in this simplified non-physics version yet
-                 // Jump/F/Space not implemented yet
-            }
         }
-        function onKeyUp(event) {
-             switch (event.code) {
-                case 'ArrowUp': case 'KeyW': moveForward = false; break;
-                case 'ArrowLeft': case 'KeyA': moveLeft = false; break;
-                case 'ArrowDown': case 'KeyS': moveBackward = false; break;
-                case 'ArrowRight': case 'KeyD': moveRight = false; break;
-            }
         }
-        function onWindowResize() {
-             if (!camera || !renderer) return;
-            console.log("Resizing...");
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         }
-         // --- UI Update Functions (Simplified) ---
-         function updateUI() {
-             // Display basic position for debugging
-             if (controls) {
-                 const pos = controls.getObject().position;
-                 statsElement.innerHTML = `<span>Pos: ${pos.x.toFixed(1)}, ${pos.y.toFixed(1)}, ${pos.z.toFixed(1)}</span>`;
-             }
-             // Inventory display can be added later
-             inventoryElement.innerHTML = '<em>Inventory N/A</em>';
          }
-         function addLog(message, type = "info") {
-              const p = document.createElement('p');
-              p.classList.add(type); // Add class for styling
-              p.textContent = `[${new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}] ${message}`; // Add timestamp
-              logElement.appendChild(p);
-              logElement.scrollTop = logElement.scrollHeight; // Auto-scroll
-          }
-        // --- Animation Loop ---
-        function animate() {
-            animationFrameId = requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            // Update movement only if controls are locked
-            if (controls && controls.isLocked === true) {
-                handleInputAndMovement(delta);
-                updateUI(); // Update UI less frequently if needed
-            }
-            renderer.render(scene, camera);
         }
-        // --- Start ---
-        console.log("Attempting to initialize...");
-        try {
-            init();
-        } catch(err) {
-            console.error("Initialization failed:", err);
-            alert("Error during initialization. Check the console (F12).");
-        }
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choose Your Own 3D Adventure</title>
     <style>
+        body {
+            font-family: 'Courier New', monospace;
+            background-color: #222; /* Dark background */
+            color: #eee; /* Light text */
+            margin: 0;
+            padding: 0;
+            overflow: hidden; /* Prevent scrollbars from Three.js */
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
         }
+        #game-container {
+            display: flex;
+            flex-grow: 1; /* Allow container to fill space */
+            overflow: hidden; /* Contain children */
         }
+        #scene-container {
+            flex-grow: 3; /* Give more space to 3D view */
+            position: relative; /* For potential overlays */
+            border-right: 2px solid #555;
         }
+        #ui-container {
+            flex-grow: 2; /* Space for UI elements */
+            padding: 20px;
+            overflow-y: auto; /* Allow scrolling for long text/options */
+            background-color: #333;
+            display: flex;
+            flex-direction: column;
         }
+        #story-title {
+             color: #ffcc66; /* Goldish title */
+             margin-top: 0;
+             border-bottom: 1px solid #555;
+             padding-bottom: 10px;
         }
+        #story-content {
+            margin-bottom: 20px;
+            line-height: 1.6;
         }
+        #choices-container {
+            margin-top: auto; /* Push choices towards the bottom */
+            padding-top: 15px;
+            border-top: 1px solid #555;
+        }
+        #choices-container h3 {
+             margin-top: 0;
+             margin-bottom: 10px;
+             color: #aaa;
         }
+        .choice-button {
+            display: block;
+            width: calc(100% - 20px); /* Adjust width */
+            padding: 10px;
+            margin-bottom: 10px;
+            background-color: #555;
+            color: #eee;
+            border: 1px solid #777;
+            border-radius: 5px;
+            cursor: pointer;
+            text-align: left;
+            font-family: 'Courier New', monospace;
+            font-size: 1em;
+            transition: background-color 0.2s;
         }
+        .choice-button:hover {
+            background-color: #d4a017; /* Gold hover */
+            color: #222;
         }
+         .choice-button:disabled {
+             background-color: #444;
+             color: #888;
+             cursor: not-allowed;
+             border-color: #666;
+         }
+        #stats-inventory-container {
+             margin-top: 20px;
+             padding-top: 15px;
+             border-top: 1px solid #555;
+             font-size: 0.9em;
+        }
+        #stats-display, #inventory-display {
+            margin-bottom: 10px;
+        }
+         #stats-display span, #inventory-display span {
+             display: inline-block;
+             background-color: #444;
+             padding: 3px 8px;
+             border-radius: 15px;
+             margin-right: 8px;
+             margin-bottom: 5px; /* Wrap nicely */
+             border: 1px solid #666;
          }
+        #inventory-display .item-quest { background-color: #666030; border-color: #999048;}
+        #inventory-display .item-weapon { background-color: #663030; border-color: #994848;}
+        #inventory-display .item-armor { background-color: #306630; border-color: #489948;}
+        #inventory-display .item-spell { background-color: #303066; border-color: #484899;}
+        canvas { display: block; } /* Prevent extra space below canvas */
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="scene-container"></div>
+        <div id="ui-container">
+            <h2 id="story-title">Loading Adventure...</h2>
+            <div id="story-content">
+                <p>Please wait while the adventure loads.</p>
+            </div>
+            <div id="stats-inventory-container">
+                 <div id="stats-display">
+                     </div>
+                 <div id="inventory-display">
+                     </div>
+            </div>
+            <div id="choices-container">
+                <h3>What will you do?</h3>
+                <div id="choices">
+                    </div>
+            </div>
+        </div>
+    </div>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+            }
         }
+    </script>
+    <script type="module" src="game.js"></script>
 </body>
 </html>