Update app.py

app.py

@@ -317,50 +317,70 @@ CODE_SYSTEM = (
     "   const canvas = document.getElementById('gameCanvas'); "
     "   const ctx = canvas.getContext('2d'); "
     "   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 bgImg = new Image();     bgImg.src = 'sprite_background.png'; "
+    "   const enemyImg = new Image();  enemyImg.src = 'sprite_enemy.png'; "
     "   const keys = new Set(); "
     "   const bullets = []; "
     "   const enemies = []; "
     "   let score = 0; let health = 3; let frameCount = 0; let gameOver = false; "
-    "2. FOR TOP-DOWN SHOOTER declare player right after: "
+    "2. FOR TOP-DOWN SHOOTER declare player right after (center of canvas, NOT at bottom): "
     "   let player = {x: canvas.width/2-24, y: canvas.height/2-24, w:48, h:48, speed:4}; "
-    "3. Use Promise.all to wait for images AFTER all declarations: "
+    "   DO NOT set player.y = canvas.height - 24. Player starts in the CENTER. "
+    "3. Use Promise.all AFTER all declarations: "
     "   function loadImg(img) { return new Promise(r => { img.onload = r; }); } "
     "   Promise.all([loadImg(playerImg), loadImg(bgImg), loadImg(enemyImg)]).then(startGame); "
-    "4. startGame() only sets up listeners and starts the loop - NO canvas/ctx/player here: "
+    "4. startGame() ONLY 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); } "
-    "5. gameLoop() uses the top-level canvas and ctx - NEVER redeclare them inside gameLoop: "
+    "5. gameLoop() NEVER redeclares canvas or ctx: "
     "   function gameLoop() { "
     "     if (gameOver) return; "
     "     ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height); "
-    "     ... game logic ... "
+    "     ... update and draw everything ... "
     "     requestAnimationFrame(gameLoop); } "
-    "6. FOR TOP-DOWN SHOOTER movement - copy EXACTLY: "
+    "6. FOR TOP-DOWN SHOOTER movement - 4 directions, clamp inside canvas: "
     "   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; "
-    "   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)); "
-    "7. FOR TOP-DOWN SHOOTER bullets - fire on MOUSE CLICK straight UPWARD: "
+    "   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)); "
+    "7. FOR TOP-DOWN SHOOTER bullets - MOUSE CLICK fires bullet straight UP ONLY, NO vx: "
     "   function onShoot(e) { "
-    "     bullets.push({x:player.x+player.w/2-4, y:player.y-16, w:8, h:16, vy:-10}); } "
-    "   Each frame: bullets[i].y += bullets[i].vy; draw yellow rect; remove when y+h<0. "
+    "     bullets.push({x: player.x+player.w/2-4, y: player.y-16, w:8, h:16, vy:-10}); } "
+    "   Inside gameLoop update bullets like this EXACTLY: "
+    "   for (let i = bullets.length-1; i >= 0; i--) { "
+    "     bullets[i].y += bullets[i].vy; "
+    "     ctx.fillStyle='yellow'; ctx.fillRect(bullets[i].x, bullets[i].y, 8, 16); "
+    "     if (bullets[i].y + 16 < 0) { bullets.splice(i,1); continue; } "
+    "     for (let j = enemies.length-1; j >= 0; j--) { "
+    "       if (bullets[i] && bullets[i].x < enemies[j].x+32 && bullets[i].x+8 > enemies[j].x "
+    "           && bullets[i].y < enemies[j].y+32 && bullets[i].y+16 > enemies[j].y) { "
+    "         enemies.splice(j,1); bullets.splice(i,1); score+=10; break; } } } "
     "8. FOR TOP-DOWN SHOOTER enemies - spawn every 120 frames, fall straight down: "
     "   frameCount++; "
-    "   if (frameCount % 120 === 0) enemies.push({x:Math.random()*(canvas.width-32), y:0, w:32, h:32, speed:1.5}); "
-    "   Each frame: e.y += e.speed; draw with ctx.drawImage(enemyImg,e.x,e.y,32,32); "
+    "   if (frameCount % 120 === 0) { "
+    "     enemies.push({x: Math.random()*(canvas.width-32), y:0, w:32, h:32, "
+    "       speed: Math.min(1 + score/500, 3.5)}); } "
+    "   speed formula Math.min(1 + score/500, 3.5) means enemies start slow and "
+    "   get faster as score increases but NEVER exceed speed 3.5. "
+    "   Each frame: e.y += e.speed; ctx.drawImage(enemyImg,e.x,e.y,32,32); "
     "   Remove if e.y > canvas.height. If overlaps player: health--; remove enemy. "
-    "   Check bullet-enemy collision: remove both. score += 10. "
     "9. Draw player: ctx.drawImage(playerImg, player.x, player.y, player.w, player.h). "
-    "10. GAME OVER when health<=0: set gameOver=true, draw Game Over + score on canvas, "
-    "    draw Restart button on canvas, add ONE-TIME click listener calling reset(). "
-    "11. reset() resets all variables: player pos, bullets, enemies, score, health, frameCount, gameOver=false, then requestAnimationFrame(gameLoop). "
+    "10. GAME OVER when health<=0: set gameOver=true, draw dark overlay + "
+    "    'GAME OVER' text + score on canvas center, draw a green Restart button rect, "
+    "    add ONE-TIME canvas click listener: canvas.addEventListener('click', restartHandler); "
+    "    function restartHandler() { canvas.removeEventListener('click', restartHandler); reset(); } "
+    "11. reset() resets ALL variables to initial values then calls requestAnimationFrame(gameLoop): "
+    "    function reset() { "
+    "      player.x=canvas.width/2-24; player.y=canvas.height/2-24; "
+    "      bullets.length=0; enemies.length=0; "
+    "      score=0; health=3; frameCount=0; gameOver=false; "
+    "      canvas.addEventListener('click', onShoot); "
+    "      requestAnimationFrame(gameLoop); } "
     "12. FOR PLATFORMER: gravity velY+=0.5, jump ArrowUp/W/Space velY=-12 when grounded. "
     "    Set grounded=false BEFORE platform loop. Set true and velY=0 only on landing. "
     "    Full-width ground at y=420. "
@@ -451,9 +471,11 @@ def _wrap_in_html(snippet: str, theme: str) -> str:
 def _build_preview(html_code: str) -> str:
     encoded = base64.b64encode(html_code.encode("utf-8")).decode("ascii")
     return (
+        f'<div style="width:{CANVAS_W}px;height:{CANVAS_H}px;overflow:hidden;border-radius:12px;">'  
         f'<iframe src="data:text/html;base64,{encoded}" '
-        f'style="width:{CANVAS_W}px;height:{CANVAS_H}px;border:none;border-radius:12px;background:#000;display:block;" '
-        'sandbox="allow-scripts" title="Game Preview"></iframe>'
+        f'style="width:{CANVAS_W}px;height:{CANVAS_H}px;border:none;background:#000;display:block;" '
+        f'scrolling="no" '
+        'sandbox="allow-scripts" title="Game Preview"></iframe></div>'
     )