JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Win95 3D Maze Screensaver</title>
  <style>
    body { margin: 0; overflow: hidden; background: #000; }
    #info {
      position: absolute;
      top: 10px; left: 10px;
      color: #fff;
      font-family: sans-serif;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="info">Use Arrow Keys to Move</div>
  <!-- Three.js library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // ======== PARAMETERS ========
      const MAZE_ROWS = 10;
      const MAZE_COLS = 10;
      const CELL_SIZE = 10;
      const WALL_HEIGHT = 10;
      const MOVE_SPEED = 0.8;
      const ROTATE_SPEED = 0.03;

      // ======== MAZE GENERATION (Depth-First) ========
      function generateMaze(rows, cols) {
        const maze = Array.from({ length: rows }, () =>
          Array.from({ length: cols }, () => ({
            visited: false,
            walls: [true, true, true, true]  // [N,E,S,W]
          }))
        );

        function carve(r, c) {
          maze[r][c].visited = true;
          const dirs = [0,1,2,3].sort(() => Math.random() - 0.5);
          for (let d of dirs) {
            const nr = r + [-1,0,1,0][d], nc = c + [0,1,0,-1][d];
            if (nr>=0 && nr<rows && nc>=0 && nc<cols && !maze[nr][nc].visited) {
              maze[r][c].walls[d] = false;
              maze[nr][nc].walls[(d+2)%4] = false;
              carve(nr, nc);
            }
          }
        }
        carve(0,0);
        return maze;
      }

      // ======== THREE.JS SETUP ========
      const scene = new THREE.Scene();
      scene.background = new THREE.Color(0x000000);

      const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
      camera.position.set(CELL_SIZE/2, WALL_HEIGHT/2, CELL_SIZE/2);
      // point down +Z so you can see the maze
     ...