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</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.15;
      const FLOOR_BRICK_SIZE    = 8;

      // ======== SKY & CLOUD CONTROL VARIABLES ========
      const CLOUD_COUNT         = 150;   // how many cloud “clumps” to spawn
      const CLOUD_SCALE         = 20;   // base size of each cloud sphere
      const CLOUD_HEIGHT_FACTOR = 5;    // multiply default cloud height by this (600% higher)
      const SKY_TURBIDITY       = 3;   // sky shader haziness (higher = more haze)

      // ======== 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 &&...