Pixel Arena

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 “Pixel Arena,” implemented on a full-window responsive HTML canvas with an overlaid HTML HUD and touch controls. It is a local two-player arena fighter, not an AI-vs-player game: Player 1 and Player 2 are both controlled by keyboard or their own touch button clusters.

Camera and arena: use a fixed side-on camera showing the entire horizontal arena. Fill the background with a vertical dusk gradient from very dark navy blue at the top (#151d45) to muted purple (#694270) at the bottom. Add a translucent warm circular moon/sun at approximately 18% of the screen width and 20% of the screen height. The floor begins at 78% of the viewport height, is a dark navy/purple strip (#202449), and has repeating short blue-gray rectangular lane marks across it, positioned slightly below the floor top. There are no walls, platforms, collectibles, or other enemies.

Fighters: render two rectangular cartoon fighters, each approximately 78px wide and 112px tall, with a dark oval shadow below them. Player 1 starts around 24% screen width, facing right, with a bright mint-green body (#49e0a4); Player 2 starts around 76% screen width, facing left, with a pink body (#ff6688). Inside each colored rectangle, draw a small platformer-style character sprite: use a beige front-facing character sprite for Player 1 and a pink duck character sprite for Player 2 (Kenney New Platformer Pack-style assets, or visually equivalent small pixel/cartoon sprites). Draw a dark navy horizontal visor/eye bar across each fighter with a small white square eye detail. While attacking, display a short pale-yellow horizontal fist/weapon rectangle extending from the fighter’s facing side. Label the fighters above their heads as “OYUNCU 1” and “OYUNCU 2” in small bold white text. Mirror the whole fighter rendering horizontally when facing left. Briefly reduce opacity/flash a fighter when hit.

Core mechanics: both fighters have 100 HP and a 60-second round timer. Apply gravity of about 900, horizontal movement speed of 300, jump velocity of -460, and friction/deceleration. Keep fighters clamped inside the screen with about 18px side margins. Fighters can jump only while grounded. A punch lasts 0.45 seconds; its active hit window is approximately 0.22–0.38 seconds. The attack hitbox is a 50x42 rectangle extending about 2px beyond the facing edge, and it damages an opponent only once per attack if it overlaps the opponent’s inset body collision box. Each successful hit removes 10 HP, gives the target a horizontal knockback of 360 in the attacker’s facing direction and upward velocity of -130, and causes a short hit flash. Award 100 score to Player 1 for a successful hit; score does not need to be prominently displayed. Do not add combos, projectiles, blocking, powerups, rounds beyond the displayed round indicator, or AI behavior.

End conditions: continuously count the timer down to zero. End the match immediately when either HP reaches zero or when the timer reaches zero. Determine the winner by remaining HP; if Player 1 has more, show “OYUNCU 1 KAZANDI!”, if Player 2 has more show “OYUNCU 2 KAZANDI!”, otherwise show “BERABERE!”. Place the large white result message around the upper-middle of the screen with a heavy dark shadow and a smaller instruction below saying “R ile veya ekrana dokunarak yeniden başlat”. Press R or tap the canvas/game area after the match to reset both fighters to their starting positions, restore HP to 100, restore the 60-second timer, clear the result, and start again.

HUD: overlay a top status row. On the far left show “P1,” then a rounded white-outlined health bar with a mint/green gradient fill. In the center show the yellow bold text “2 OYUNCU” (or equivalent two-player indicator) at the top and show the remaining whole seconds as a large white number beneath/near the center. On the right show a rounded white-outlined health bar with a pink/red gradient fill, then “P2.” Health bars should shrink according to each fighter’s HP. Use bold system sans-serif typography, white text, dark shadows, rounded borders, and a dark arcade UI style.

Controls: keyboard Player 1 uses A/D to move left/right, W to jump, and F to attack. Keyboard Player 2 uses Left/Right arrows to move, Up arrow to jump, and Enter (also accept the 0 key) to attack. Include responsive touch controls over the bottom of the screen: separate left/right arrow buttons, a “ZIPLA” jump button, and a circular pink “P1 VUR” button for Player 1 on the left side, plus a matching right-side cluster with “ZIPLA” and “P2 VUR” for Player 2. Buttons are dark blue/purple with light borders and drop shadows; jump buttons are blue-purple and attack buttons are large pink circles. Prevent touch scrolling and support pointer down/up behavior for movement; jump and attack trigger once. At desktop widths make the touch controls somewhat translucent and place the control hint closer to the bottom. Show a bottom-center Turkish instruction hint: “P1: A/D hareket · W zıpla · F vur | P2: ←/→ hareket · ↑ zıpla · Enter vur”. Make the layout fill the viewport, hide overflow, and scale correctly for device pixel ratio.