JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Win95 3D Maze with Sky & Clouds -needToRaise clouds</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 – walls red-brick, floor whitewashed, sky with clouds
  </div>
  <!-- Three.js r128 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <!-- Sky shader from examples (must match r128) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/objects/Sky.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      = 0.8;
      const ROTATE_SPEED    = 0.03;
      const BUFFER          = CELL_SIZE * 0.12;
      const FLOOR_BRICK_SIZE = 38;

      // ======== SKY & CLOUD CONTROL VARIABLES ========
      // Number of individual cloud spheres to generate
      const CLOUD_COUNT     = 60;
      // Base scale factor for cloud spheres
      const CLOUD_SCALE     = 30;
      // Turbidity for the sky shader (controls the haziness)
      const SKY_TURBIDITY   = 10;

      // ======== MAZE GENERATION ========
      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() - 0.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) {
             ...