Update app.py

app.py

@@ -158,49 +158,49 @@ THEME_EXAMPLES = {
 def generate_image_prompts(theme: str, game_type: str) -> dict:
     client = get_groq_client()
     if game_type == "Top-Down Shooter":
-        perspective = "bird's eye view directly overhead, isometric top-down game art"
-        char_style  = (
-            "bird's eye view directly overhead, isometric top-down game sprite, "
-            "character seen from above looking down, head visible at top, feet at bottom, "
-            "no perspective distortion, flat top-down angle"
+        bg_style   = "bird's eye overhead view, top-down 2D game background, viewed from directly above, like a map"
+        char_style = (
+            "top-down overhead game sprite, viewed from directly above, "
+            "character body seen from above like looking straight down, "
+            "head at top shoulders below, like Metal Slug or GTA 2 sprite angle, "
+            "pure black background, character only"
         )
     else:
-        perspective = "2D side-scrolling platformer background, horizontal flat landscape"
-        char_style  = (
-            "2D side-view platformer sprite, character facing right, "
-            "full body visible from the side, flat 2D game art style, "
-            "like classic side-scrolling game characters"
+        bg_style   = "2D side-scrolling platformer background, horizontal landscape viewed from the side"
+        char_style = (
+            "2D side-view platformer game sprite, character facing right, "
+            "full body visible from the side like Super Mario or Mega Man, "
+            "classic side-scrolling game art style, "
+            "pure black background, character only"
         )
 
     seeds = {
         "sprite_player.png": (
-            f"pixel-art game player character, {char_style}, {theme} theme, "
-            f"isolated character on pure solid-color background, "
-            f"strong clear silhouette, vibrant colors, 64x64 pixel style, "
-            f"single character only, no scenery no environment"
+            f"{char_style}, {theme} theme, "
+            f"vibrant colors, strong clear silhouette, 64x64 pixel style, "
+            f"single character centered, no scenery no ground no environment"
         ),
         "sprite_background.png": (
-            f"2D game background scene, {perspective}, {theme} theme, "
-            f"wide landscape, atmospheric, game art style, 800x450, "
+            f"{bg_style}, {theme} theme, "
+            f"wide atmospheric scene, game art style, 800x450, "
             f"no characters no sprites, environment only"
         ),
         "sprite_enemy.png": (
-            f"pixel-art enemy character, {char_style}, {theme} theme, "
-            f"menacing and threatening, isolated character on pure solid-color background, "
-            f"strong clear silhouette, 64x64 pixel style, "
-            f"single enemy only, no scenery no environment"
+            f"{char_style}, {theme} theme, enemy monster villain, "
+            f"menacing threatening design, strong clear silhouette, 64x64 pixel style, "
+            f"single enemy centered, no scenery no ground no environment"
         ),
     }
     if game_type == "Platformer":
         seeds["sprite_platform.png"] = (
-            f"pixel-art solid platform tile, 2D side-view, {theme} theme, "
-            f"rectangular stone or wooden surface, isolated on solid-color background, "
-            f"no characters, 128x24 pixel style"
+            f"2D side-view pixel-art platform tile, {theme} theme, "
+            f"rectangular solid surface like a game platform, stone or wood texture, "
+            f"pure black background, platform only, 128x24 pixel style"
         )
         seeds["sprite_goal.png"] = (
-            f"pixel-art goal treasure chest or glowing star, 2D side-view, {theme} theme, "
-            f"glowing and clearly visible, isolated on solid-color background, "
-            f"no characters, 40x40 pixel style"
+            f"2D side-view pixel-art treasure chest or glowing star goal, {theme} theme, "
+            f"glowing clearly visible reward item, "
+            f"pure black background, item only, 40x40 pixel style"
         )
     prompts = {}
     for sprite_name, seed in seeds.items():
@@ -312,7 +312,7 @@ def _inject_sprites(html_code: str, sprite_map: dict) -> str:
 CODE_SYSTEM = (
     "You are an expert HTML5 game developer. "
     "Write a complete, working, single-file HTML5 game using canvas and vanilla JavaScript. "
-    "CRITICAL RULES: "
+    "CRITICAL RULES - follow every one exactly: "
     "1. Declare sprites at the very top of the script BEFORE anything else: "
     "   const playerImg = new Image(); playerImg.src = 'sprite_player.png'; "
     "   const bgImg = new Image(); bgImg.src = 'sprite_background.png'; "
@@ -321,31 +321,36 @@ CODE_SYSTEM = (
     "2. Use Promise.all to wait for ALL images before starting: "
     "   function loadImg(img) { return new Promise(r => { img.onload = r; }); } "
     "   Promise.all([loadImg(playerImg), loadImg(bgImg), loadImg(enemyImg)]).then(startGame); "
-    "3. function startGame() { "
+    "3. function startGame() sets up listeners and starts the loop: "
+    "   function startGame() { "
     "   window.addEventListener('keydown', e => keys.add(e.key)); "
     "   window.addEventListener('keyup', e => keys.delete(e.key)); "
     "   canvas.addEventListener('click', onShoot); "
     "   requestAnimationFrame(gameLoop); } "
     "4. Define gameLoop() and ALL functions at TOP LEVEL not inside startGame or .then(). "
-    "5. FOR TOP-DOWN SHOOTER movement - player moves in ALL 4 directions, NO gravity: "
-    "   if (keys.has('w') || keys.has('W') || keys.has('ArrowUp'))    player.y -= player.speed; "
-    "   if (keys.has('s') || keys.has('S') || keys.has('ArrowDown'))  player.y += player.speed; "
-    "   if (keys.has('a') || keys.has('A') || keys.has('ArrowLeft'))  player.x -= player.speed; "
-    "   if (keys.has('d') || keys.has('D') || keys.has('ArrowRight')) player.x += player.speed; "
-    "   Clamp player inside canvas after movement. "
-    "6. FOR TOP-DOWN SHOOTER bullets - shoot straight UPWARD on click, constant speed: "
-    "   function onShoot(e) { bullets.push({x: player.x + player.w/2 - 4, y: player.y, w: 8, h: 16, vy: -10}); } "
-    "   Each frame move every bullet: b.y += b.vy; "
-    "   Remove bullets when b.y + b.h < 0. "
-    "   Draw bullets with ctx.fillStyle and ctx.fillRect. "
-    "7. FOR TOP-DOWN SHOOTER enemies - draw with ctx.drawImage(enemyImg, e.x, e.y, e.w, e.h). "
-    "   Enemies fall straight down: e.y += e.speed each frame. "
-    "   Remove enemy if e.y > canvas.height. "
-    "8. FOR PLATFORMER: gravity velY+=0.5, grounded checks, jump ArrowUp/W/Space velY=-12. "
-    "   Set grounded=false BEFORE platform loop, set grounded=true and velY=0 only on landing. "
-    "   Always include full-width ground platform at y=420. "
-    "9. Draw bgImg FIRST each frame: ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height). "
-    "10. Draw player: ctx.drawImage(playerImg, player.x, player.y, player.w, player.h). "
+    "5. FOR TOP-DOWN SHOOTER - STRICT RULES: "
+    "   a. NO gravity, NO velY += 0.5, NO grounded variable. "
+    "   b. Player starts at CENTER of canvas: player = {x: canvas.width/2 - 24, y: canvas.height/2 - 24, w: 48, h: 48, speed: 4}. "
+    "   c. 4-direction WASD movement - clamp inside canvas after each move. "
+    "   d. BULLETS travel straight UPWARD at constant speed -10 px/frame: "
+    "      function onShoot(e) { bullets.push({x: player.x + player.w/2 - 4, y: player.y, w: 8, h: 16, vy: -10}); } "
+    "      Each frame: b.y += b.vy; remove bullet when b.y + b.h < 0. "
+    "      NEVER use mouse position to set bullet direction - bullets ALWAYS go straight up. "
+    "   e. Enemies spawn at top (y=0), fall straight down: e.y += e.speed each frame. "
+    "      Remove enemy when e.y > canvas.height. "
+    "   f. Draw enemies: ctx.drawImage(enemyImg, e.x, e.y, e.w, e.h). "
+    "   g. RESTART: define a reset() function that resets ALL game variables to initial values "
+    "      and calls requestAnimationFrame(gameLoop). "
+    "      Show restart button on canvas game-over screen that calls reset() when clicked. "
+    "6. FOR PLATFORMER - STRICT RULES: "
+    "   a. Gravity: velY += 0.5 every frame AFTER updating position. "
+    "   b. Set grounded=false BEFORE platform loop. Inside loop set grounded=true and velY=0 on landing. "
+    "   c. Jump only when grounded: ArrowUp/W/Space sets velY=-12. "
+    "   d. Always include full-width ground platform at y=420. "
+    "   e. RESTART: define reset() that resets player position and lives, calls requestAnimationFrame(gameLoop). "
+    "7. Draw bgImg FIRST each frame: ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height). "
+    "8. Draw player: ctx.drawImage(playerImg, player.x, player.y, player.w, player.h). "
+    "9. Keep player inside canvas at all times. "
     "Output ONLY the raw HTML - no markdown fences, no explanation, nothing else."
 )