JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Win95 3D Maze with Sliding Collision & White‐Brick Floor</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 – White bricks on the floor, grey mortar, 8× scale</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // ======== GLOBAL CONFIG ========
      const MAZE_ROWS        = 10;
      const MAZE_COLS        = 10;
      const CELL_SIZE        = 10;
      const WALL_HEIGHT      = 10;
      const MOVE_SPEED       = 2;
      const ROTATE_SPEED     = 0.03;
      const BUFFER           = CELL_SIZE * 0.1;
      // NEW: number of world‐units per brick on the floor
      const FLOOR_BRICK_SCALE = 8;

      // ======== MAZE GEN ========
      function generateMaze(rows, cols) {
        const maze = Array.from({ length: rows }, () =>
          Array.from({ length: cols }, () => ({ visited:false, walls:[1,1,1,1] }))
        );
        function carve(r,c) {
          maze[r][c].visited = true;
          [0,1,2,3].sort(()=>Math.random()-.5).forEach(d=>{
            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]=0;
              maze[nr][nc].walls[(d+2)%4]=0;
              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,...