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>
html, body { margin: 0; padding: 0; overflow: hidden; height: 100%; background: #000; }
#info {
position: absolute; top: 10px; left: 10px;
color: #fff; font-family: sans-serif; z-index: 1;
line-height: 1.4;
}
#timer, #foundCount {
position: absolute; right: 10px; color: #fff; font-family: sans-serif; z-index: 1;
}
#timer { top: 10px; font-size: 18px; }
#foundCount { top: 40px; font-size: 16px; }
canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="info">
Use Arrow Keys or WASD to Move – click to engage mouse look<br>
Hold Left-Click to move forward, Right-Click to move backward<br>
Press 'L' to toggle vertical look on/off<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 FLAGS & CONFIG ========
let enableLookUpDown = false; // Toggle vertical look with 'L'
let mouseForward = false;
let mouseBackward = false;
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;
const CLOUD_COUNT = 150;
const CLOUD_SCALE = 20;
const CLOUD_HEIGHT_FACTOR = 5;
const SKY_TURBIDITY = 3;
...