Midnight Mayhem

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 2D side-view fighting game titled “MIDNIGHT MAYHEM,” rendered entirely on a responsive full-screen HTML canvas with a fixed HUD overlay. The game is a simple one-on-one duel between a human-controlled Red Hoodie fighter and a CPU-controlled Skeleton AI. Use a dark neon midnight aesthetic: a vertical gradient background from nearly black purple at the top to muted plum near the ground, a pale crescent moon in the upper-right made from a large warm cream circle overlapped by a background-colored circle, and a row of layered dark purple triangular evergreen silhouettes along the horizon. The floor is a very dark purple strip beginning around 78% of the viewport height, with a thin lavender boundary line and repeating short purple dashed markings slightly below it.

Place the Red Hoodie around 28% of the screen width and the Skeleton AI around 72%, both standing on the ground. The fighters are compact, cartoon-like, and approximately 42 pixels wide by 92 pixels tall for collision purposes. Draw soft dark oval shadows beneath them. The Red Hoodie has a dark burgundy rounded torso/hood shape, a bright red-pink circular face, a pointed angular red hood silhouette, large white oval eyes with dark pupils, a simple dark smiling mouth, and two dark legs. The Skeleton is mirrored to face the opponent and has a dark torso, a pale outlined circular skull, pale eye sockets with dark pupils, a pale tooth-lined mouth, and pale legs. Use simple crisp canvas vector shapes, no external assets.

Implement physics and combat. Each fighter has 100 HP, horizontal acceleration and friction, a maximum horizontal speed of roughly 360, gravity around 1500, and a jump velocity around -700. Keep fighters within the horizontal screen bounds, and land them on the floor. Movement is responsive and allows jumping only while grounded. A successful hit within short range (roughly 20 pixels beyond the combined fighter widths horizontally and within about 70 pixels vertically) removes 10 HP, knocks the target backward with about 420 horizontal impulse and upward with about -280 vertical impulse, briefly stuns them for about 0.16 seconds, and causes a short screen shake. Give attacks a short visible active/attack state around 0.22 seconds and a cooldown around 0.42 seconds. While attacking, draw a warm yellow-orange circular fist/effect just in front of the fighter with a small burgundy rectangular accent. When either HP reaches zero, stop gameplay, show a centered large gold message near the top saying “[winner name] wins! — press R,” and allow R to reset the match.

Player 1 controls are A/D to move, W to jump, and F to hit. The second fighter is CPU-controlled: it automatically approaches the player, changes direction based on their relative position, sometimes jumps while grounded, and attacks probabilistically when close; expose the CPU-facing movement/jump/attack controls as left/right arrows, Up Arrow, and L for the underlying behavior/touch controls. Prevent browser scrolling for the movement keys. On touch-sized screens, show a bottom control strip with two groups: the left group has translucent purple rounded-square buttons for Player 1 left, right, and jump; the right group has left, right, jump, and a wider burgundy “HIT” button for the CPU-side controls. Hide this touch UI on screens at least 700px wide. Buttons should support pointer press/release and have lavender borders, rounded corners, white symbols, and translucent dark-purple backgrounds.

Build the HUD as a fixed pointer-events-none layer over the canvas. At the top, show the label “RED HOODIE” at upper-left above a rounded HP bar filled bright pink (#ff5f8f), the centered gold uppercase title “MIDNIGHT MAYHEM” with letter spacing, and at upper-right the label “SKELETON AI” above a cyan-filled HP bar (#64d8ff), aligned right. Bars should have a dark purple background, lavender border, rounded ends, and shrink smoothly with HP. Under the title, center a small light lavender instruction line: “P1: A / D move · W jump · F hit  |  P2 is CPU · faster movement · FIGHT!” Use a system sans-serif font, subtle dark text shadows, and responsive sizing. The final result should feel like a minimalist arcade fighting prototype with clear health, controls, knockback, win state, and a moody purple forest-night presentation.