Path to the Masjid

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 side-scrolling 2D platformer titled "Path to the Masjid". Use a full-viewport HTML canvas with a fixed HUD over it, responsive to window size, and a clean friendly vector/cartoon style: thick dark navy outlines (#18243b), rounded cream UI panels with dark drop shadows, flat pastel colors, and simple geometric scenery.

Core gameplay: The player controls a small Muslim character walking right through three long platforming levels and ultimately reaching a mosque at the far right. Use horizontal camera scrolling that follows the player, with the world wider than the viewport. Controls should work from keyboard and touch: left/right arrows or A/D to move, Space/up arrow/W to jump; on coarse/touch devices show two bottom-left buttons (left/right) and a bottom-right up/jump button. Press R to reset/replay. Movement should have acceleration/friction, a maximum horizontal speed around 5, gravity, and a strong single jump (about -12 vertical velocity). The player can only jump while grounded on a platform.

Player avatar: draw a charming outlined character about 34x60 pixels, wearing a white/cream thobe with separate rounded arms and legs, medium-brown face, black beard and smile, and a white kufi with gold detail lines. Flip the character horizontally based on travel direction. Briefly blink after damage/respawn. Add small cream particle bursts when jumping and colored bursts when collecting or defeating things.

Level structure and progression: implement three sequential worlds, each beginning with the player at x=80 and ending at a goal near the far right. Platforms are rectangular floating/ground blocks at y=520 with an 80-pixel depth, separated by hazardous gaps, plus elevated platforms around y=260–405. Platforms have a colored body, a bright 8-pixel top edge, and repeating small darker rectangular decorative marks along the side. The player lands on platforms from above. Falling below the screen or touching a hazard costs one life and respawns at the current checkpoint (initially x=80); reaching the checkpoint x updates the respawn location. Start with 3 lives; when lives reach zero, reset lives to 3 and score to 0 and show "Try again!". Keep score across levels.

Level 1 is named "Sunrise Courtyard", width about 3600, sky #8bd4ff, ground #d39a57, accent #f3c969. Ground platform spans: x=0–620, 720–1220, 1320–1940, 2040–2690, and 2770–3600. Add elevated platforms at (360,405,width190), (800,390,150), (1060,300,170), (1450,400,190), (1700,330,180), (2170,390,190), (2440,290,160), (2900,390,190), and (3180,300,170). Add hazards in the gaps at x=620 width100, x=1220 width100, x=1940 width100, and x=2690 width80, beginning around y=555. Place five small red rounded runner enemies around x=520, 925, 1550, 2290, and 3020, with the elevated ones positioned around their platform heights. Place collectible rotating five-point stars at approximately (410,360), (855,345), (1110,255), (1510,355), (1760,285), (2225,345), (2485,245), (2945,345), and (3230,255). Set checkpoint x=1660 and goal x=3370.

Level 2 is named "Lantern Market", width about 4100, with peach/orange sky #ffbf82, ground #a86d55, accent #f4d35e. Ground spans x=0–740, 850–1370, 1470–2080, 2200–2720, 2840–3420, and 3520–4100. Elevated platforms: (190,390,170), (520,310,170), (930,390,170), (1160,275,180), (1580,380,180), (1840,300,160), (2290,390,160), (2510,285,180), (2930,390,160), (3180,295,160), (3630,390,170), and (3860,285,160). Hazards: x=740 width110, x=1370 width100, x=2080 width120, x=2720 width120, x=3420 width100. Add seven small rounded enemies: hopper types around x=580, 1660, and 3010, and runner types around x=995, 1910, 2380, and 3710; place them at the corresponding platform/ground heights. Add stars around (235,340), (565,260), (975,340), (1210,225), (1630,330), (1885,250), (2335,340), (2560,235), (2990,340), (3240,245), (3690,340), and (3910,235). Set checkpoint x=2140 and goal x=3890.

Level 3 is named "Moonlit Gardens", width about 4500, with dark blue sky #27345f, green ground #3e705b, and gold accent #f7dc78. Ground spans x=0–560, 700–1220, 1370–1820, 1970–2530, 2670–3270, and 3420–4500. Elevated platforms: (240,400,170), (800,360,160), (1050,260,170), (1450,390,160), (1640,290,160), (2050,380,170), (2320,280,180), (2760,390,170), (3030,280,170), (3470,390,170), (3730,285,170), and (4050,380,170). Hazards: x=560 width140, x=1220 width150, x=1820 width150, x=2530 width140, x=3270 width150. Add twelve enemies, mixing runners and bouncing hoppers, at approximately x=420, 875, 1100, 1510, 1700, 2130, 2390, 2850, 3090, 3530, 3790, and 4140, aligned to their platforms. Add stars at (285,350), (845,310), (1095,210), (1495,340), (1680,240), (2095,330), (2370,230), (2810,340), (3080,230), (3520,340), (3780,235), and (4100,330). Set checkpoint x=2500 and goal x=4310.

Enemies: runners move horizontally back and forth and are small red rounded-square creatures with white eyes and dark outlines; hoppers use purple instead and repeatedly bounce vertically while moving. The player defeats an enemy by landing on it from above: mark it dead, bounce the player upward, add 25 score, and show a gold particle burst. Side or underside contact causes a respawn unless the player is temporarily invulnerable. Collecting a star makes it disappear, adds 10 score, and shows a gold burst. Stars should slowly rotate/pulse and have a dark outline.

Hazards should be visually obvious red/maroon pits or rectangular danger zones with repeating yellow triangular spikes. Use a simple collision system for platforms, pits, enemies, stars, and checkpoints.

Background art: fill the sky with the level color, draw a large sun/moon at the upper-right (pale yellow in the first two levels, gold moon in the night level), and create repeating distant rounded courtyard/garden silhouettes that parallax slowly behind the foreground. In the first level these are pale sand-colored arch-like forms; in the night level use muted blue garden shapes. At each goal, draw a prominent outlined mosque centered at ground level: a cream rectangular building with a gold domed roof, two teal side minarets, and a gold entrance detail, with the label "MASJID" in dark text. The mosque should scroll into view near the end of each level.

HUD: fixed at the top-left show a cream rounded pill with bold text "PATH TO THE MASJID" in reddish-brown. At top-right show "LEVEL N · ✦ score · ♥ lives" in a matching pill, updating live. When a level loads, briefly show its name in a centered cream rounded message near the top. On the final level, reaching the goal should stop normal progression and overlay a translucent dark screen with centered cream text "You reached the masjid!" and "Press R to play again". Reaching the goal in levels 1 or 2 should load the next level, preserving score and lives.