Photo Maze

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a browser-based first-person 3D exploration game titled “Photo Maze.” Render it with Three.js. The player explores a procedurally generated green hedge maze beneath a bright blue sky with blue atmospheric fog. Use a large bright-green grass ground plane and a slightly different green path tint over the maze area. Build a 21x21 recursive-carved maze on a 6-unit grid: solid cells are chunky green hedge-wall cubes about 3.2 units high and 0.46-unit visual wall thickness, with slightly lighter green cap cubes on top; corridors are walkable. Place the player at a corridor entrance, at eye height around 1.55 units, with first-person perspective (about 72-degree field of view), soft hemisphere lighting and a strong directional sun casting shadows.

The central mechanic is collecting and viewing personal photos in the maze. Initially show four sample framed “photos” labeled “Welcome,” “Blue sky,” “Green grass,” and “Upload your photos,” so the maze is populated even before upload. Provide a file upload control accepting multiple image files, limited to image types and at most 4000 files. On upload, replace the samples with the uploaded images; downscale each image through a canvas to a maximum side of 768 pixels for texture efficiency, while retaining the filename without its extension as the initial photo name. If loading fails, use a labeled placeholder. Attach photos as framed wall panels along suitable hedge-wall faces bordering corridors, assigning them in the current array order and cycling through available frame slots if necessary. Each display should be a dark green/near-black rectangular frame, roughly 3.7 by 2.7 units, containing a 3.25 by 2.25 image, with a dark green rounded label strip beneath showing the one-based number and name (truncated to 40 characters). Sample images should be generated pale-green gradient cards with a dark border, number, and centered label text.

Support manual first-person walking with WASD and arrow keys. Movement follows the camera yaw, moves at roughly 7.2 units per second, and is blocked by maze wall cells using simple corridor-cell collision; allow independent x/z sliding. Allow drag gestures on the rendered view to look around, changing yaw and clamped pitch. On touch devices, show a translucent circular joystick in the lower-left for walking and use a right-side touch look zone for dragging the view. Include keyboard Space as an autoplay toggle.

Create a fixed translucent dark-green HUD with rounded corners and white/light-green controls. At the top, show buttons labeled “Upload photos,” “Photo list,” “Autoplay tour,” and “Shuffle order,” plus a status string such as “4 photos — manual explore” or “0 photos — upload 1 to 4000.” Use the tall/mobile-friendly layout shown: controls wrap naturally, and the bottom instruction panel says: “WASD / arrows to walk, drag to look. Upload photos and they become framed pictures along the green maze walls. Autoplay walks to each one in order.” The initial screenshot should show the blue world mostly unobstructed, with the compact dark-green top control panel and the bottom hint panel visible; the photo list starts collapsed.

The Photo list button opens a dark translucent side panel beneath the top bar. Display the photos in maze order, with a small thumbnail, numbered name, and whether it is “sample” or “uploaded.” Clicking a row should select and instantly jump the player to that photo’s corridor location while turning the view toward its frame, and visually highlight the selected row. Each row has Rename, up-arrow, and down-arrow controls. Rename via a prompt and cap names at 60 characters. Up/down changes the ordering and rebuilds all wall panels. Shuffle randomizes the entire order and rebuilds the displays. For large collections, show only the first 120 rows in the list but state that all photos are placed in the maze. The status updates to the photo count and whether manual exploration or autoplay is active.

Autoplay should walk automatically from the current/selected photo to each photo in order, turning toward the target frame, pausing about 1.9 seconds at each one, then looping back to the first. During autoplay, update the selected list row. Include responsive resizing, smooth lighting/shadows, touch-safe controls, and expose window.getGameState() returning player position/orientation, photo count, selected index, autoplay state, tour index, and maze dimensions/frame-slot count; expose window.setGameState(patch) for setting player fields, selecting a photo, or toggling autoplay.