Update app.py

app.py

@@ -157,14 +157,38 @@ THEME_EXAMPLES = {
 
 def generate_image_prompts(theme: str, game_type: str) -> dict:
     client = get_groq_client()
+    if game_type == "Top-Down Shooter":
+        perspective = "top-down aerial view"
+        char_style  = "top-down aerial view sprite, character seen from directly above"
+    else:
+        perspective = "2D side-view flat"
+        char_style  = "2D side-view flat sprite, full body visible from the side"
+
     seeds = {
-        "sprite_player.png":     f"pixel-art game player character for a {theme} themed {game_type} game, front-facing sprite, vibrant colors, clear silhouette, 64x64 pixel style",
-        "sprite_background.png": f"2D game background scene for a {theme} themed {game_type} game, wide landscape, atmospheric, game art style, 800x450",
-        "sprite_enemy.png":      f"pixel-art enemy character for a {theme} themed {game_type} game, menacing, clear silhouette, 64x64 pixel style",
+        "sprite_player.png": (
+            f"pixel-art game player character, {char_style}, {theme} theme, "
+            f"vibrant colors, character ONLY with NO background, transparent background, "
+            f"clear silhouette, 64x64 pixel style"
+        ),
+        "sprite_background.png": (
+            f"2D game background scene, {perspective}, {theme} theme, "
+            f"wide landscape, atmospheric, game art style, 800x450, no characters"
+        ),
+        "sprite_enemy.png": (
+            f"pixel-art enemy character, {char_style}, {theme} theme, "
+            f"menacing, character ONLY with NO background, transparent background, "
+            f"clear silhouette, 64x64 pixel style"
+        ),
     }
     if game_type == "Platformer":
-        seeds["sprite_platform.png"] = f"pixel-art solid platform tile for a {theme} themed platformer game, rectangular, textured surface, 128x24 pixel style"
-        seeds["sprite_goal.png"]     = f"pixel-art goal or treasure chest for a {theme} themed platformer game, glowing, clearly visible, 40x40 pixel style"
+        seeds["sprite_platform.png"] = (
+            f"pixel-art solid platform tile, 2D side-view, {theme} theme, "
+            f"rectangular textured surface, NO background, transparent background, 128x24"
+        )
+        seeds["sprite_goal.png"] = (
+            f"pixel-art goal treasure chest or star, 2D side-view, {theme} theme, "
+            f"glowing, clearly visible, NO background, transparent background, 40x40"
+        )
     prompts = {}
     for sprite_name, seed in seeds.items():
         try:
@@ -256,56 +280,43 @@ 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 - follow every one exactly: "
-    "1. SPRITES: Declare these at the very top of the script BEFORE anything else: "
+    "CRITICAL RULES: "
+    "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'; "
     "   const enemyImg = new Image(); enemyImg.src = 'sprite_enemy.png'; "
     "   const keys = new Set(); "
-    "2. IMAGE LOADING: After declaring sprites use Promise.all to start the game: "
+    "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. startGame function sets up listeners and calls gameLoop: "
-    "   function startGame() { "
+    "3. 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 game logic functions at TOP LEVEL - NOT inside startGame or Promise.then. "
-    "5. MOVEMENT RULES DEPEND ON GAME TYPE: "
-    "   FOR TOP-DOWN SHOOTER - follow these EXACTLY inside gameLoop() every frame: "
-    "   NO gravity, NO velY += 0.5, NO grounded variable, NO jumping. "
-    "   STEP A - move player from keys every frame: "
-    "   if (keys.has('w') || keys.has('ArrowUp')) player.y -= player.speed; "
-    "   if (keys.has('s') || keys.has('ArrowDown')) player.y += player.speed; "
-    "   if (keys.has('a') || keys.has('ArrowLeft')) player.x -= player.speed; "
-    "   if (keys.has('d') || keys.has('ArrowRight')) player.x += player.speed; "
-    "   player.x = Math.max(0, Math.min(canvas.width-player.w, player.x)); "
-    "   player.y = Math.max(0, Math.min(canvas.height-player.h, player.y)); "
-    "   STEP B - move every bullet forward every frame (THIS IS REQUIRED): "
-    "   bullets.forEach(b => { b.x += b.vx; b.y += b.vy; }); "
-    "   bullets = bullets.filter(b => b.x>=0 && b.x<=canvas.width && b.y>=0 && b.y<=canvas.height); "
-    "   STEP C - move enemies toward player every frame: "
-    "   enemies.forEach(e => { const dx=player.x-e.x; const dy=player.y-e.y; "
-    "   const d=Math.sqrt(dx*dx+dy*dy); if(d>0){e.x+=dx/d*e.speed; e.y+=dy/d*e.speed;} }); "
-    "   STEP D - for shooting, add click listener on canvas inside startGame(): "
-    "   canvas.addEventListener('click', function(e){ "
-    "   const r=canvas.getBoundingClientRect(); "
-    "   const mx=e.clientX-r.left; const my=e.clientY-r.top; "
-    "   const dx=mx-(player.x+player.w/2); const dy=my-(player.y+player.h/2); "
-    "   const d=Math.sqrt(dx*dx+dy*dy); "
-    "   if(d>0) bullets.push({x:player.x+player.w/2, y:player.y+player.h/2, vx:dx/d*10, vy:dy/d*10, w:6, h:6}); }); "
-    "   FOR PLATFORMER: use gravity velY += 0.5, grounded checks, jump with ArrowUp/W/Space (velY=-12). "
-    "   Set grounded=false BEFORE platform loop. Set grounded=true and velY=0 only on landing. "
+    "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. "
-    "   FOR PLATFORMER: also declare platformImg and goalImg at top and include them in Promise.all. "
-"6. Draw background FIRST each frame: ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height). "
-    "7. Draw player/enemies with ctx.drawImage(playerImg, x, y, w, h). "
-    "8. Always keep player inside canvas boundaries. "
+    "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). "
     "Output ONLY the raw HTML - no markdown fences, no explanation, nothing else."
 )
 
-
 def generate_game_code(game_type: str, theme: str, temperature: float, max_new_tokens: int):
     if not theme.strip():
         return "", "", "Please enter a theme first.", _placeholder_html("Enter a theme and generate a game.")