Wrecking Day

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 3D physics arcade game titled “Wrecking Day” using Three.js. Show a dark demolition-yard scene from a fixed elevated three-quarter perspective: a large dark blue-gray rectangular ground slab with diagonal yellow safety stripes, a warm orange construction crane at the left, and a vertical tower of eight colorful rectangular blocks at center-right. The crane has a tall mast around x=-5.8, an orange horizontal arm high above the yard, a pivot near (-5.8,14.5,0), a dark metallic wrecking ball hanging from a visible dark rope, and a block tower made from 2.1 x 1 x 2.1 boxes stacked vertically around x=4.2. Use a moody near-black navy background, fog, soft shadows, warm sunlight, cool rim lighting, and simple polished low-poly/material styling. The camera should look toward the tower and crane, with the game world filling the screen behind an HTML HUD.

Core gameplay: the player controls the swinging angle of the suspended wrecking ball before releasing it. While attached, the ball follows a rope from the crane pivot, with rope length about 7.2 and angle clamped to roughly -1.12 to +1.12 radians. Left/right input changes angular velocity; the swing has damping and a restoring pendulum force, so the player builds momentum. Display the current rounded angle in degrees. On release, detach the ball and launch it using its current pendulum velocity; apply gravity, let it travel and bounce on the ground, and detect overlap with tower blocks. A collision applies an outward/upward impulse and random rotation to the struck block, awards 100 points, and reduces the ball velocity. Blocks use gravity and bounce/damping, tumble visibly, and disappear once they fall off the playable bounds or below the yard. The ball eventually resets to its hanging position when it leaves bounds or slows nearly to a stop, allowing another swing and drop. The goal is to knock every block out of the tower. When all blocks have been cleared/fallen below the yard, stop the game and show a centered victory message: “BLOCKS CLEARED” with “Press R or tap the ball button to rebuild the tower.”

Start with eight blocks arranged as a tall single-column tower, with heights/vertical centers corresponding to layers from bottom to top: y=9.5, 8.5, 7.5, 6.5, 5.5, 4.5, 3.5, and 2.5 (each block is one unit tall); use alternating slight yaw and cycle vivid colors such as red-orange, orange, blue, purple, green, and mustard. The wrecking ball is a dark gray sphere with metallic appearance and subtle emissive detail. Include shadows on the ball, crane, blocks, and ground.

HUD styling must match the dark game aesthetic. In the upper-left, create a rounded translucent dark panel with a thin light border containing the yellow bold title “WRECKING DAY,” subtitle “Swing the ball. Drop it. Clear the block.”, and inline stats labeled “Angle”, “Score”, and “Blocks” with white values. In the upper-right show instructions: “A / D or ◀ / ▶ to swing” and “SPACE or DROP to release.” On desktop, keyboard controls are primary: hold A or Left Arrow to swing left, hold D or Right Arrow to swing right, press Space to release, and press R to rebuild/reset. On narrow/mobile layouts, show bottom-centered touch controls: a left arrow button, orange “DROP BALL” button, and right arrow button; the arrow buttons should support press-and-hold swinging, while the drop button releases the ball and, after victory, rebuilds the tower. Keep the canvas full viewport, hide overflow, and use responsive HUD positioning. Use a dark navy #0d1117-like page background, orange drop button, yellow title/victory text, rounded controls, and subtle shadows.