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 & Hidden Objects</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;
}
#timer {
position: absolute;
top: 10px; right: 10px;
color: #fff; font-family: sans-serif; z-index: 1;
font-size: 18px;
}
#foundCount {
position: absolute;
top: 40px; right: 10px;
color: #fff; font-family: sans-serif; z-index: 1;
font-size: 16px;
}
</style>
</head>
<body>
<div id="info">
Use Arrow Keys to Move – walls red-brick, floor whitewashed, sky with clouds<br>
Find all 3 hidden objects!
</div>
<div id="timer">Time: 0s</div>
<div id="foundCount">Found: 0/3</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 ========
const CLOUD_COUNT = 150;
const CLOUD_SCALE = 20;
const CLOUD_HEIGHT_FACTOR = 5;
const SKY_TURBIDITY = 3;
// ======== HIDDEN OBJECTS CONFIG ========
const OBJECT_TYPES = ['table', 'chair', 'lamp'];
const NUM_OBJECTS = 3;
const PROXIMITY_LEEWAY = 10; // distance...