The user is asking for a "Bawang Card"-style (Bao Wang Ka / Bawang Ka) Tank Battle game in the style of the childhood "Bawang Card" (a classic arcade Tank 1990 / Battle City-style game). Single player, 10 levels. The request is in Chinese, so I should respond in Chinese. What's needed: 1. Make a full HTML file with the canvas-based game 2. Single player, 10 levels 3. Battle City (Tank 1990) style — classic NES Tank game Features to implement: - Player tank with WASD/arrow key movement, space to fire - Enemies spawn per level - Brick walls (destructible), steel walls (indestructible), water (blocks tanks but bullets pass through), trees (decorative overlay), base (eagle) to protect - Level 1-10 layouts (classic Battle City has 35 stages, but I'll design 10) - Lives, score, enemy counter - Explosion animations - Power-ups (star for upgrade, helmet, shovel, grenade, clock, tank for extra life) - Sound effects via Web Audio API (retro beeps) - Game states: title, level start, playing, game over, victory - 30px classic grid (13x13 blocks = 26px… actually classic Battle City is 13x13 with 8px half-bricks, 26x26px tiles). I'll use a 26x26px tile grid, 13x13 = 338px canvas, scaled up. Let me design this carefully: Classic Battle City: - 13x13 block grid, each block 26px, made of four 13px half-bricks - Player tank is 26px - Enemy tanks 26px - Bullets are small - Water, trees, steel, brick Things I'll implement: - Grid of tiles: EMPTY, BRICK, STEEL, WATER, TREE - Destructible bricks (each brick is a full tile; bullet destroys half? More simply: bullet destroys the whole tile, but steel requires a power level? Actually in the classic game steel can only be destroyed by power level 3+ bullets… let me simplify: level 3 (max) player bullets can destroy steel, or use "power" from star power-up) Simplification for good gameplay: - Player can be upgraded (power 1-4): more bullets, faster bullets, can destroy steel at max - Enemies: basic (1 point), fast (2 points), power (3 points, fast bullets), armor (4 points, 4 hits) - Enemy spawn at top 3 locations - Maximum concurrent enemy count: 4 - Total enemies per level: 20 (classic) — maybe 12-24 for 10 levels. - Base (eagle) is at bottom center; if destroyed → game over Power-ups (dropped randomly by specific enemies or at fixed positions): - ★ Star: upgrade player - ⏱ Timer: freeze enemies - 🪓 Axe: destroy existing bullets? Simplification: "Grenade" destroys all enemies - 🛡 Helmet: shield player for a while - 💣 Bomb: destroy all enemies - Tank: extra life Controls: - Arrow keys/WASD to move - J/Space to fire - P to pause - Enter to start Visuals: - Retro pixel style. Render on a pixelated canvas. - 26px tiles, 13x13 grid = 338px. Scale up to about 676px on display (2x), use image-rendering: pixelated. - Actually, let me draw at a 338x338 canvas, scaled up to 580-676px via CSS. Sound: Web Audio API — square waves for shots, explosions, level start jingle, power-up sound. Page design around the game: - Retro arcade cabinet vibe / childhood nostalgia - Chinese title: "霸王卡坦克大战" or "童年·坦克大战" - The opening should be the game itself, framed like an old arcade/Famicom screen, or with a Bawang card style header (those collectible cards from 90s China). - Distinctive display typeface: use a pixel font like "Press Start 2P" from Google Fonts? But it needs to work offline? The user said an external library is fine as long as the full HTML is included. I can include a Google Fonts link. For Chinese text, a pixel Chinese font is heavy. Use "Press Start 2P" for numbers/English, and use a strong Chinese font like "ZCOOL KuaiLe" from Google Fonts (站酷快乐体) — playful and matches the childhood vibe. Or "Noto Sans SC" as fallback. ZCOOL KuaiLe is available on Google Fonts and is playful. Let me use: - Display: "ZCOOL KuaiLe" (Chinese playful) + "Press Start 2P" for pixel Latin - Body: system Chinese font / "Noto Sans SC" The retro game aesthetic naturally wants a dark background with neon. I'll go with a warm CRT arcade vibe: deep navy/charcoal background with scanlines, amber/green/red accents (like old arcade marquee colors). Multiple accents: cyan, magenta? Hmm. Let me go with a "Famicom + arcade" palette: deep blue-gray background (#1a1d29?), amber marquee (#ffb800), red (#ff3b3b), green (#3ddc84?). Actually let me do a warm dark slate with a "90s Chinese arcade" palette — marquee red, gold, cyan. Use a textured background (subtle grid/pattern, scanline overlay, maybe drifting pixel particles). Layout: - Top: arcade marquee-style header: "坦克大战" with a Bawang Card badge, "童年经典 · 单人10关" - Main: game screen (CRT frame with bezel) on the left, side panel with: score, lives, level, enemy icons remaining, controls, power-ups legend. - Footer strip: tips. Interactive touches: - Animated marquee lights (blinking arcade bulbs) - Side panel enemy count icons update - Score pop animation - CRT scanline flicker - Hover effects on buttons Game implementation details: Grid: 13 cols x 13 rows of 26px tiles → 338x338. Tank size: 26px. Bullets 6px. Tile types: 0 empty 1 brick 2 steel 3 water 4 tree (rendered as overlay, doesn't block tanks or bullets) Map is defined as string rows of characters: '.'=empty, '#'=brick, '@'=steel, '~'=water, 'T'=tree. Classic base is at bottom center: position (6, 12) tile, surrounded by bricks. Player spawns at (3, 12)? Classic: player 1 is col 3 (x=82?), actually player 1 spawn is tile (3,12)? In classic, bottom row tiles 12: base is col 6, player 1 at col 3? Enemy spawns: cols 0, 6, 11 (top row). Let me set: player spawn tile col 4 (x=4*26=104), enemy spawns col 0, 6, 11 top row (row 0). Base tile (6,12) — eagle inside, with brick wall around: tiles (5,11),(6,11),(7,11),(5,12),(7,12). 10 level maps. I'll design them as 13-char strings. Let me design each level (13 wide, 13 tall). Ensure the bottom row near spawn is mostly clear. Level 1 (classic-ish): ``` ............. .#.#.#.#.#.#. .#.#.#.#.#.#. .#.#.###.#.#. .#.#.###.#.#. .#.#.###.#.#. .###.....###. ............. ..#..###..#.. ...T.###.T... ...T.###.T... .....#....... .....B....... ``` Wait, I need a base at col 6 row 12. Let me encode the base area explicitly as a brick ring with 'E' = eagle position. Actually simpler: put a ring in all maps: row 11: cols 5,6,7 brick; row 12: cols 5 and 7 brick, col 6 = base. Let me handwrite the maps. Use characters: '.' empty, '#' brick, '@' steel, '~' water, 'T' tree, 'E' eagle (base), and I'll add the brick ring around the eagle programmatically to avoid mistakes. Actually, to be safe, I'll define maps without the base area and have code always place a base ring at the fixed location (overriding tiles). That ensures consistency. Map areas to leave clear: player spawn area around tile (4,12) → clear tiles (4,12),(4,11),(5,12)? Base ring occupies (5,11),(6,11),(7,11),(5,12),(7,12),(6,12=E). Player spawn col 4 row 12, and col 8 row 12 clear? Enemies don't need bottom spawn. Let me code-clear: set tiles (4,11),(4,12),(3,12)? Actually only the tank footprint: tanks are 26px = 1 tile. So just need tile (4,12) clear, and ideally (4,11) for movement. I'll clear tiles (3,12),(4,12),(5,12)? No — (5,12) is the base ring brick. Keep (5,12) brick; clear (3,11),(3,12),(4,11),(4,12). Enemy spawn top row tiles (0,0),(0,1)? Tanks move around so no issue; I'll clear (0,1),(0,2),(6,1),(6,2),(11,1),(11,2) from walls to avoid instant overlap. Just don't put walls there in my maps. Let me write 10 maps: L1 (intro, mostly brick): ``` row0: .#.#.#.#.#.#. ``` Hmm, top row should have spawn columns 0,6,11 empty. So row 0: `.#.#.#.#.#.#.` → col 0 '.', col 1 '#', col 2 '.', col 3 '#', col 4 '.', col 5 '#', col 6 '.', col 7 '#', col 8 '.', col 9 '#', col 10 '.', col 11 '#', col 12 '.'. Wait, col 11 is '#' but spawn col 11 needs to be empty. Let me do row 0: `.#.#.#...#.#.`? col 11 is '.', col 12 is '.'? Let me count: chars: 0'.', 1'#', 2'.', 3'#', 4'.', 5'#', 6'.', 7'.', 8'.', 9'#', 10'.', 11'#', 12'.' — col 11 is '#'. No good. More simply: keep row 0 mostly empty: `.............` or with a few bricks away from cols 0,6,11. Let me write maps carefully: L1: ``` ".............", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#...#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", "...#.#.#.#...", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.....#.#.", "............." ``` All rows length 13. Row 0 all empty (spawn is fine). Good. L2 (with water): ``` ".............", ".....#...#...", ".#.#.#...#.#.", ".#.#.#...#.#.", ".T.#.~~#.#.T.", ".T.#.~~#.#.T.", ".#.#.~~#.#.#.", ".#.#.~~#.#.#.", ".#.#...#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", "............." ``` Water in central cols 5-6 rows 4-7? `.T.#.~~#.#.T.` → chars: 0'.', 1'T', 2'.', 3'#', 4'.', 5'~', 6'~', 7'#', 8'.', 9'#', 10'.', 11'T', 12'.' — 13 chars. Good. L3 (steel intro): ``` ".............", ".@.#....#.@..", "#.#.#.#.#.#.#", ``` Hmm wait, col 0 row 2 '#' is fine (not spawn row). Actually, spawn is only row 0 (top). Spawn is at top of row 0; tanks spawn at tile col row 0. So row 0 must have empty at cols 0,6,11. ``` ".............", "..#.#...#.#..", ".#.#.#.#.#.#.", ".#..#...#..#.", ".@.#..T..#.@.", ".@.#.###.#.@.", ".#..#...#..#.", ".#.#.#.#.#.#.", "..#.#...#.#..", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", "..#.#.#.#.#..", "............." ``` Verify row 4: `.@.#..T..#.@.` → 0'.', 1'@', 2'.', 3'#', 4'.', 5'.', 6'T', 7'.', 8'.', 9'#', 10'@', 11'.', 12'.' = 13. Good. L4 (river crossing): ``` ".............", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#..#...#..#.", "~~~#...#~~~..", "~~~#.#.#~~~..", ``` Hmm let me not overthink; I'll write it and verify length in code mentally. Let me construct all rows with exactly 13 chars. I'll be disciplined. Let me define each map as an array of 13 strings, each 13 chars. I'll count by grouping: positions 0-12. L1: r0: "............." r1: ".#.#.#.#.#.#." r2: ".#.#.#.#.#.#." r3: ".#.#.#.#.#.#." r4: ".#.#...#.#.#." r5: ".#.#.#.#.#.#." r6: ".#.#.#.#.#.#." r7: ".#.#.#.#.#.#." r8: "...#.#.#.#..." r9: ".#.#.#.#.#.#." r10:".#.#.#.#.#.#." r11:".#.#.....#.#." r12:"............." (r4: 0'.', 1'#', 2'.', 3'#', 4'.', 5'.', 6'.', 7'#', 8'.', 9'#', 10'.', 11'#', 12'.' → 13 ✓) L2: r0: "............." r1: ".#.#.#.#.#.#." r2: ".#.#.#.#.#.#." r3: ".#.#.~.#.#.#." → hmm water col 5? Let me do: r1: ".#.#...#...#." r2: ".#.#.~~#~~.#." r3: ".#.#.~~#~~.#." r4: ".#.#...#...#." r5: ".#.#.#.#.#.#." r6: "....#...#...." r7: ".#.#.#.#.#.#." r8: ".#.#.#.#.#.#." r9: ".#...###...#." r10:".#.#.#.#.#.#." r11:"............." r12:"............." Wait, r11 must be empty in area cols 3-7 for the base ring; the ring is auto-placed anyway (overrides). Actually the ring occupies (5,11),(6,11),(7,11),(5,12),(7,12). r11 cols 5-7 = ring brick. If map has bricks there, that's fine (same). I'll set r11 to "............." and let the ring override. L2 rows: r0 "............." r1 ".#.#...#...#." r2 ".#.#.~~#~~.#." r3 ".#.#.~~#~~.#." r4 ".#.#...#...#." r5 ".#.#.#.#.#.#." r6 "....#...#...." r7 ".#.#.#.#.#.#." r8 ".#.#.#.#.#.#." r9 ".#...###...#." r10".#.#.#.#.#.#." r11"............." r12"............." Count check r2: .#.#.~~#~~.#. → 0'.', 1'#', 2'.', 3'#', 4'.', 5'~', 6'~', 7'#', 8'~', 9'~', 10'.', 11'#', 12'.' ✓ 13. L3 (steel fortress): r0 "............." r1 "..#.#.#.#.#.." r2 ".#.#.#.#.#.#." r3 ".#..#...#..#." r4 ".@..#..T.#.@." r5 ".@..#.###.#@." hmm Let me redo: r1 ".#..#.#.#..#." r2 ".#.#.#.#.#.#." r3 ".@....#....@." r4 ".@.#.#...#.@." wait, let me make it symmetric and clean: r1: ".#..#.#.#..#." r2: ".#.#.#.#.#.#." r3: ".@.#...#.#@.." no... Let me design L3 like this: ``` ".............", ".#..#.#.#..#.", ".#.#.#.#.#.#.", ".@...###...@.", ".@.#......#@", no... ``` Simpler symmetric: r1 ".#...#...#.."? I'll stop fiddling; I'll write final maps in code and verify lengths. Let me do a quick sanity table now for all 10 maps (13x13). L3: r0 "............." r1 ".#.#.#.#.#.#." r2 ".#.#.#.#.#.#." r3 ".@...###...@." r4 ".@..#...#..@." r5 ".#..#.T.#..#." r6 ".#..#...#..#." r7 ".@..#.###..@." r8 ".@...###...@." r9 ".#.#.#.#.#.#." r10".#.#.#.#.#.#." r11"............." r12"............." Check r3: .@...###...@. → 0'.', 1'@', 2'.', 3'.', 4'.', 5'#', 6'#', 7'#', 8'.', 9'.', 10'.', 11'@', 12'.' ✓ r4: .@..#...#..@. → .@..#...#..@. count: 1+1+2+1+3+1+2+1+1 = 13 ✓ r5: .#..#.T.#..#. ✓ 13 r7: .@..#.###..@. ✓ L4 (water + steel): r0 "............." r1 ".#.#.#.#.#.#." r2 ".#.#.#.#.#.#." r3 ".#.#.###.#.#." r4 "~~#....~~~~#." hmm 13: 0'~', 1'~', 2'#', 3'.', 4'.', 5'.', 6'.', 7'~', 8'~', 9'~', 10'~', 11'#', 12'.' — asymmetric and ugly. L4 alternative: horizontal river: r0 "............." r1 ".#.#.#.#.#.#." r2 ".#.#.###.#.#." r3 ".#.#.###.#.#." r4 "..~~#...#~~.." r5 "..~~#.#.#~~.." r6 "..~~#.#.#~~.." r7 "..~~#...#~~.." r8 ".#.#.###.#.#." r9 ".#.#.###.#.#." r10".#.#.#.#.#.#." r11"............." r12"............." r4 check: ..~~#...#~~.. → 2+2+1+3+1+2+2=13 ✓ r5: ..~~#.#.#~~.. → 2+2+1+1+1+1+1+2+2=13 ✓ L5 (steel maze): r0 "............." r1 ".@.#.....#.@." r2 ".#.#.#.#.#.#." r3 ".#...#.#...#." r4 ".#.#.###.#.#." r5 ".@.#...#...@." wait 13: 0'.', 1'@', 2'.', 3'#', 4'.', 5'.', 6'.', 7'#', 8'.', 9'.', 10'.', 11'@', 12'.' ✓ r6 ".#.#.T.T.#.#." r7 ".#...#.#...#." r8 ".#.#.###.#.#." r9 ".#.#.#.#.#.#." r10".@.#.....#.@." r11"............." r12"............." L6 (trees cover): r0 "............." r1 ".TT.#.#.#.TT." r2 ".TT.#.#.#.TT." r3 ".#..#.#.#..#." r4 ".#.~~#.#~~.#." r5 ".#.~~#.T.~~#." hmm 13: 0'.', 1'#', 2'.', 3'~', 4'~', 5'#', 6'.', 7'T', 8'.', 9'~', 10'~', 11'#', 12'.' ✓ r6 ".#..#.#.#..#." r7 ".#.#.#.#.#.#." r8 ".#.T.#.#.T.#." r9 ".#.#.#.#.#.#." r10".TT.#.#.#.TT." r11"............." r12"............." r1 check: .TT.#.#.#.TT. → 1+2+1+1+1+1+1+1+2+1=13 ✓ L7 (steel + water combo): r0 "............." r1 ".#..#.#.#..#." r2 ".#.###.#.###." 13: .# .### .# .### → 1+1+3+1+1+3=10? .#(2)###(3)=5, .(1)=6, #(1)=7, .(1)=8, ###(3)=11, .(1)=12? Let me count chars: '.#', '###', '.#', '.###' → hmm just write: ".#.###.#.###." = . # . # # # . # . # # # . → 13 ✓ (symmetric: mirror .#.###.#. = 9 chars, plus .###. (5) = 14? no. Let me count: .(1) #(2) .(3) #(4) #(5) #(6) .(7) #(8) .(9) #(10) #(11) #(12) .(13) ✓ 13. r3 ".#..#...#..#." r4 ".~~@.###.~~#." → .(1)~(2)~(3)@(4).(5)#(6)#(7)#(8).(9)~(10)~(11)#(12).(13) ✓ r5 ".~~@.###.~~#." r6 ".#..#...#..#." r7 ".#.#.###.#.#." r8 ".#.#.###.#.#." r9 ".#..#...#..#." r10".#.#.#.#.#.#." r11"............." r12"............." Hmm, water in left cols 1-2 rows 4-5 blocks the left path; ok but is there a way around? Row 3 is open at col 1? r3 col 1 '#'. Water r4c1, r4c2, r5c1, r5c2; r6c1 '#'. Left edge col 0 is open (all '.'), so we can get through. OK. L8 (heavy steel): r0 "............." r1 ".@.#.#.#.#.@." r2 ".#..#.#.#..#." r3 ".#.##.~.##.#." 13? .(1)#(2).(3)#(4)#(5).(6)~(7).(8)#(9)#(10).(11)#(12).(13) ✓ r4 ".#..#...#..#." r5 ".@.###.###.@." → .(1)@(2).(3)#(4)#(5)#(6).(7)#(8)#(9)#(10).(11)@(12).(13) ✓ r6 ".#..#...#..#." r7 ".#.##.~.##.#." r8 ".#..#.#.#..#." r9 ".@.#.#.#.#.@." r10".#.#.#.#.#.#." r11"............." r12"............." L9 (gauntlet): r0 "............." r1 ".#.#.###.#.#." r2 ".#.#.###.#.#." r3 ".#..#...#..#." r4 ".@..#.T.#..@." r5 ".#..#.T.#..#." r6 ".#..#...#..#." r7 ".@..#.###..@." r8 ".#..#.###..#." hmm, let's make it symmetric: r8 ".#..#.###..#."? Asymmetric is ok but let's do ".#..#.###..@." r9 ".#.#.#.#.#.#." r10".#.#...#.#.#." r11"............." r12"............." L10 (final boss level): r0 "............." r1 ".@...###...@." r2 ".#..#.#.#..#." r3 ".#..#.~.#..#." r4 ".@..#.T.#..@." r5 ".#..#.###..#." r6 ".#..#...#..#." r7 ".@..#.###..@." r8 ".#..#.###..#." r9 ".#.#.#.#.#.#." r10".@...###...@." wait, that would block the approach to base with steel at row 10 cols 1 and 11 — steel only destructible at max power; the base ring is bricks. Path: col 0 is open. OK. r10 ".#.#...#.#.#." r11 "............." r12 "............." Good — I'll finalize these in code. All rows must be 13 chars; I'll trust my counts and add defensive code: if row shorter, pad with '.', if longer, slice. Now game mechanics: Movement: grid-aligned movement (classic tank moves on pixel positions but collides with tile grid). Simpler: tank moves on pixel positions with collision against tiles (AABB vs blocked tiles). Classic feel: tank 26px, speed ~1.6px/frame (60fps) for player, enemies 0.8-1.6. Collision resolution: try to move x, check collisions against solid tiles (brick, steel, water) and bounds; if collision, snap to grid? For good feel, on axis move, if blocked, align to tile boundary (snap). Let me implement: newX = x+dx; if collision → try to snap: if dx>0, set x = floor(newX/T)*T - (T - size)? Hmm. Tank size 26 = T so it works out: tank occupies exactly 1 tile when aligned. But during movement between alignments… let me use standard: if moving right and collision, x = min(x, (floor(newX/T)+1)*T - T)? Simpler and more common approach: - Compute the new position; check corners against solid tiles; if blocked, clamp: if dx>0 → x = Math.floor((x+dx)/T)*T - … Let me use the approach: for horizontal movement: ``` let nx = x + dx; if (collides(nx, y)) { // snap to nearest tile edge if (dx > 0) nx = Math.floor((nx + T) / T) * T - T + (T - size)/1; ... ``` Tank size == T so if aligned, tank's left is at k*T. When partially moving, left = 13 (half tile). Collision with wall: right edge hits wall left. To snap: nx = (Math.floor(nx/T) + 1) * T - T? If nx=14 (moving right), floor(14/26)=0, → 26-26=0? That would snap it left. Not right. Standard simple approach many implementations use: if collision, cancel movement but also snap back to tile center grid to avoid stuck jitter: - If dx>0 && collides: x = Math.floor(x/T)*T (snap left back) - If dx<0 && collides: x = Math.ceil(x/T)*T (snap right back) This is clean: tank stays within its tile, no jitter. Similarly for y. That's the classic "tile-snap" movement. But tank can be partially between tiles, say x=13 moving right, hits wall at x=26 (wall tile col 1). floor(13/26)=0 → x=0. Snaps left by 13. Fine. Bullets: 8x8? Bullets 6px square, speed 4px/frame (player), 2.5px/frame (enemy). Bullet-tank collision (enemy bullets hit player; player bullets hit enemies; enemy bullets do not hit other enemies… in classic, enemy bullets pass through each other, but let me make it so player bullets hit enemies). Bullet-wall: brick → remove tile (maybe remove a half; I'll remove whole tile for simplicity; actually classic removes half-bricks: a 26px brick tile has 4 sub-bricks 13x13. Bullet 6px hits one sub-brick. That adds flavor… let me implement sub-brick destruction: brick tile has a 2x2 mask; when bullet hits, destroy the sub-brick cell(s) that bullet overlaps. That's a nice authentic touch, not much code. Steel: bullet bounces (spark). Water: bullet passes. Trees: pass. Eagle base: separate AABB (tile 6,12 → rect x=156,y=312,26,26). If bullet hits it, or enemy tank hits it → base destroyed → game over. Enemy AI: - Spawn at top (cycle cols 0, 6, 11), with spawn animation (blinking star) - Movement: pick a direction (bias downward), move until blocked, then pick a new direction (random with downward preference). Fire randomly (based on cooldown and type). - Armor tank: 4 HP, flashes when hit (armor levels change color: 4=dark, 3, 2, 1). - Fast: speed 2. - Power: bullet speed 5. - Freeze: if frozen, cannot move/fire. Score: basic 100, fast 200, power 300, armor 400. Power-up gives 500. Player power: - Lv1: 1 bullet, speed 4 - Lv2: 2 bullets, speed 5 - Lv3: 3 bullets, speed 6 - Lv4: 4 bullets + can destroy steel, speed 7 Star power-up increments up to 4. Player spawn: 2-second invincible shield (flashing ring). Lives 3 (classic), start with 3. Power-up types and effects: - 'star': upgrade - 'tank': +1 life - 'shovel': temporarily reinforce base with steel for 10s (classic) — implement: save ring bricks, replace with steel, restore after 10s. - 'grenade': destroy all enemies on field - 'clock': freeze enemies 10s Render as small icons in classic (white box with symbol). I'll draw with canvas shapes/text. Which enemy drops: in classic, a "power" enemy marked with a star? Actually in original, every 4th? In NES Battle City, when a "power-up enemy" (with a star icon) is killed, it drops a random power-up. Simplify: 25% chance any enemy drops a power-up, or every 5th enemy spawns as a marked power carrier. Let me do: each level, every 5th spawned enemy is a "carrier" (drawn with a small star on top); when killed, it drops a random power-up at its position. Power-up lasts 12s (blinking last few seconds). Freeze: all enemies frozen for X seconds (cannot move/fire); timer HUD. Shovel: base ring becomes steel for 12s; if a grenade hits during shovel… well, fine. Grenade: kills all enemies currently on field (explosion, scores). Level flow: 20 enemies per level? 10 levels — vary count: level i → 14 + i*1? Classic is 20. For pacing, let's do total = 16 + level (17..26)? Hmm, that's a lot for later. 14 + level*1 → 15..24. Max concurrent 4, spawn interval ~3-4s. Actually classic pace: 20 enemies, 4 concurrent, spawn every ~2s. Let me use count = 16 + Math.floor(level/2) → L1 16, L10 21. Good. Enemy mix per level: weights change with level: basic 100, fast 50, power 100 (bullets faster), armor 200 (4 HP). Later levels add more armor/fast. HUD (side panel in DOM, outside canvas): - SCORE (big pixel numbers) - HIGH SCORE (localStorage) - LIVES (tank icons) - LEVEL x/10 - Enemies remaining (row of small tank icons, filled/empty) - Active power-up timer - Controls: 方向键/WASD 移动, J/空格开火, P 暂停, M 静音 DOM side panel updates from JS. Score pop animation on change (scale bump). Sound via WebAudio: - Shot: short square blip (frequency 800→200, 0.08s) - Brick hit: noise burst - Steel hit: metallic ping (square 1200 short) - Explosion: noise with lowpass decay (0.4s) - Player death: longer descending - Power-up: rising arpeggio - Level start: short melody (classic opening? 8-10 notes) - Game over: descending - Victory: fanfare - Frozen: sparkle - Shovel: digging Mute toggle with M. Create AudioContext on first user interaction (Enter/click). Game states: 'title' → 'levelintro' (show "STAGE n" banner on canvas, 1.5s) → 'play' → on death → 'dying' (pause world, respawn or game over) → 'gameover' → 'stageclear' (brief) → next or 'victory' after L10. Actually a classic level intro is a line of bricks across the screen, then "STAGE 1". Let me do: on canvas, a brick wall line in the middle, text "STAGE n" + level name, wait 1.6s. Level names (Chinese flavor): 1 新手村, 2 小河弯弯, 3 钢铁要塞, 4 渡河行动, 5 迷之回廊, 6 丛林伏击, 7 冰火两重天 (hmm, water)… Let me rename: 7 双水夹道, 8 重装防线, 9 铁血关卡, 10 决战霸王城. Title screen on canvas: big "坦克大战" pixel text, "霸王卡 · 童年经典" subtitle, blinking "按 ENTER 开始", small animation tanks, maybe a demo of enemies. Keep in canvas with retro style. Rendering: Canvas 338x338 (game area). Render at native size and scale up via CSS to ~620px with image-rendering: pixelated. Actually, drawing with crisp rects at 338, CSS-scale up, is fine. But I also want a surrounding "playfield border" — classic game has a white border? Screen area has a 2px white border. Add in CSS. Tile rendering: - Brick: draw 2x2 bricks per sub-cell 13px — color #b5451b / classic brick red (#9c4a00?). Classic brick is a dark orange/brown: let me use #c05621 with darker mortar lines. Each brick tile: draw 4 small bricks (13x13) with mortar. If mask destroyed, skip sub-cells. Draw mortar grid: background #7a2d12, bricks with 1px gap → nice. - Steel: bright gray block with highlights: base #b9c2cc, inner #8892a0, highlight #e8edf2. - Water: animated blue: 2 shades #2233cc/#3355ff? Classic water is blue with light blue. Animate with frame toggle: rows of offset light/dark stripes. - Tree: dark green #0f7a0f and bright #12a112 patches, drawn on top of tanks (overlay pass). - Eagle base: draw a simple eagle (gold #ffd24a) — a bird silhouette via rect/arc. When destroyed → gray rubble (stone color), and a small gray eagle. Tanks: 26px, drawn with rects: body, treads (animated with direction + movement offset), barrel. Player: classic bright yellow (#f8f8a0? Actually NES player tank is a bright yellow-white; enemies are gray/silver). I'll make player bright yellow #ffe97a, treads darker #caa22c… Let me do: body #f4d44a? Hmm, classic: player tank is pale yellow (#f8b800-ish?). NES player 1: yellowish-white. I'll pick #ffd84d body, #8a6d1f treads, barrel #ffe9a0. Enemies: gray #9aa0a8 body, #4c525a treads. Power: orange #ff8c2e? Actually let me color-code: basic gray, fast silver-white, power orange-red, armor: color depends on HP (4: dark navy?, 3: purple?, 2: orange?, 1: yellow?). Classic armor tank changes: 4 hits = brownish? Let me do: 4:#7a4fc0? no. Keep simple: armor base #d0b028 (gold) that changes to #c9c9c9 when damaged… I'll do HP-based: 4:#8f8f8f dark, 3:#c9a227, 2:#d06818, 1:#e8e8e8. Hmm, that overlaps with fast. OK — it's flavor. Direction: 4 orientations; draw with ctx.save/translate/rotate. Explosion: expanding circle of 3 phases (pixel burst): draw with arcs of orange/yellow/white, 0.5s. Big explosion for player death (3 phases, larger). Spawn animation: expanding star/diamond blink 0.6s. Bullets: 6x6 white with direction notch; small trail? Just keep simple. Screen shake on player death / base destroyed: small canvas translate. Background of page: - Dark slate blue (#141a26?) with: - CSS radial vignette - Subtle pixel grid or drifting "tank tread" pattern - Slow-moving scanline overlay across the whole page? Maybe just on the CRT. - Floating pixel particles (small squares) drifting — CSS animation, low opacity. - Marquee header: "坦克大战 TANK BATTLE" with arcade bulbs (blinking dots row) and Bawang Card style badge: a red/gold "霸王卡™ 童年典藏" chip. The user said "童年霸王卡" — Bawang cards were those collectible sticker cards popular in the 90s. Let me add a small card graphic: a tilted retro card with a tank illustration (canvas or CSS). I can draw a mini card with a tank emoji or canvas-drawn tank. Let me make a DOM card: gradient red-gold border, "No.001 霸王坦克" text, with a CSS-drawn tank? Simpler: use canvas for main game, and for the card, use inline SVG or unicode 🛡? Let me create a small decorative card with a CSS-drawn tank (body + barrel + treads as divs) — doable and charming. Layout: - Header: left: card + title block; right: high score + credits "10关挑战 · 单人". - Main: flex row (wrap): [CRT screen] [side panel with HUD] - CRT screen: bezel (dark, rounded), inner screen with canvas, scanline overlay (CSS repeating-linear-gradient), glass glare (subtle radial), power LED (blinking). - Side panel: styled as arcade sticker panel: SCORE, HI-SCORE, stage progress (10 dots), enemies remaining icons, lives, power legend (small canvas icons? or CSS/emoji). Legend can be rendered in small canvases — draw the icons programmatically into 6 mini canvases. Nice touch. - Bottom bar: controls with keycaps (kbd styling). Fonts: Google Fonts: "Press Start 2P" (pixel Latin) + "ZCOOL KuaiLe" (playful Chinese). Body: system Chinese font / "Noto Sans SC" as fallback. Pair: display = ZCOOL KuaiLe for Chinese + Press Start 2P for numbers; body = Noto Sans SC. Include link tags. Colors: page background #10141f (deep space blue) with amber marquee #ffcc33, red #ff4757, cream text #f5efe0, accent cyan #35e0d6? Multiple accents: gold, red, cyan used semantically (score gold, enemies red, water cyan). Background is not near-black: #131a2b-ish blue slate. Add a subtle pattern: repeating diagonal dark stripes, plus vignette. Motion: - Blinking header bulbs (CSS animation with staggered delays) - Floating pixel squares in background (a few absolutely positioned divs with float animations) - Score bump animation (JS adds a class) - Enemy icons pop as defeated (JS) - CRT: subtle flicker animation on scanlines, power LED pulse - Buttons hover states - Card wobbles on hover Now the code structure (single HTML file): ```html 坦克大战 · 童年霸王卡 10关

pixel particles

mini card with tank

坦克大战

童年霸王卡 · TANK BATTLE · 单人 10 关

最高分

BAWANG-CARTV · 4:3 像素显像管

``` HUD panel blocks: 1. SCORE / HI-SCORE (big pixel numbers) 2. 关卡: "03 / 10" + progress pips (10 squares) 3. 敌人: icons (generate up to max 24 small tank icons; fill = remaining, fade = defeated). Actually, show remaining count as a grid of icons; total per level varies — I'll render icons for total, and mark them "defeated" as killed. 4. 生命: 3 tank icons 5. 道具 legend: 5 mini canvases with labels (★火力, ♥生命, ⛏加固, 💣清屏, ⏱冰冻) 6. 状态: shows active effects (冰冻 8s / 加固 5s / 无敌) 7. 音效 toggle button Footer: keycap row: ←↑↓→ / WASD 移动 · J / 空格开火 · P 暂停 · M 静音 · R 重开. Now JS. Let me carefully write it. Constants: ``` const T=26, GW=13, GH=13, W=T*GW; //338 const BRICK=1, STEEL=2, WATER=3, TREE=4; ``` Grid: 2D array of numbers; brickMask: 2D array of 4-bit masks (bit = sub-cell exists: order [top-left, top-right, bottom-left, bottom-right] → bit0=TL, 1=TR, 2=BL, 3=BR). Map: array of 10 levels: {name, map: [13 strings], count, mix}. Tile solidity: tank solid: BRICK (mask>0), STEEL, WATER. Bullets: hit BRICK (destroy sub-cell), STEEL (destroy if playerPower>=4, else bounce). Collision function: ``` function solidAt(px,py){ // px,py are pixel coords const gx = Math.floor(px/T), gy = Math.floor(py/T); if(gx<0||gy<0||gx>=GW||gy>=GH) return true; const t=grid[gy][gx]; if(t===BRICK) return brickMask[gy][gx]!==0; if(t===STEEL||t===WATER) return true; return false; } function rectBlocked(x,y){ // tank rect x,y (top-left, size T) // Check 4 corners + edges? For 26px tank and 26 tiles, corners are enough if aligned… but during diagonal? No diagonal movement. Corners are ok, but check more points: (x+1,y+1),(x+T-1,y+1),(x+1,y+T-1),(x+T-1,y+T-1) and edge midpoints (x+T/2, y+1),(x+1,y+T/2)… edge midpoints help avoid corner-clip. Let me check: 8 points. } ``` Tanks don't collide with tanks in classic (they visually overlap). Actually they collide… in NES tanks block each other? They can overlap slightly; let me skip tank-tank collision for simplicity — classic tanks actually don't collide with each other much. Skip. But enemy spawn should check overlap with player/base to skip. Player movement with snap: ``` function moveTank(tk, dx, dy){ if(dx){ let nx = tk.x + dx; if(rectBlocked(nx, tk.y)) { nx = dx>0 ? Math.floor(tk.x/T)*T : Math.ceil(tk.x/T)*T; } ... also clamp nx to [0, W-T] tk.x = nx; tk.moving = true; } ... } ``` Wait, snapping to floor(x/T)*T might not resolve collision if there's a wall within the same tile? Tank is 1 tile size; if a wall is in its current tile, we can't be in this position. Since walls are tile-sized and tank is tile-sized, tank's tile cell is either clear (if tank is in an aligned region) — but a tank at x=13 straddles cols gx and gx+1… e.g., x=13 → left in col 0, right edge 39 → col 1. If col 1 has a wall, we would collide. Snapping back to 0 keeps us only in col 0 — but col 0 needs to be clear for that tank to be at 13? Not necessarily (tank entered col 0 fully, moved 13 into col 1 → collision → snap back to 0 — col 0 is clear so OK). Yes, safe. Edge clamp: nx=Math.max(0,Math.min(W-T,nx)). Bullets: ``` {x, y, dir, dx, dy, speed, from:'p'|'e', power} update: nx=x+dx*speed → check the leading tip: For each of 1..speed sub-steps? Speed 4-7, bullet size 6: check collision at new pos's center. ``` Simpler: move in increments of 1-2px and check each substep (speed<=7 so fine). Bullet vs wall: compute which tile bullet AABB overlaps. For each overlapping tile: - BRICK: destroy sub-cell mask: for each sub-cell (13x13), if overlaps with bullet → clear bit. If mask becomes 0 → grid empty. Play brick sound (throttled). - STEEL: if bullet.power (player's power) >= 4 → destroy tile, play explosion; else remove bullet, spark. - WATER/TREE: nothing. - Also check eagle base rect. - Also check enemy tanks (if from player): hit → enemy.hp--, if 0 → explode, score, possible drop. - Check player (if from enemy and not invulnerable): player death. - Out of bounds: remove; edge flash? small spark. Enemy bullet doesn't hit enemies (classic). Player bullets can hit steel/brick; enemy bullets too (enemy bullets destroy brick). Yes, in classic enemy bullets destroy brick. Enemy AI: ``` {type, x,y, dir, speed, hp, fireCd, frozen, spawnAnim, aiTimer, dirChoice} update: if spawnAnim>0: decrement; skip. if frozen (global freeze or type): skip movement/fire (unless player bullet hit). aiTimer--; if aiTimer<=0: pick new dir: weights: if dir is horizontal, 55% chance to go vertical (down preferred); pick from [down, up, left, right] with down weighted 2.5x, and check if that direction is open (look ahead a few px); if not, pick another; aiTimer = 60+rand*120. move: try dir; if blocked (can't move a few px), pick immediately (force). fire: fireCd--; if <=0 && (player bullet count? no) && random: fire (only if no own bullet? classic enemies can have multiple). Cap: enemy total bullet cap ~? Let's limit to 1 bullet per enemy at a time for fairness. fireCd = random based on type (e.g., 40-120 frames, shorter when aligned with player (aiming)). ``` Aim bonus: if roughly aligned with player (same row-ish or col-ish and in direction), increase fire probability. Freeze global: freezeTimer frames; enemies skip movement/fire while >0. Shovel: shovelTimer; on activate: save ring tiles, set to STEEL; on expire: restore original (if brick was destroyed in between — save mask). If grenade hits during shovel… fine. Grenade: for each enemy alive on field (spawnAnim done): explode, add score. Power-up spawn: from killed "carrier" enemy (flag). Spawn at enemy position (clamped inside play area, maybe snap to tile center). Lifetime 720 frames (12s), blinks last 120. Player collision → apply. Types and weights: star 30, tank 12, shovel 18, grenade 15, clock 25. Level intro overlay: introTimer ~100 frames; draw brick band across middle (2 rows of brick tiles), "STAGE n" pixel text + Chinese name; world behind is static (grid pre-drawn). Start world update after intro. Stage clear: after totalEnemiesSpawned+Killed === total && enemiesAlive===0 → clearTimer: show "本关完成!" and bonus? Classic doesn't add. Show "关卡完成" for 90 frames → next stage or victory. Victory screen: after L10 cleared: "通关!" with score, maybe fireworks (explosions at random), "按 ENTER 再来一次". Game over: "GAME OVER" + score + "按 ENTER 重新开始". Title: "坦克大战" big, sub "霸王卡 · 童年 10 关挑战", "PRESS ENTER / 点击屏幕开始", animated: 2 tanks + moving brick? Let me keep simple: draw a decorative border pattern and a blinking prompt. Also "最高分". Input: keydown/keyup set key map. preventDefault for arrows/space. Enter for start/confirm. P for pause (only during play). M for mute. R for restart to title? R restarts current level? Let me do: R → restart entire game (from level 1), confirm not needed. Pause overlay: dark + "暂停中 PAUSE". Audio: ``` let AC=null, muted=false (from localStorage); function beep(freq, dur, type, vol, slide) {...} function noise(dur, vol, filterFreq) {...} sfx = { shoot(){}, brick(){}, steel(){}, boom(){}, bigBoom(){}, power(){}, life(){}, freeze(){}, shovel(){}, stage(){}, over(){}, win(){} }; ``` Stage jingle: short classic-like: notes [E5, G5, B5, E6, ...]? Let me make: [659, 784, 988, 1319] quick. Victory: longer. WebAudio: create on first keydown/click (ensureAC()). Now the drawing details. drawTank(ctx, x, y, dir, palette, treads, isPlayer): - save; translate(x+13, y+13); rotate(dir*90°, with dir 0=up); draw centered: treads: left rect (-12,-12,5,24) with tread stripes animated by tk.moving offset (phase = (tk.phase+2)%8); body: rect (-8,-9,16,18) with inner shade; turret circle r5 in center; barrel: rect (-2,-13,4,10) top; highlight pixel. Palette: body, dark, tread, barrel. drawBase: eagle: gold bird: draw a simple shape: 2 arcs for wings, triangle for head… let me do pixel art with rect list: define an eagle bitmap 13x13 (half tile) as an array of strings and render at 2px per pixel → 26px. That's cleanest: pixel art array. Eagle 13x13: ``` ".....y.....", "....yyy....", "....yoy....", o=dark outline? ``` Let me design a simple bird: ``` "......b......", ".....bbb.....", ".....byb.....", "....bbbbbb...", ``` Hmm, 13 wide, 2px each = 26. Let me write: ``` const EAGLE = [ "......b......", ".....bbb.....", ".....byb.....", "....bbbbbb...", // 13 chars each ``` Let me craft carefully (13 chars per row, 13 rows): row0: ".....bbb....." (5 dots, 3 b, 5 dots) row1: "....byyb....."? Actually classic eagle: white bird with wings raised, standing on bricks. Let me do a symmetric bird: ``` ".....bbb.....", "....bbyb.....", "...bbbbbb....", "..bbbbbbbb...", ".bbbbbbbbbb..", "bbbbbbbbbbbb.", ".bbbbbbbbbb..", "..bb.....bb..", "...bb...bb...", "....b...b....", ".....bbb.....", "....bbyb.....", hmm feet "....bbbb....." ``` Let me define: r0 ".....bbb....." r1 "....byyb....." r2 "....byyb....." (eyes y) r3 "...bbbbbb...." r4 "..bbbbbbbb..." r3: "...bbbbbb...." (3 dots, 6 b, 4 dots) = 13 ✓ r4: "..bbbbbbbb..." (2+8+3) = 13 ✓ r5: ".bbbbbbbbbb.." (1+10+2) ✓ r6: ".bbbbbbbbbb.." ✓ r7: "..bbbbbbbb..." ✓ r8: "..bb....bb..." (2+2+4+2+3) = 13 ✓ r9: "...bb..bb...." (3+2+2+2+4) = 13 ✓ r10: "....b..b....." (4+1+2+1+5) = 13 ✓ r11: "....b..b....." ✓ r12: ".....bb......" (5+2+6) = 13 ✓ Colors: b=gold #ffd24a, y=dark #7a4a00 (eyes). When destroyed: b→#8a8f98 gray. drawBase: eagle: gold bird: draw a simple shape: 2 arcs for wings, triangle for head… let me do pixel art with rect list. That's cleanest. Brick sub-cell draw: for tile (gx,gy) with mask: for each bit, fill sub-rect with brick color, with 1px mortar gap: draw background #5a1f0c, then bricks at +1 inset, plus highlight lines. Pre-render? Performance: 169 tiles × 4 = fine per frame at 60fps canvas. But simpler: pre-render tile sprites to offscreen canvases at init (brick variants: 16 masks ×1? 16 variants; steel 1; water 2 frames; tree 1; eagle 2). That's clean and fast. Let me do: at init, make sprite canvases: - brickSprites[16] - steelSprite - waterSprites[2] - treeSprite - eagleSprite, eagleDeadSprite Draw with drawImage. Trees drawn after tanks (overlay) — collect tile positions. Bullet draw: white 5x5 with a small dark center based on direction. Explosion: array {x, y, t, big}: draw a pixel burst: circles: radius grows; draw 3 rings of squares in orange/yellow/white. Simpler: draw as an arc fill: outer orange r=2+8*p, middle yellow, core white, plus 8 spokes? Let me keep it chunky: draw as an arc fill with 'lighter'? Let me keep chunky: draw a star-shape of rects. Let me do: ``` function drawBoom(x,y,t,big){ const max = big? 30: 16; const p = t/TOT; const r = max * (0.4+0.6*p); colors... ctx: draw a diamond/circle burst: - outer: #ff6a00 circle r - mid: #ffd24a circle r*0.65 - core: #fff circle r*0.3 plus 6 spikes rects rotating. ``` Good enough, retro-arcadey. Spawn effect: rotating diamond blink: draw a plus-shape star that scales with sin. HUD DOM updates: update on change (score, lives, enemies remaining list, level pip, effect timer). Enemy icons: build container with total icons (small 14px canvas? or CSS div with mini tank in it). Use inline SVG? Simplest: divs with background gradient (dark) and class 'enemy-ic', with a mini tank inside drawn by CSS (3 divs)? Cheaper: use unicode? "▲"? Hmm. Let me use small canvases: 16x16 canvas, draw a gray tank icon. 24 mini canvases, no problem. Actually simpler and cleaner: enemy remaining as a row of small square "tokens" that look like mini tanks drawn once to a dataURL and reused as background. Yes: at init, render an icon to an offscreen canvas → toDataURL → set as background-image on .enemy-ic divs. When defeated → class 'dead' (opacity .15, grayscale, scale .7, transition). Life icons: same approach with yellow. Progress pips: 10 divs, class active/clear. Legend icons: draw 5 mini canvases (24px) with the icon art (star, tank, shovel, grenade, clock) in a white box — reuse the same draw function as in-game power-ups. Now power-up icons (in-game, 20px box): white rounded square, colored symbol: - star: gold star (5-point star path or pixel) - tank: red mini tank - shovel: gray shovel (rect handle + blade) - grenade: dark circle with ring + spark - clock: blue clock circle with hands Draw with canvas primitives; pre-render to offscreen canvas at init. Star pixel art 9x9: ``` "....*....", "....*....", ".*****...", ``` Easier: use ctx path with 5-point star polygon. Fine (crisp enough at 2x scale). Let me also handle the "carrier" marker: draw a small white star above the carrier enemy? In classic, the power tank is marked with a star icon… actually it's a "star tank" with a special look. Let me add a small white sparkle above the carrier. Freeze visual: enemies tinted blue + no movement; also a small snow overlay icon in HUD. Shovel: base ring drawn as steel (grid changes, so it happens naturally). Edge cases: - Player death: explosion, pause input, lives--, if >0 → respawn at spawn point with 2s invulnerable, clear nearby? Classic respawns at same spot; if occupied by enemy, wait. Simplify: respawn immediately at spawn with invulnerable 150 frames; enemies unaffected. - If base destroyed → game over (immediate, even if lives remaining). - Enemy spawn overlap with eagle/player → skip to next slot. Total bullets: player max = power level (1-4). Enemies: 1 each. Score: on kill add score; pop animation on DOM. High score: localStorage 'bt10_hs'. Timer: freeze/shovel display on HUD as bar or seconds. Now let me write the level intro and stage names: ``` const LEVELS=[ {name:"新手村", map:[...], }, {name:"小河弯弯"}, {name:"钢铁要塞"}, {name:"渡河行动"}, {name:"迷之回廊"}, {name:"丛林伏击"}, {name:"双水夹道"}, {name:"重装防线"}, {name:"铁血回廊"} → let's do "九曲钢关", {name:"决战霸王城"} ]; ``` Enemy count: 16 + Math.ceil(level/2)? L1 17, L10 21. Let me use count = 15 + level → 16..25. Max icons 25. OK. Mix function by level: ``` function pickEnemyType(lv){ const r=Math.random()*100; // thresholds shift with level const fast=10+lv*3, power=10+lv*2, armor=5+lv*2.5; if(r=4: destroy entire tile (grid=0), boom. Eagle: rect (6*26, 12*26, 26, 26) = (156,312). Bullet hit → base destroyed: baseDead=true; big boom; state → gameover sequence. Enemy tank overlapping eagle also kills base: check each enemy rect vs eagle rect overlap (26px square at aligned-ish position) → destroyed. Respawn: spawn order cycles [0,6,11]. Spawn location check: rect free (no solids, no base, no player overlap) else skip to next slot (max 3 tries). Freeze: freezeTimer counts down in update loop; enemies skip. Shovel: on activate: save ring states (grid values + masks) into array; set grid to STEEL. On expire: restore; play sound. If a grenade hits during shovel… fine. During freeze… independent. Carrier: carrierEvery=5: when spawnIndex%5===0 → carrier=true. On carrier kill → drop: {x,y (clamped 13..W-13), type, t:720}. Player pickup: AABB overlap (player rect vs 20px box centered). Apply: - star: power=min(4,power+1), sfx.power, floatText? Show briefly in HUD status "火力提升 Lv". - tank: lives++ (icon). - shovel: start 720. - grenade: kill all enemies (explode, score), big sfx. - clock: freeze 600 (10s). HUD status area shows active: "冰冻 8s", "加固 5s". Level intro and stage names: ``` const LEVELS=[ {name:"新手村", map:[...], }, {name:"小河弯弯"}, {name:"钢铁要塞"}, {name:"渡河行动"}, {name:"迷之回廊"}, {name:"丛林伏击"}, {name:"双水夹道"}, {name:"重装防线"}, {name:"九曲钢关"}, {name:"决战霸王城"} ]; ``` Enemy count: 15 + level (1..10) → 16..25. Enemy total icons 25; row of 5 per line in HUD (icon 18px). Mix function by level: ``` function pickEnemyType(lv){ const r=Math.random()*100; const fast=Math.min(42,10+lv*3), power=Math.min(32,8+lv*2.5), armor=Math.min(26,4+lv*2.4); if(r{ g.fillStyle='#3f1206'; g.fillRect(0,0,T,T); // mortar g.fillStyle='#c65a2e'; // brick for(let r=0;r<2;r++)for(let c=0;c<2;c++){ if(m & (1<<(r*2+c))) g.fillRect(c*13+ (m?1:0) , r*13+1, 11, 11); } // Highlight: top row lighter ... })); } ``` Add texture: draw bricks as 2 tones: fill #c65a2e, top-left 2px highlight #e07a45, bottom-right shadow #8a3a1c. Keep chunky. Actual classic brick: dark orange with black mortar. Let me do: - Mortar #2f0d04 - Brick fill #b8461e - Per brick: highlight line top (2px, #d4683a) and left, shadow bottom-right (#7c2a10) Good. Steel sprite: ``` fill #6d7683; inner rect 3..23: #cfd6de; notches: darker pixels at corners (#59616d); top highlight #f2f5f8; classic steel block: bright silver with dark notches at corners. ``` Water sprites (2 frames): ``` base #2b4bd8? Classic water blue #3333ff and lighter #9999ff dashes. Frame: bg #2743c9; rows of horizontal dash patterns: 13px rows: draw #7fa0ff 11x4 dashes at x offset per row and frame. Let me do: for each y in {2, 8, 14, 20}: for x in 0..13 step 13: g.fillRect(x+(frame&1?2:0), y, 9, 3) with color rgba(255,255,255,.35) + base fill. ``` Simplify: bg '#2b3fd0'; lighter stripes: 2 rows of #6f86ff and 2 rows of #16219c offset per frame. Tree sprite: ``` bg '#0c5c14'; speckles: random-ish fixed pattern of 3x3 pixels in '#0f7a1c'/'#0a4a10'/'#15992a'. Use a deterministic pattern loop (x+y*7)%5 etc. ``` Eagle sprite from array, 2px per pixel, 13x13 → 26. Mini icon for HUD: mkCanvas(16,16) draw a simple tank (gray) → dataURL. Player icon: same but yellow. Power-up legend icons: 20x20 white box + symbol; draw in function drawPU(g,type,x,y). Power-up in-game draw: white box 22x22 with 1px dark border, symbol inside, blinks (skip draw if (t/4|0)%2 && near expire). drawPU symbols (canvas 22 box): - star: gold star path r6. - tank: red mini tank top view 14x14. - shovel: gray: handle rect + blade rect (rotated? axis only): handle vertical rect (2x8) + horizontal head (10x4) on top + small hole — reads as shovel-ish/axe-ish; OK. - grenade: dark navy rounded: circle r5 + top cap rect + fuse spark pixel. - clock: circle stroke 2 #2233cc + hands. Game loop: ```js let last=0; function loop(ts){ requestAnimationFrame(loop); const dt=ts-last; last=ts; acc+=dt; let steps=0; while(acc>=16.666 && steps<3){ tick(); acc-=16.666; steps++; } render(); } ``` Simpler: near-fixed step: each rAF, tick once (assume 60Hz) — most screens 60Hz; 120Hz would run 2x speed. Let me use accumulator as above with 3 steps max, then drain remaining to avoid spiral. tick(): ``` switch(state){ case 'title': tickTitle(); break; case 'intro': introT--; if(introT<=0) state='play'; break; case 'play': updateWorld(); break; case 'dying': dieT--; if(dieT<=0){ if(lives>0) respawn(); else state='gameover'; } break; case 'clear': clearT--; if(clearT<=0) nextStage(); break; case 'over','win': animate title-ish effects (random sparks); break; } ``` updateWorld(): ``` shake decay; waterAnim toggle every 20 frames (global f counter); if(shovelT>0){shovelT--; if(0) restoreBase();} if(freezeT>0) freezeT--; player update (input → dir/speed; fire) spawn logic: if(alive<4 && spawned=total && enemies.length===0 && !dying → state='clear', clearT=110, sfx? check base destroyed → handled in bullet/enemy. ``` Player object: ``` player={x:104,y:312,dir:0,power:1,speed:1.7,inv:0,bullets:[],alive:true,phase:0} ``` respawn: reset pos/dir, inv=150, bullets=[]. Firing: ``` if((keys[' ']) && fireCd<=0 && bullets.length6 do substeps. Player max 8 → substep loop n=ceil(sp): step=sp/n. At each step: move; checkBounds; checkTiles; checkTargets; break if hit. ``` Out of bounds: if outside [0,W): small spark at edge, remove. checkTiles: AABB (b.x,b.y,6,6): tiles in range: ``` for gy in [floor(y/T)..floor((y+6)/T)]: for gx ...: t=grid[gy][gx]; if(t===BRICK){ mask bits overlapping sub-cells → clear; if mask 0 grid=0; hit=true; sfx.brick } else if(t===STEEL){ if(b.from==='p'&&player.power>=4){grid=0;boom(small)} else hit=true; sfx.steel } ``` Note: base ring steel (shovel) is also destructible by L4 player — allowed (fun) — restoration later will restore steel… acceptable; or only restore if… fine. Eagle check: if(!baseDead && aabb(b, eagleRect)) → baseDead=true; bigBoom; sfx.bigBoom; gameover sequence (state='over', set over reason 'base'). Enemies check (from p only): loop enemies; skip spawnAnim; aabb → enemy.hp--; sfx.hit? (brick-ish small) or metal; if hp<=0 killEnemy(e, byPlayer=true). Player check (from e only): skip if player.inv>0; aabb → killPlayer(). killEnemy: score += sc (byPlayer; grenade also counts — classic grenade scores count); explosions.push; if carrier → spawn drop; remove. killPlayer: player.alive=false; big explosion; sfx.bigBoom; lives--; updateHUD; state='dying', dieT=90; shake=10. If lives<0 → state='over' directly after die. respawn: lives already decremented; if(lives>=0)… wait, let me define lives as the count of remaining respawns including current? Let me do: lives = remaining spare tanks (starts 3 → shows 3 icons). On death: lives--; if lives<0 → game over; else respawn. Display shows lives+? Classic shows remaining lives. On death: lives--; display icon count = max(0,lives)? If I show spare 3, after first death shows 2. OK: display spare. Start spare=3? That means 4 total plays. Classic: 3 total. Let me show total including current: display=2+1? Let me just: lives=3 display; on death lives-- → display 2; if lives===0 after death → game over after anim. So death when lives becomes 0 → over. Display = lives (spare including current? whatever — display starts 3, after first death shows 2, and on 3rd death → 0 → over). Consistent enough: 3 deaths = 3 lives. trySpawn: ``` slot = spawned % 3 → cols [0,6,11]; for tries 0..2: if valid(col) spawn; else col=(col+4)%13? try next: use order [0,6,11], then shift by 1… Let me just: const spots=[[0,0],[6,0],[11,0]]; index=(spawned)%3; if blocked, try index+1,+2. valid: no solid in rect at (col*26, 0) (row 0-1), no player overlap, no eagle. enemy={type:pickType(level), x,y:0, dir:1(down), ...stats, spawnT:45, fireCd: random 30-90, aiT: random, carrier: (spawned+1)%5===0} spawned++; ``` Carrier flag uses spawned count before increment. Enemy update: ``` if(e.spawnT>0){e.spawnT--; return} if(freezeT>0) return; // frozen e.fireCd--; e.aiT--; if(e.aiT<=0){ choose dir: candidates with weight: if e.dir is vertical → [down .3, up .15, left .275, right .275]? Classic: enemies tend to prefer horizontal? Actually they often switch between down and horizontal. Weighted: down 2, horizontal each 1, up .4. Filter to open (look ahead 10px). Pick. aiT=50+rnd*140. } move in dir at speed; if blocked → pick immediately (force). Fire: if(fireCd<=0){ if(player.alive && aligned(dir, player) bonus) fire: bullet at muzzle, sp=bs, from:'e'; fireCd= type-based: 50+rnd*80 (power type 40+rnd*60). } Aim bonus: if e.dir points roughly at player (dot product of dir vector and (player-e) large) → fireCd=max(1,fireCd-1)? Let me add: if aligned, chance to fire every 20 frames. ``` Look ahead open: rectBlocked at (x+dx*14, y+dy*14) false, and within bounds. Base destruction by enemy: if(!baseDead && aabb(e, eagleRect)) → destroyBase(). Enemy spawn: spawnT counts down; while >0 don't move/fire/draw normally (draw star). After 0 draw normally. Bullet update: ```js function updateBullets(){ for(let i=bullets.length-1;i>=0;i--){ const b=bullets[i]; let hit=false; const n=Math.ceil(b.sp); const st=b.sp/n; for(let s=0;sW-6||b.y>W-6){ // off field: remove + spark at edge b.x=clamp(b.x,0,W-6); b.y=clamp(b.y,0,W-6); spark? just remove hit=true; break; } // tiles const gx0=Math.floor(b.x/T), gx1=Math.floor((b.x+6)/T), gy0=Math.floor(b.y/T), gy1=Math.floor((b.y+6)/T); for(let gy=gy0;gy<=gy1&&!hit;gy++)for(let gx=gx0;gx<=gx1&&!hit;gx++){ const t=grid[gy][gx]; if(t===BRICK){ let mask=brickMask[gy][gx]; for(let r=0;r<2;r++)for(let c=0;c<2;c++){ const bit=1<<(r*2+c); if(!(mask&bit)) continue; const sx=gx*13+c*13, sy=gy*13+r*13; if(overlap(b.x,b.y,6,6,sx,sy,13,13)){ mask&=~bit; sfx.brick(); } } brickMask[gy][gx]=mask; if(mask===0){grid[gy][gx]=0;} hit=true; } else if(t===STEEL){ if(b.from==='p'&&player.power>=4){ grid[gy][gx]=0; booms.push({x:gx*13+13,y:gy*13+13,t:0,dur:16,big:false}); sfx.boomS(); } else sfx.steel(); hit=true; } } if(hit) continue; // eagle if(!baseDead&&overlap(b.x,b.y,6,6,EAGLE.x,EAGLE.y,26,26)){ destroyBase(); hit=true; continue; } // targets if(b.from==='p'){ for(const e of enemies){ if(e.spawnT>0) continue; if(overlap(b.x,b.y,6,6,e.x,e.y,26,26)){ e.hp--; sfx.hitE? small; if(e.hp<=0) killEnemy(e); hit=true; break; } } } else { if(player.alive&&player.inv<=0&&overlap(b.x,b.y,6,6,player.x,player.y,26,26)){ killPlayer(); hit=true; } } } if(hit) bullets.splice(i,1); } } ``` overlap helper: (x1,y1,w1,h1,x2,y2,w2,h2). Note: bullet at field edge: classic bullets die on edges. b.x<0 etc. — but I clamp: just remove. killEnemy(e): ``` const i=enemies.indexOf(e); enemies.splice(i,1); score+=ETYPES[e.type].sc; bumpScore(); booms.push({x:e.x+13,y:e.y+13,t:0,dur:20,big:e.type==='armor'}); sfx.boomS(); updateHUD(); if(e.carrier){ spawnDrop(e.x+13,e.y+13); } ``` Grenade kills also call killEnemy (fine). killPlayer(): ``` if(player.inv>0||!player.alive) return; player.alive=false; booms.push big at player; sfx.bigBoom(); shake=12; lives--; updateHUD(); state='dying'; dieT=100; ``` dying tick: dieT--; also update booms. If 0: if(lives>0) respawn(); else gameOver(). respawn(): player.x=104,y=312,dir=0,alive=true,inv=150,bullets cleared (global bullets from player removed: bullets=bullets.filter(b=>b.from!=='p')); state='play'; sfx? life. destroyBase(): ``` baseDead=true; booms.push({x:156+13,y:312+13,t:0,dur:40,big:true}); sfx.bigBoom(); shake=14; state='over'; overBy='base'; overT=0; ``` gameOver(): state='over'; overBy='tank'; (update hi). Wait, dying with lives 0 → gameOver; over overlay drawn. clearStage: when spawned>=total && enemies.length===0 && state==='play' → state='clear'; clearT=110; sfx.stage? small. Add score bonus? Add 500*? Classic none. Let me add "完成奖励 +1000"? Fun: score+=500; show in clear text. nextStage: level++; if level>10 → state='win'; winT=0; save hi; else loadLevel(level). loadLevel: parse map, build ring, reset player (keep power/lives), spawn counters, freezeT=0, shovelT=0 (restore if active), bullets=[], booms=[], drops=[], updateHUD, build enemy icons (total), state='intro', introT=100; sfx.stage(). startGame: level=1; score=0; lives=3; player.power=1; loadLevel; also update HUD. Title: state='title'; show demo in canvas. Restart (R): if state not title → startGame (reset all). From title, Enter also starts. Pause: only in 'play': toggle pauseT? Use state 'pause', save prevState. Simpler: flag paused; skip tick when paused; draw overlay. P toggle. M mute. Enter: state title→start; over→start; win→title? Enter → title (then Enter again to start)? Or Enter → startGame direct. Let me do: over/win Enter → startGame. Now HUD update functions: ``` function updateHUD(){ scoreEl.textContent=String(score).padStart(6,'0'); pop hi same (live max) level pips: for i 1..10: class i=enemiesLeft)? Order: mark from right (later spawns)? Classic: icons disappear left-to-right as killed? Either: mark left→right: dead if i < (total-enemiesLeft). Fine. Status chips: power always shown ("火力 Lv{power}"); freeze chip with seconds = ceil(freezeT/60); shovel chip; inv chip ("护盾") when inv>0. Also show "敌人 X" count number. Score pop: on addScore(n){score+=n; scoreEl.classList.remove('pop'); void offsetWidth; add 'pop';}. Audio: ```js let AC=null; function ensureAC(){ if(!AC){ try{AC=new (window.AudioContext||window.webkitAudioContext)();}catch(e){} } if(AC&&AC.state==='suspended') AC.resume(); } function tone(f,d,type='square',v=.15,slide=0,delay=0){ if(!AC||muted) return; const t0=AC.currentTime+delay; const o=AC.createOscillator(), g=AC.createGain(); o.type=type; o.frequency.setValueAtTime(f,t0); if(slide) o.frequency.exponentialRampToValueAtTime(Math.max(30,f+slide), t0+d); g.gain.setValueAtTime(v,t0); g.gain.exponentialRampToValueAtTime(.001,t0+d); o.connect(g).connect(AC.destination); o.start(t0); o.stop(t0+d+.02); } function noise(d,v=.2,fc=800,delay=0){ if(!AC||muted) return; const t0=AC.currentTime+delay; const len=AC.sampleRate*d, buf=AC.createBuffer(1,len,AC.sampleRate); const data=buf.getChannelData(0); for(let i=0;itone(f,.09,'square',.12,0,i*.07))}, life(){[392,523,659].forEach((f,i)=>tone(f,.1,'triangle',.15,0,i*.08))}, freeze(){tone(1200,.3,'sine',.1,-800)}, shovel(){noise(.15,.2,300); noise(.15,.2,300,.18)}, stage(){[660,880,990,1320,1100,1480].forEach((f,i)=>tone(f,.08,'square',.1,0,i*.09))}, win(){[523,523,659,784,880,1046,1318,1568].forEach((f,i)=>tone(f,.12,'square',.12,0,i*.11))}, over(){[440,349,293,220,146].forEach((f,i)=>tone(f,.18,'sawtooth',.12,0,i*.16))} }; ``` muted persisted. Now render(): ```js function render(){ ctx.setTransform(1,0,0,1,0,0); ctx.fillStyle='#000'; ctx.fillRect(0,0,W,W); // shake if(shake>0){ ctx.translate(((Math.random()*2-1)*shake*.4)|0, ((Math.random()*2-1)*shake*.4)|0); shake*=.86; if(shake<.5)shake=0; } // grid + entities by state if(state==='title') drawTitle(); else { drawWorld(); drawOverlays(); } } ``` drawWorld: tiles (skip tree), eagle, drops, player (if alive and (inv<=0 or blink)), enemies (spawn star or tank), bullets, booms, tree overlay, freeze tint? Skip. drawOverlays by state: intro banner; pause; clear banner; over; win; also in play small: nothing (HUD is DOM). Intro banner: ``` brick band: for x in 0..12: drawImage(brickSpr[15], x*26? 1 row at y=6*26=156? 2 rows: y=143, 169 (13px each)? Draw a 26px tall band: 1 row of brick sprites at y=156, x 0..12 → 26px band in the middle (y=156..182). Then overlay text above band: "STAGE 03" Press Start 2P 10px cream, shadow at (169-?, 150)? Let me do: text 'STAGE ' + String(level).padStart(2,'0') centered y=150; Chinese name 14px ZCOOL? Canvas font: '13px "ZCOOL KuaiLe"' might be loaded; fallback sans. Draw name at y=196 below band. Add blinking "READY". ``` Wait, band at y=156 covers center; text above at 148 (above), name at 200. Actually, classic: brick line in the middle, and "STAGE 1" text above the line. Let me do: text y=150 (above the band 156), name at 200 below. Clear overlay: dark rgba(0,0,0,.55) full; "本关完成!" 20px ZCOOL gold; "+500 奖励" 9px press; blinking "下一关…" Over: dark; "GAME OVER" 16px press red; reason small Chinese; score; blink "按 ENTER 重新开始" Win: dark + fireworks booms (spawn random booms during tick in win state); "通关啦!" 22px gold; "霸王卡 · 全 10 关制霸" ; final score; "最高分 X"; blink "按 ENTER 再来一次" Title: ``` bg: black; draw a decorative field: mini static map? Draw scattered bricks in a ring pattern? Let me do: - Big title: "坦克大战" 34px ZCOOL KuaiLe, color cream with red shadow offset 3px. - Under: "TANK BATTLE" 8px press, cyan, letter-spacing. - Chip: "霸王卡 · 童年典藏 10 关" small. - Middle: 2 tanks facing (draw player at (60, 190) dir right? dir 3 (right) and enemy at (250, 190) dir 2 (left)) with animated treads + occasional bullet + boom? Title demo: keep it simple: tanks bob up and down (sin offset) — cute. - Blinking "PRESS ENTER / 点击开始" 9px press. - "HI-SCORE 004500" 8px. - Small footer: "方向键移动 · J/空格开火". ``` Demo animation: use frame counter. Also add floating stars? Skip. Enemy icons for HUD: ```js function tankIcon(color){ return mkCanvas(16,16,g=>{ g.fillStyle=color; ... body/treads }).toDataURL(); } ``` Draw: treads left/right 3px columns, body 10x12, barrel 3x4 on top, turret. Legend icons: 22px white box: ```js const legendTypes=['star','tank','shovel','grenade','clock']; drawPUIcon(g,type,cx,cy) shared with in-game. ``` In-game drops: pre-render 5 22x22 canvases puSpr[type]. drawPUIcon implementations: - star: path 5-point star r 7 fill #ffd24a stroke #a37d1c 1. - tank: mini top view tank red: treads, body, barrel (#e33). - shovel: handle: rect (cx-1, cy-7, 3, 10) fill #8b93a3; head: rect (cx-6, cy-8, 12, 4) fill #c9ced6; dark outline. - grenade: circle r 5 fill #334; cap rect (cx-2, cy-9, 4, 4) #8b93a3; fuse spark: pixel #ffd24a top. - clock: circle r 6 stroke 2 #4a66ff, fill white; hands: 2 lines; center dot. Also a carrier star marker: small 6px star white above enemy. Freeze visual: if freezeT>0, draw a small cyan overlay diamond on enemies? Tint: after drawTank, g.globalAlpha=.4 fillRect cyan over enemy? Let me do: draw a translucent #6fd3ff rect over enemy + a tiny snowflake. Simple tint fine. Invulnerable shield: draw a blinking square border around player: if (player.inv>0 && ((frame>>2)&1)) stroke rect 4-corner? Classic: circular ripple. Let me draw: strokeStyle #fff, lineWidth 2, strokeRect(player.x-2, player.y-2, 30, 30) blinking + cyan second. ok. Now the "status" DOM: build chips: ``` function refreshStatus(){ let h=`火力 Lv${player.power}`; if(freezeT>0) h+=`冰冻 ${Math.ceil(freezeT/60)}s`; if(shovelT>0) h+=`加固 ${Math.ceil(shovelT/60)}s`; if(player.inv>0) h+=`护盾`; statusEl.innerHTML=h; } ``` Call every 30 frames (throttled), or on change — call in tick each 15 frames is fine. Buttons: sound toggle (M), restart (R). Buttons: onClick with ensureAC + action; sync label. Keyboard handler: ``` window.addEventListener('keydown', e=>{ const k=e.key; ensureAC(); if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(k)) e.preventDefault(); keys[normalize(k)]=1; if(k==='Enter'){ ... by state ... } if(k==='p'||k==='P'){ if(state==='play'||state==='pause') togglePause(); } if(k==='m'||k==='M'){ toggleMute(); } if(k==='r'||k==='R'){ if(state!=='title') startGame(); } }); keyup → 0. normalize: map WASD to arrows? Keep both: store arrows and wasd separately; input check: up = keys.ArrowUp||keys.w... ``` Touch/click: canvas click → if title/over/win → start; else → fire toggle? For mobile, add simple on-screen dpad? Nice touch for completeness but adds size. Add compact touch controls: a left dpad (4 buttons) + a fire button, shown via media query (pointer:coarse), or always at the bottom on small screens. Let me include: .touchpad with buttons that set keys on pointerdown/up. Show when (hover:none) via CSS, or always on small screens. Let me add `@media (hover:none)` display. Also on canvas click in title, "click to start". Pause: state 'pause'; render keeps last world + overlay. tick: if paused, skip update (except nothing). Edge: state 'dying' — update booms/shake only (world frozen except explosions). In 'dying' tick: updateBooms. 'clear': updateBooms, clearT. 'over': overT++; spawn winT? over no fireworks; 'win': overT++; random booms every ~30 frames (winFx). Also 'title' tick: titleT++. render(): ``` ctx.setTransform(1,0,0,1,0,0); ctx.fillStyle='#000';ctx.fillRect(0,0,W,W); if(shake>0){const s=shake; ctx.translate(((Math.random()*2-1)*s*.5)|0,((Math.random()*2-1)*s*.5)|0); shake=Math.max(0,shake-0.6);} if(state==='title'){drawTitle();return;} drawWorld(); if(state==='intro') drawIntro(); if(state==='clear') drawClear(); if(state==='over') drawOver(); if(state==='win') drawWin(); if(pause) drawPause(); ``` drawWorld(): ``` for y 0..12 for x 0..12: t=grid[y][x]; if(t===0)continue; if(t===TREE)continue; if(t===BRICK){ctx.drawImage(brickSpr[brickMask[y][x]||1], x*26, y*26);} else if(t===STEEL) drawImage(steelSpr...); else drawImage(waterSpr[(frame>>4)&1]...); // eagle ctx.drawImage(baseDead?eagleDeadSpr:eagleSpr, 156, 312); // drops for d: if blinkVisible: drawImage(puSpr[d.type], d.x-11, d.y-11); // enemies for e: if(e.spawnT>0) drawSpawn(e); else { const pal=...; drawTank(e.x,e.y,e.dir,pal, e.phase+frame); if(freezeT>0){ctx.fillStyle='rgba(90,190,255,.35)';ctx.fillRect(e.x,e.y,26,26);} if(e.carrier){drawStar(cx, e.y-4?)}} Carrier marker: small white star at (e.x+13, e.y+2)? draw a star of r3. // player if(player.alive){ if(player.inv>0 && ((frame>>2)&1)) draw shield ring; else normal; drawTank(player.x,player.y,player.dir,PPAL, player.phase+frame) } Wait, blink: inv → alternate draw tank or shield? Classic shield hides tank? Shield shows and tank moves. Draw tank always, plus blink shield: if(inv>0&&(frame>>2&1)) strokeRect border white/cyan. // bullets for b: ctx.fillStyle='#fff'; fillRect(b.x+1,b.y+1,4,4); plus small direction tick. // booms for bm: drawBoom(bm). // tree overlay for tiles TREE: drawImage(treeSpr). ``` drawBoom: ``` function drawBoom(bm){ const p=bm.t/bm.dur; const max=bm.big?34:16; const r=max*(.35+.65*Math.sin(Math.min(1,p)*Math.PI/1)); // grow Actual shape: radius grows then fades alpha. const r1=max*p, r2=max*.66*p, r3=max*.34*p; ctx.globalAlpha=1-p*.4; ctx.fillStyle='#ff7b1c'; ctx.beginPath(); ctx.arc(bm.x,bm.y,r1,0,7); ctx.fill(); ctx.fillStyle='#ffd24a'; arc r2; ctx.fillStyle='#fff'; arc r3; ctx.globalAlpha=1; } ``` Arc is smooth circle — retro enough with the chunky color. drawSpawn(e): ``` const p=1-e.spawnT/50; blink if (e.spawnT>>2)&1 → draw plus-shape star that scales: const s=10*(1-p)+? Draw a diamond: ctx.fillStyle='#fff'; draw 4 triangles? Use a path: diamond of radius r=14*(1-p*0.6) with a white cross of squares: Simple: 2 rects (h/v) of width 4, length L: L=24*(1-p*0.5); alpha blink. ``` Good. drawIntro: ``` // brick band for(x=0;x<13;x++) ctx.drawImage(brickSpr[15], x*26, 156); // text ctx.textAlign='center'; ctx.font='10px "Press Start 2P"'; ctx.fillStyle='#000'; shadow at (172, 148+2)? draw offset: fillText at (170+2, 148+2) black then (170,148) '#f2ead6': "STAGE 0X" ctx.font='14px "ZCOOL KuaiLe"'; fillStyle '#ffd24a'; name at (170, 200) with black offset. if((frame>>4)&1): font 7px press, '#8fd' "READY"? blink "准备…" at (170, 216). ``` Band at y=156 (rows 156-182). Text above at 148 (above), name at 200 below. drawClear: ``` Dark overlay: fillStyle 'rgba(0,0,0,.6)' full. '本关完成!' 18px ZCOOL gold, at 170, 150. '+500 通关奖励' 8px press cream 178. blink '按回车继续 · 下一关' 8px press at 210? Auto-advances anyway; show "第 X 关来袭…". ``` drawOver: ``` Dark; 'GAME OVER' 14px press '#ff5346' at 170, 140 (with shadow); reason: baseDead ? '指挥部被摧毁' : '坦克全部阵亡' 12px ZCOOL cream 172; '本局得分 '+score 8px press gold 192; blink '按 ENTER 重新开始' 8px press 220. ``` drawWin: ``` Dark rgba(0,0,20,.75); '全关通过 !' hmm: '霸王加冕' or '通关啦!' 20px ZCOOL gold 140; 'TANK BATTLE CLEAR' 8px press cyan 165; '最终得分 '+score 10px press cream 190; '最高分 '+hi 8px press 208; blink '按 ENTER 再来一次' 8px 235. ``` drawPause: dark + 'PAUSE' 12px press + '按 P 继续'. drawTitle: ``` // decorative frame: corner brackets gold: 4 corner strokes. // scattered bricks: draw some brick sprites in a symmetric pattern: positions [[1,2],[11,2],[3,4],[9,4],[6,7]...]? Plus 2 steel. Fixed array. // big title ctx.textAlign='center'; ctx.font='34px "ZCOOL KuaiLe"'; ctx.fillStyle='#7a1f1f'; fillText('坦克大战', 172, 78); ctx.fillStyle='#f2ead6'; fillText('坦克大战', 169, 75); // red stamp chip: fillRect (129, 92, 82, 18) '#c8281e'; text '霸王卡 · 10关典藏' 10px ZCOOL cream at 170, 105. // TANK BATTLE 8px press cyan 128? spacing: use manual letter-spacing: ctx letterSpacing? Not widely supported in canvas (newer browsers have ctx.letterSpacing). Just draw the string. // tanks: const bob=Math.sin(frame/20)*3; drawTank(70, 165+bob, 3, PPAL, frame); // right-facing drawTank(242, 165-bob, 2, EPAL, frame); // left-facing // bullet exchange: bullet x = 120 + (frame%60)*0.8? draw a small white square moving right, and enemy bullet moving left offset. const bx=110+((frame*2)%70); fillRect(bx,175,5,5); const ex=250-((frame*2+35)%70); fillRect(ex,175,5,5)? Both at y=174. // prompt if((frame>>4)&1){ font 9px press '#ffd24a' 'PRESS ENTER' 170, 250; } '点击屏幕或按回车键开始' 11px ZCOOL cream 270; 'HI-SCORE ' + pad(hi) 8px press cream 296; '方向键 / WASD 移动 · J / 空格开火 · P 暂停' 9px ZCOOL #8b93a3 316; ``` Frame border: strokeStyle '#2a3348' strokeRect(6.5,6.5,325,325)? Plus gold corner accents. OK. Also note: in render for world states, if state==='intro' we draw the world (already loaded) + banner. Good. HUD refresh throttling: each tick if(frame%20===0) refreshStatus(); on change updateHUD. markEnemies uses enemiesLeft. Let me write buildEnemyIcons: ```js function buildEnemyIcons(){ egrid.innerHTML=''; for(let i=0;iel.classList.toggle('dead', ihi){hi=score;hiEl.textContent=pad(hi);}} function pop(el){el.classList.remove('pop');void el.offsetWidth;el.classList.add('pop');} ``` Pips: ```js function refreshPips(){[...pipsEl.children].forEach((el,i)=>{const n=i+1;el.className='pip'+(n{ensureAC();toggleMute();} rstBtn.onclick=()=>{ensureAC();if(state!=='title')startGame();} function toggleMute(){muted=!muted;localStorage.setItem('bt10mute',muted?'1':'0');sndBtn.textContent=muted?'音效:关':'音效:开';} ``` Keys: ```js const KEYMAP={arrowup:'up',w:'up',arrowdown:'dn',s:'dn',arrowleft:'lt',a:'lt',arrowright:'rt',d:'rt',' ':'fire',j:'fire'}; window.addEventListener('keydown',e=>{ const k=e.key.toLowerCase(); if(k===' '||k.startsWith('arrow'))e.preventDefault(); ensureAC(); const m=KEYMAP[k]; if(m) keys[m]=1; if(k==='enter'){ensureAC(); if(state==='title'||state==='over'||state==='win') startGame();} if(k==='p'&&state!=='title'&&state!=='intro') paused=!paused; if(k==='m') toggleMute(); if(k==='r'&&state!=='title') startGame(); }); window.addEventListener('keyup',e=>{const m=KEYMAP[e.key.toLowerCase()];if(m)keys[m]=0;}); ``` Pause only when play/dying? 'play' and 'dying' OK; guard: if(state==='play'||state==='dying'||state==='clear'). Canvas click: ``` cv.addEventListener('pointerdown',()=>{ensureAC(); if(state==='title'||state==='over'||state==='win') startGame();}); ``` Touchpad: ```js document.querySelectorAll('.tbtn').forEach(b=>{ const m=b.dataset.m; const on=e=>{e.preventDefault();ensureAC();keys[m]=1;if(state==='title')startGame();}; const off=e=>{e.preventDefault();keys[m]=0;}; b.addEventListener('pointerdown',on);b.addEventListener('pointerup',off);b.addEventListener('pointerleave',off);b.addEventListener('pointercancel',off); }); ``` Fire button data-m="fire", dpad buttons up/dn/lt/rt. Loop: ```js let acc=0,lastT=performance.now(); function loop(now){requestAnimationFrame(loop);let dt=now-lastT;lastT=now;if(dt>250)dt=250;acc+=dt;let n=0;while(acc>=16.6667&&n<3){tick();acc-=16.6667;n++;}if(acc>100)acc=0;render();} requestAnimationFrame(loop); ``` Init: ``` hi=+localStorage.getItem('bt10hi')||0; hiEl.textContent=pad(hi); muted=localStorage.getItem('bt10mute')==='1'; sndBtn.textContent=... buildLegend(); refreshLives(); refreshPips(); updateScoreDisplay init; state='title'; document.fonts.load('12px "ZCOOL KuaiLe"'); document.fonts.load('10px "Press Start 2P"'); (for canvas) ``` Also 'over' state: set overT=0; sfx.over(); save hi. destroyBase → state='over' direct (skip dying). Set baseDead, booms, sfx.bigBoom, then endGame('base'). function endGame(reason){state='over';overReason=reason;overT=0;sfx.over();saveHi();} killPlayer: if lives-1<=0? Let me define: lives=3. On death: lives--; if(lives>0){dying→respawn} else endGame('tank'). ``` killPlayer(){...lives--;refreshLives(); if(lives>0){state='dying';dieT=90;} else {state='over';overReason='tank';overT=0;sfx.over();} } ``` And 'dying' tick → respawn. Respawn: state='play'. Note: base destruction could happen during 'dying' too? Enemy bullets are frozen in 'dying' (we don't update world) so it's fine. Win check in updatePlay: ``` if(!baseDead&&spawned>=levelTotal&&enemies.length===0){state='clear';clearT=120;addScore(500);sfx.power();} ``` Hmm, sfx.power is good as a jingle; or stage sound. Let me make sfx.clear = ascending 4 notes. OK. Also player bullet cap: `bullets.filter(b=>b.from==='p').length < player.power`. Fire cooldown fireCd frames. Let me also double-check moveTank snap when tank is exactly at boundary: dx>0 and blocked: x=Math.floor(x/T)*T → if x is k*T aligned and blocked by next tile, x unchanged. Good. Water blocks tanks: solid includes WATER. Trees don't. Enemy dir look ahead function: ``` function dirOpen(e,dx,dy){const nx=e.x+dx*16, ny=e.y+dy*16; if(nx<0||ny<0||nx>W-26||ny>W-26)return false; return !rectBlocked(nx,ny);} ``` Wait, enemy at top row y=0; down is dy=1 fine. chooseDir: ``` const opts=[]; const dirs=[[0,1,2],[1,0,3],[-1,0,2],[0,-1,1]]? Define DXD per index: 0:(0,-1) up, 1:(1,0) right, 2:(-1,0) left, 3:(0,1) down. Weights: down 3, up 1, left 1.3, right 1.3; if current dir is vertical, bump horizontal (to avoid straight forever) x1.6; Filter to open; weighted random; if none → reverse. ``` Enemy fire aligned check: ``` function aligned(e){const dx=DXD[e.dir][0],dy=DXD[e.dir][1];const px=player.x-e.x,py=player.y-e.y;const dot=dx*px+dy*py;return dot>20 && Math.abs(dx? py:px)<30;} ``` Alright, drop clamp: x=clamp(x,13,W-13), y=clamp(y,13,W-13); snap to tile center: x=((x/T|0)+0.5)*T? To avoid half-tile weirdness; fine: x=Math.round(x/13)*13. Drop update: t--; if t<=0 remove; player overlap (player.x-? use 22 box): overlap(player.x, player.y, 26, 26, d.x-11, d.y-11, 22, 22) → apply. applyDrop(d): ``` switch(d.type){ case 'star': player.power=Math.min(4,player.power+1); sfx.power(); break; case 'tank': lives=Math.min(9,lives+1); refreshLives(); sfx.life(); break; case 'shovel': if(!shovelT) saveBase(); grid[5][11]=grid[6][11]=grid[7][11]=grid[5][12]=grid[7][12]=STEEL; shovelT=720; sfx.shovel(); break; case 'grenade': const list=enemies.filter(e=>e.spawnT<=0); enemies=enemies.filter(e=>e.spawnT>0); list.forEach(e=>{booms.push(...);addScore(sc);}); enemiesLeft-=list.length; markEnemies(); sfx.bigBoom(); shake=8; if(!list.length) sfx.power(); break; case 'clock': freezeT=Math.max(freezeT,600); sfx.freeze(); break; } drops.splice(idx,1); ``` Note: grenade reduces enemiesLeft correctly (they'd be "killed"). But win check: spawned>=total && enemies.length===0 → grenade may clear all remaining, but spawn may continue. Consistent with enemiesLeft calc: total-killed. Grenade kills count. OK. Wait: enemiesLeft is initialized to total; killEnemy decrements; grenade decrements by list.length. Consistent. saveBase saves ring masks too (brickMask). restoreBase sets grid + mask. Shovel during freeze — independent. Another subtlety: base ring steel restored even if destroyed by enemy bullet? Steel not destroyed by enemy bullets (only player L4). Enemy bullets bounce. So restore is safe. Player L4 might destroy — restore returns steel: acceptable. Also player L4 destroying normal steel: nice reward. Eagle destroyed by own bullet? Classic: no, but let's allow? In classic, bullets don't hit eagle… actually they do! In original NES game, bullets can destroy the eagle (both player and enemy). Yes, bullets destroy eagle in original. Keep both. Now sizes: canvas 338; scale via CSS width min(560px, 88vw)? Panel 300. Total ~900. OK. Let me also add a subtle CRT "power on" animation on load: .screen::after? Skip, flicker is enough. Background fx particles: 10 spans, colors: #ffd24a, #ff5346, #45d8e6, #8b93a3, size 4-9px, random left 5-95%, top, animation drift Xs linear infinite alternate? "float": translateY(-30px) slight rotate. Low opacity .18. Also add decorative "tread stripe" to bottom of header? Add a repeating-linear-gradient stripe 6px tall (dark) below header for an arcade cabinet feel. Marquee bulb strip: put under main? Put in header top: .bulbs{display:flex;justify-content:space-between;padding:8px 4px} .bulb{width:8px;height:8px;border-radius:50%;background:#5a4a1f;box-shadow:inset 0 0 2px #000;animation:blink 1s steps(2) infinite} odd delay .5s. 24 bulbs. Colors are warm dark blue + gold/red/cyan — a multi-accent arcade look. Typography: ZCOOL KuaiLe for display, Press Start 2P for pixel, Noto Sans SC for body. I think I'm ready to write. Let me be disciplined about code correctness. Let me mentally write the final code end-to-end once more with particular attention to tricky parts: 1) rectBlocked: ```js function rectBlocked(x,y){ const pts=[[x+2,y+2],[x+13,y+2],[x+24,y+2],[x+2,y+13],[x+24,y+13],[x+2,y+24],[x+13,y+24],[x+24,y+24]]; for(const [px,py] of pts){ const gx=Math.floor(px/T), gy=Math.floor(py/T); if(gx<0||gy<0||gx>=GW||gy>=GH) return true; const t=grid[gy][gx]; if(t===BRICK&&brickMask[gy][gx]!==0) return true; if(t===STEEL||t===WATER) return true; } return false; } ``` Tank always clamped to [0, W-26], so out-of-bounds check only for safety. 2) Move: ```js function moveTank(tk,dx,dy){ tk.moved=false; if(dx){ let nx=tk.x+dx; nx=Math.max(0,Math.min(W-T,nx)); if(rectBlocked(nx,tk.y)){ nx = dx>0 ? Math.floor(tk.x/T)*T : Math.ceil(tk.x/T)*T; nx=Math.max(0,Math.min(W-T,nx)); } if(nx!==tk.x){tk.x=nx;tk.moved=true;} } if(dy){ ... same for y ... } } ``` Note: when blocked and snapping back to same tile position, if the tank was at x=13, floor(13/26)*26=0; fine. If tank at x=26 aligned and blocked by col 2, floor(26/26)*26=26 → no movement. 3) Bullet-tile check function: ```js function bulletHitTiles(b){ // b has x,y (6x6) const x0=Math.floor(b.x/T), x1=Math.floor((b.x+5.99)/T); const y0=Math.floor(b.y/T), y1=Math.floor((b.y+5.99)/T); for(let gy=y0;gy<=y1;gy++) for(let gx=x0;gx<=x1;gx++){ if(gx<0||gy<0||gx>=GW||gy>=GH) continue; const t=grid[gy][gx]; if(t===BRICK){ let mask=brickMask[gy][gx]; for(let r=0;r<2;r++) for(let c=0;c<2;c++){ const bit=1<<(r*2+c); if(!(mask&bit)) continue; const sx=gx*T+c*13, sy=gy*T+r*13; if(aabb(b.x,b.y,6,6,sx,sy,13,13)){ mask&=~bit; sfx.brick(); } } brickMask[gy][gx]=mask; if(mask===0) grid[gy][gx]=0; return 'wall'; } else if(t===STEEL){ return 'steel'; } } return 0; } ``` Bullet movement: ```js function updateBullets(){ for(let i=bullets.length-1;i>=0;i--){ const b=bullets[i]; const steps=Math.max(1,Math.ceil(b.sp)); let dead=false; for(let s=0;sW||b.y>W){ dead=true; break; } const hit=bulletHitTiles(b); if(hit){ if(hit==='steel'){ if(b.from==='p'&&player.power>=4){ destroySteelAt(b); } sfx.steel(); dead=true; break; } dead=true; break; } if(aabb(b.x,b.y,6,6,EAGLE.x,EAGLE.y,26,26)&&!baseDead){ destroyBase(); dead=true; break; } if(b.from==='p'){ for(const e of enemies){ if(e.spawnT>0) continue; if(aabb(b.x,b.y,6,6,e.x,e.y,26,26)){ e.hp--; if(e.hp<=0) killEnemy(e); sfx.hit? small; dead=true; break; } } if(dead) break; } else { if(player.alive && player.inv<=0 && aabb(b.x,b.y,6,6,player.x,player.y,26,26)){ killPlayer(); dead=true; break; } } } if(dead) bullets.splice(i,1); } } ``` destroySteelAt: find tile under bullet center and set to 0 + small boom. 4) killEnemy also handle grenade (fromPlayer true is fine). 5) Player update: ```js function updatePlayer(){ if(!player.alive) return; if(player.inv>0) player.inv--; if(fireCd>0) fireCd--; const dx=(keys.rt?1:0)-(keys.lt?1:0), dy=(keys.dn?1:0)-(keys.up?1:0); if(dx||dy){ player.dir = dx!==0 ? (dx>0?1:2) : (dy>0?3:0); moveTank(player,dx*player.speed,dy*player.speed); if(player.moved) player.phase+=0.35; } if(keys.fire && fireCd<=0){ const pb=bullets.filter(b=>b.from==='p').length; if(pb=0;i--){ const e=enemies[i]; if(e.spawnT>0){ e.spawnT--; continue; } // base check if(aabb(e.x,e.y,26,26,EAGLE.x,EAGLE.y,26,26)&&!baseDead){ destroyBase(); return; } if(freezeT>0) { e.fireCd=Math.min(e.fireCd, 30); continue; } e.aiT--; if(e.aiT<=0){ e.dir=chooseDir(e); e.aiT=50+Math.random()*140|0; } const d=DXD[e.dir]; const before=e.x+','+e.y; moveTank(e, d[0]*e.sp, d[1]*e.sp); if(e.x+','+e.y===before){ e.aiT=0; } if(e.moved) e.phase+=0.3; e.fireCd--; if(e.fireCd<=0){ const aim = aligned(e); if(aim || Math.random()< (aim?1:0.25)){ // fire 1 const bx = e.dir===1?e.x+24 : e.dir===2?e.x+2 : e.x+10; const by = e.dir===3?e.y+24 : e.dir===0?e.y+2 : e.y+10; bullets.push({x:bx,y:by,dx:d[0],dy:d[1],sp:e.bs,from:'e'}); e.fireCd = (aim? 25:55) + (Math.random()*70|0); } else e.fireCd=10; } } } ``` Note: freezeT: enemies frozen — also stop fire (done above). chooseDir: ```js function chooseDir(e){ const opts=[]; const cands=[[3,3],[0,1],[1,1.4],[2,1.4]]; // dir, weight; prefer down if(e.dir===0||e.dir===3){cands[1][1]*=1.7;cands[2][1]*=1.7;} for(const [dir,w] of cands){ const d=DXD[dir]; if(dirOpen(e,d[0],d[1])) opts.push([dir,w]); } if(!opts.length) return (e.dir+2)%4; let sum=0; for(const o of opts) sum+=o[1]; let r=Math.random()*sum; for(const o of opts){ r-=o[1]; if(r<=0) return o[0]; } return opts[0][0]; } ``` 7) Spawn: ```js function trySpawn(){ const spots=[0,6,11]; const order=[spawned%3,(spawned+1)%3,(spawned+2)%3]; for(const oi of order){ const col=spots[oi]; const x=col*T, y=0; if(rectBlocked(x,y)) continue; if(player.alive && aabb(x,y,26,26,player.x,player.y,26,26)) continue; const type=pickType(level); const st=ETYPES[type]; enemies.push({type,x,y,dir:3,sp:st.sp,bs:st.bs,hp:st.hp,spawnT:50,fireCd:40+Math.random()*80|0,aiT:30+Math.random()*60|0,carrier:(spawned+1)%5===0,phase:0}); spawned++; return; } } ``` 8) Drops: ```js function spawnDrop(x,y){ const r=Math.random()*100; let type = r<30?'star': r<44?'tank': r<62?'shovel': r<79?'grenade':'clock'; drops.push({x:clamp(x,13,W-13), y:clamp(y,13,W-13), type, t:720}); } ``` Hmm, weight tank 14, shovel 18, grenade 17, clock 21. ok. Update drops: t--; if t<=0 remove; player overlap → apply. 9) Booms: t++; if t>=dur splice. 10) Win check in updatePlay: ``` if(!baseDead&&spawned>=levelTotal&&enemies.length===0){state='clear';clearT=120;addScore(500);sfx.power();} ``` 11) drawTank: ```js function drawTank(x,y,dir,pal,ph){ ctx.save(); ctx.translate(x+13,y+13); ctx.rotate(dir*Math.PI/2); // treads ctx.fillStyle=pal.tread; ctx.fillRect(-12,-12,5,24); ctx.fillRect(7,-12,5,24); ctx.fillStyle=pal.treadHi?pal.treadHi:pal.dark; const off=((ph|0)%4); for(let i=0;i<6;i++){ const yy=-12+((i*4+off)%24); ctx.fillRect(-12,yy,5,2); ctx.fillRect(7,yy,5,2); } // body ctx.fillStyle=pal.body; ctx.fillRect(-8,-10,16,20); ctx.fillStyle=pal.dark; ctx.fillRect(-8,-10,16,3); ctx.fillRect(-8,7,16,3); // top shade? // Actually: highlight in center ctx.fillStyle=pal.hi; ctx.fillRect(-5,-6,10,12); // barrel (points up) ctx.fillStyle=pal.barrel; ctx.fillRect(-2,-13,4,9); // turret ctx.fillStyle=pal.turret||pal.dark; ctx.beginPath(); ctx.arc(0,1,5,0,7); ctx.fill(); ctx.fillStyle=pal.hi; ctx.fillRect(-2,-2,4,3); ctx.restore(); } ``` Rotation: dir 0 up (no rotation), 1 right = rotate 90°, 2 left = 180°, 3 down = 270°. Barrel is up (negative y) → right rotates to +x. Correct. Palette: ```js const PPAL={body:'#f4d44a'?...} ``` Player: body '#ffd84d', hi '#fff3b8', dark '#b98a1e', tread '#6e4f10', treadHi '#8a6a20', barrel '#ffe9a0', turret '#e0b23a'? Enemies: basic body '#a9b0ba', hi '#d9dee5', dark '#6a727c', tread '#3f454e', treadHi '#545b66', barrel '#cdd3da', turret '#8a929c'. Fast: body '#e8ecf2' (whitish), darker accents. Power: body '#ff9a3d'… Armor by hp: 4:'#8f959e', 3:'#c9a227', 2:'#d06818', 1:'#e8e8e8' with dark derived? Just define armorPal(hp). 12) Title demo: use drawTank. 13) Star marker draw: ```js function star(cx,cy,r,color){ path 5-point star: for i in 0..9: ang=-PI/2+i*PI/5; rr= i%2? r*.45 : r; ...} ``` 14) PU sprite pre-render: ```js function makePU(type){ return mkCanvas(22,22,g=>{ g.fillStyle='#f4f6f8'; g.fillRect(1,1,20,20); g.strokeStyle='#2a3340'; g.lineWidth=2; g.strokeRect(1,1,20,20); g.fillStyle='#2a3340'; g.fillRect(0,0,22,22)? no, keep border: use strokeRect(0.5,...)? Let me do: fill white 0..22, then a 1px dark inset line at 1,1,20,20: g.fillStyle='#e8ecef' rect(0,0,22,22); g.fillStyle='#fff' rect(1,1,20,20); drawPUIcon(g,type,11,11); });} ``` drawPUIcon(g,type,cx,cy): - star: star(cx,cy,7,'#ffd24a') stroke dark. - tank: g.fillStyle='#e03b30': treads rect(cx-8,cy-7,3,14),(cx+5,cy-7,3,14); body rect(cx-5,cy-7,10,14); barrel (cx-1,cy-9,2,6); turret dot. - shovel: g.fillStyle='#9aa4b0': handle rect(cx-1,cy-2,3,9); head rect(cx-6,cy-8,12,4); hole: g.fillStyle='#fff' rect(cx-3,cy-7,2,2); - grenade: g.fillStyle='#3c4756'; arc(cx,cy+1,5); cap g.fillStyle='#9aa4b0' rect(cx-2,cy-7,4,3); fuse: g.fillStyle='#ffd24a' rect(cx-1,cy-9,2,2); - clock: g.strokeStyle='#3a57d8'; g.lineWidth=2; g.beginPath();g.arc(cx,cy,6,0,7);g.stroke(); hands: fillRect(cx-1,cy-4,2,5); fillRect(cx,cy-1,4,2); center dot. 15) Water sprite: ```js function makeWater(f){ return mkCanvas(T,T,g=>{ g.fillStyle='#2740c8'; g.fillRect(0,0,T,T); g.fillStyle='#6f8cff'; for(let r=0;r<4;r++){ const y=r*7+1; for(let c=0;c<2;c++){ const off=((r+f)%2)?2:6; g.fillRect(c*13+off, y, 6, 3); } } g.fillStyle='#1a2a9e'; g.fillRect(0,6,T,1); g.fillRect(0,20,T,1); });} ``` Hmm rows: 4 rows y=1,8,15,22? r*7+1 → 1,8,15,22 height 3 → within 26 ok. 16) Tree sprite: ```js mkCanvas(T,T,g=>{ g.fillStyle='#0d6a17'; g.fillRect(0,0,T,T); g.fillStyle='#0a5211'; for(let y=0;y<4;y++)for(let x=0;x<4;x++){ if((x*3+y*5)%3===0) g.fillRect(x*13+2,y*13+2,7,7); } g.fillStyle='#128a20'; for(let y=0;y<4;y++)for(let x=0;x<4;x++){ if((x*5+y*3+1)%3===0) g.fillRect(x*13+6,y*13+4,5,5); } }); ``` 17) Steel: ```js mkCanvas(T,T,g=>{ g.fillStyle='#7c8592'; g.fillRect(0,0,T,T); g.fillStyle='#59616d'; g.fillRect(2,2,T-4,T-4); g.fillStyle='#cfd6de'; g.fillRect(4,4,T-8,T-8); g.fillStyle='#f2f5f8'; g.fillRect(4,4,T-8,3); g.fillRect(4,4,3,T-8); g.fillStyle='#8b93a0'; g.fillRect(T-8,4,3,T-8)? bottom shade: g.fillRect(4,T-7,T-8,3); g.fillRect(T-7,4,3,T-8); // corner notches g.fillStyle='#3f454e'; g.fillRect(2,2,3,3); g.fillRect(T-5,2,3,3); g.fillRect(2,T-5,3,3); g.fillRect(T-5,T-5,3,3); }); ``` 18) Brick: ```js for m 0..15: g.fillStyle='#3a1208'; g.fillRect(0,0,T,T); const tones=['#c65a2e','#b8461e']; for r,c: if(m&(1<<(r*2+c))){ const x=c*13,y=r*13; g.fillStyle= (r+c)%2? '#c25428' : '#b5461e'; g.fillRect(x+1,y+1,11,11); g.fillStyle='#d97a45'; g.fillRect(x+1,y+1,11,2); g.fillRect(x+1,y+1,2,11); g.fillStyle='#7c2a10'; g.fillRect(x+1,y+10,11,2); g.fillRect(x+10,y+1,2,11); } ``` m=0 empty (draw only mortar) — fine (won't be used). 19) Eagle sprite: ```js function makeEagle(dead){ return mkCanvas(26,26,g=>{ const rows = EAGLE_ART; const col = dead? {b:'#9aa0a8',y:'#5c646e'} : {b:'#ffd24a',y:'#8a4d00'}; rows.forEach((row,y)=>{ for(let x=0;x<13;x++){ const ch=row[x]; if(ch==='b'){g.fillStyle=col.b; g.fillRect(x*2,y*2,2,2);} else if(ch==='y'){g.fillStyle=col.y; g.fillRect(x*2,y*2,2,2);} } }); });} ``` Wait, 13*2=26 ✓. Verify EAGLE_ART rows (13 rows, 13 cols): ``` ".....bbb.....", "....byyb.....", "....byyb.....", "...bbbbbb....", "..bbbbbbbb...", ".bbbbbbbbbb..", ".bbbbbbbbbb..", "..bbbbbbbb...", "..bb....bb...", "...bb..bb....", "....b..b.....", "....b..b.....", ".....bb......" ``` Count each: r0: 5+3+5=13 ✓; r1: 4+2+2+2+4 wait "....byyb....." = 4dots + b + yy + b + 5dots = 4+1+2+1+5=13 ✓; r3 "...bbbbbb...." 3+6+4=13 ✓; r4 "..bbbbbbbb..." 2+8+3=13 ✓; r5 ".bbbbbbbbbb.." 1+10+2=13 ✓; r8 "..bb....bb..." 2+2+4+2+3=13 ✓; r9 "...bb..bb...." 3+2+2+2+4=13 ✓; r10 "....b..b....." 4+1+2+1+5=13 ✓; r12 ".....bb......" 5+2+6=13 ✓. 20) HUD icons: ```js function makeTankIcon(body,tread){ return mkCanvas(16,16,g=>{ g.fillStyle=tread; g.fillRect(1,2,4,12); g.fillRect(11,2,4,12); g.fillStyle=body; g.fillRect(5,3,6,10); g.fillRect(7,0,2,4); }).toDataURL(); } enemyIcon = makeTankIcon('#9aa2ac','#4a5058'); playerIcon = makeTankIcon('#ffd84d','#7a5c14'); ``` 21) Legend build: ```js const LEG=[['star','火力升级'],['tank','增加生命'],['shovel','基地加固'],['grenade','全清敌车'],['clock','冻结敌人']]; For each: figure: canvas 22 + label. ``` 22) CSS — let me write with care for layout, motion, and responsive. Main sizes: canvas display width: min(560px, 100%). Use .screen {width: min(560px, 92vw)}. Actually bezel contains; let me set .crt {display:flex; flex-direction:column; align-items:center}. Panel: width 300px, flex column gap; on narrow screens stack below with width 100%. Header layout: flex space-between, wrap. Let me write the CSS: ```css *{box-sizing:border-box;margin:0} :root{ --bg:#0f1420; --panel:#18202f; --panel2:#1f2937; --line:#2b3548; --gold:#ffc93c; --gold2:#ffd84d; --red:#ff5346; --cyan:#45d8e6; --cream:#f2ead6; --dim:#8b93a3; --deep:#0a0e16; } html,body{height:100%} body{ font-family:'Noto Sans SC',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; color:var(--cream); background: radial-gradient(1100px 520px at 78% -12%, rgba(56,84,150,.28), transparent 60%), radial-gradient(900px 500px at -10% 108%, rgba(160,60,40,.16), transparent 55%), repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 28px), var(--bg); min-height:100%; overflow-x:hidden; } ``` Plus a .fx container with drifting pixels. Header: ```css header{position:relative;padding:26px 28px 18px;border-bottom:3px solid var(--line); background:linear-gradient(180deg, rgba(255,201,60,.05), transparent 70%);} .bulbs{display:flex;justify-content:space-between;margin-bottom:14px} .bulb{width:9px;height:9px;border-radius:50%;background:#3a3320;box-shadow:0 0 0 2px rgba(0,0,0,.3);animation:blink 1.1s steps(2,end) infinite} .bulb:nth-child(odd){animation-delay:.55s} @keyframes blink{0%,49%{background:var(--gold);box-shadow:0 0 10px 2px rgba(255,201,60,.55)}50%,100%{background:#3a3320;box-shadow:none}} ``` Brand row: ```css .brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .stack{position:relative;width:96px;height:128px;flex:0 0 auto} .card{position:absolute;inset:0;background:linear-gradient(160deg,#f8f1dc,#e8dcbc);border:4px solid #b3321f;border-radius:8px;padding:8px 8px 6px;display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.5);transform:rotate(-5deg);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)} .stack:hover .card{transform:rotate(2deg) translateY(-4px) scale(1.04)} .stack .card.back{transform:rotate(6deg) translate(8px,6px);filter:brightness(.55) saturate(.7);z-index:-1} ``` Wait, .back is also .card; separate transforms. Give .card.back its own transform rule; stack hover changes front only. Card inner: ```css .c-no{font:9px 'Press Start 2P';color:#b3321f;letter-spacing:1px} .c-tank{position:relative;width:58px;height:58px;margin:6px 0} .ct-t{position:absolute;top:4px;bottom:4px;width:9px;background:repeating-linear-gradient(#3a4150 0 4px,#12151c 4px 8px)} .ct-t.l{left:2px}.ct-t.r{right:2px} .ct-b{position:absolute;left:13px;right:13px;top:6px;bottom:6px;background:linear-gradient(#4a5263,#333b49);border-radius:4px} .ct-barrel{position:absolute;left:50%;top:0;width:8px;height:22px;transform:translateX(-50%);background:#333b49} .ct-tur{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);background:#20262f;border-radius:4px} .c-name{font:16px 'ZCOOL KuaiLe';color:#7a1f1f;margin-top:2px} .c-star{color:#d8a11c;font-size:11px;letter-spacing:2px} ``` Title: ```css h1{font:44px/1.05 'ZCOOL KuaiLe';letter-spacing:6px;color:var(--cream);text-shadow:3px 3px 0 #7a1f1f, 6px 6px 0 rgba(0,0,0,.45)} .tag{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:12px 'Noto Sans SC';color:var(--dim);letter-spacing:2px} .tag .chip-card{font:13px 'ZCOOL KuaiLe';color:#ffe9a0;background:linear-gradient(160deg,#c8281e,#8f1710);border:2px solid #e8a13c;padding:3px 10px;transform:rotate(-2deg);box-shadow:0 4px 10px rgba(0,0,0,.4);letter-spacing:2px} .hs{margin-left:auto;text-align:right} .hs .lbl{font:8px 'Press Start 2P';color:var(--dim);letter-spacing:1px} .hs .val{font:20px 'Press Start 2P';color:var(--gold);margin-top:6px;text-shadow:0 0 12px rgba(255,201,60,.4)} ``` Main: ```css main{display:flex;gap:26px;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:28px 20px 10px;position:relative;z-index:1} .crt{display:flex;flex-direction:column;gap:10px} .bezel{padding:16px;background:linear-gradient(160deg,#2b3345,#151a26);border:1px solid #35405a;border-radius:20px;box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);position:relative} .bezel::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:64px;height:4px;border-radius:2px;background:#35405a} .screen{position:relative;width:min(560px,88vw);aspect-ratio:1/1;background:#000;border:2px solid #05070b;border-radius:8px;overflow:hidden} canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges} .scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);mix-blend-mode:multiply} .roll{position:absolute;left:0;right:0;height:70px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(160,220,255,.05),transparent);animation:roll 7s linear infinite} @keyframes roll{from{top:-90px}to{top:110%}} .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 18% 8%, rgba(255,255,255,.09), transparent 46%)} .crt-foot{display:flex;align-items:center;gap:8px;font:8px 'Press Start 2P';color:#5b6578;letter-spacing:1px;padding:0 6px} .led{width:8px;height:8px;border-radius:50%;background:#ff5346;box-shadow:0 0 8px #ff5346;animation:led 2.4s ease-in-out infinite} @keyframes led{50%{opacity:.35;box-shadow:none}} ``` Panel: ```css .panel{width:300px;display:flex;flex-direction:column;gap:14px} .block{background:linear-gradient(180deg,var(--panel),#141a26);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;box-shadow:0 8px 20px rgba(0,0,0,.35)} .block h3{font:8px 'Press Start 2P';color:var(--dim);letter-spacing:2px;margin-bottom:10px;display:flex;justify-content:space-between} .big{font:22px 'Press Start 2P';color:var(--gold);text-shadow:0 0 14px rgba(255,201,60,.35)} .big.pop{animation:pop .25s} @keyframes pop{40%{transform:scale(1.22);color:#fff}} .sub{font:9px 'Press Start 2P';color:var(--dim);margin-top:8px} .sub b{color:var(--cyan)} .pips{display:flex;gap:5px;flex-wrap:wrap} .pip{width:16px;height:16px;border:2px solid #3a4560;background:#10151f;position:relative;transition:all .3s} .pip.cur{border-color:var(--gold);animation:pipblink 1s steps(2) infinite} @keyframes pipblink{50%{background:rgba(255,201,60,.35)}} .pip.done{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(255,201,60,.5)} .egrid{display:flex;flex-wrap:wrap;gap:4px;max-width:220px} .ic{width:16px;height:16px;background-size:contain;background-repeat:no-repeat;transition:all .3s} .ic.dead{opacity:.15;filter:grayscale(1);transform:scale(.7)} .lives{display:flex;gap:6px;min-height:16px} .status{display:flex;gap:6px;flex-wrap:wrap;min-height:22px} .chip{font:11px 'Noto Sans SC';padding:3px 9px;border-radius:4px;letter-spacing:1px;border:1px solid} .c-gold{color:var(--gold);border-color:#8a6c1e;background:rgba(255,201,60,.08)} .c-cyan{color:var(--cyan);border-color:#1e6d75;background:rgba(69,216,230,.08)} .c-red{color:var(--red);border-color:#8a2a24;background:rgba(255,83,70,.08)} .legend{display:flex;flex-direction:column;gap:7px} .lg{display:flex;align-items:center;gap:10px;font:12px 'Noto Sans SC';color:#c8cdd8;letter-spacing:1px} .lg canvas{image-rendering:pixelated;box-shadow:0 2px 6px rgba(0,0,0,.4)} .btns{display:flex;gap:8px} button{font:11px 'Press Start 2P';letter-spacing:1px;color:var(--cream);background:#202a3d;border:2px solid #3a4560;border-bottom-width:4px;padding:9px 10px;cursor:pointer;transition:all .15s;flex:1} button:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} button:active{transform:translateY(1px);border-bottom-width:2px} ``` Footer: ```css footer{padding:16px 24px 26px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;align-items:center;position:relative;z-index:1} .keys{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .kset{display:flex;align-items:center;gap:6px;font:12px 'Noto Sans SC';color:var(--dim)} kbd{font:8px 'Press Start 2P';background:#222b3f;border:1px solid #3a4560;border-bottom:3px solid #0b0f18;padding:5px 7px;border-radius:4px;color:var(--cream);min-width:24px;text-align:center;display:inline-block} .tip{width:100%;text-align:center;font:12px 'Noto Sans SC';color:#5b6578;letter-spacing:1px;margin-top:4px} ``` Touch controls (shown on coarse pointer or narrow): ```css .touch{display:none;justify-content:space-between;width:min(560px,92vw);padding:10px 4px} @media (hover:none),(max-width:760px){.touch{display:flex}} .dpad{display:grid;grid-template:repeat(3,44px)/repeat(3,44px);gap:4px} .tbtn{width:44px;height:44px;background:#202a3d;border:2px solid #3a4560;border-radius:8px;color:var(--gold);font-size:16px;display:flex;align-items:center;justify-content:center;user-select:none;touch-action:none} .tbtn:active{background:#31405c} #dp-u{grid-area:1/2}#dp-l{grid-area:2/1}#dp-r{grid-area:2/3}#dp-d{grid-area:3/2} #fire{width:76px;height:76px;border-radius:50%;font:12px 'ZCOOL KuaiLe';color:var(--red);border-color:#8a2a24} ``` Position the .touch right after .bezel inside .crt. fx particles: ```css .fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .px{position:absolute;background:var(--c,#ffd24a);opacity:.16;animation:drift var(--t,16s) ease-in-out infinite alternate} @keyframes drift{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx,20px),var(--dy,-60px)) rotate(25deg)}} ``` Generate ~12 with JS or hardcode. Generate via JS for brevity? Hardcode 12 divs with inline style — verbose but fine. Let me use a small JS loop that generates. OK. Font link: ```html ``` Now assemble the full JS. Watch out for order: define everything, then init. Also 'over' state: set overT=0; sfx.over(); save hi. destroyBase → state='over' direct (skip dying). Set baseDead, booms, sfx.bigBoom, then endGame('base'). function endGame(reason){state='over';overReason=reason;overT=0;sfx.over();saveHi();} killPlayer: ...lives--;refreshLives(); if(lives>0){state='dying';dieT=90;} else {state='over';overReason='tank';overT=0;sfx.over();saveHi();} Also saveHi in endGame for 'over' due to tank. Save hi: localStorage. Now let me write the render() text: set ctx.textAlign appropriately per section; save/restore for text with shadow: helper drawText(txt,x,y,font,color,shadow,align='center'): ``` ctx.textAlign=align;ctx.textBaseline='alphabetic'; ctx.font=font; ctx.fillStyle=shadow||'rgba(0,0,0,.8)'; ctx.fillText(txt,x+2,y+2); ctx.fillStyle=color; ctx.fillText(txt,x,y); ``` Intro: band y=156: draw 13 brick sprites; text "STAGE 0X" font '10px "Press Start 2P"' at (169,148); name font '15px "ZCOOL KuaiLe"' at (169,204) gold; blink "READY" 7px at (169,222) cyan. Wait, STAGE text baseline: y=148 is above band (156). ✓ Clear: overlay; "本关完成!" '18px ZCOOL' gold, 170, 150; "+500 奖励" '8px press' cream, 170, 176; blink '进入第 X+1 关…' 11px ZCOOL dim, 170, 210 (or '最后一关?' if last — but 10 is handled by win). Over: 'GAME OVER' '14px press' red 170, 142; reason '12px ZCOOL' cream 170, 170; '本局得分 '+pad '9px press' gold 170, 198; blink '按 ENTER 重新开始' 8px press 170, 226. Win: '霸王加冕' — title: '通关!' big? Let me do: '通关啦!' '22px ZCOOL' gold 170, 138; 'TANK BATTLE CLEAR' '8px press' cyan 170, 164; '最终得分 '+pad(score) '10px press' cream 170, 196; '历史最高 '+pad(hi) '8px press' dim 170, 218; blink '按 ENTER 再来一次' 8px 170, 246. Fireworks booms behind (drawn in world booms? World is still drawn with base — that's fine, booms on top of dark overlay: draw booms after overlay. Let me render win: dark, then booms, then text. Pause: dark .7; 'PAUSE' '14px press' cream 170, 165; '按 P 继续' 12px ZCOOL dim 170, 195. Title decorations: corner brackets: ``` ctx.strokeStyle='#39445c'; lw 3; draw corner L shapes at (8,8) etc. gold accents: short lines. ``` Brick decorations: draw brickSpr[15] at positions [[0,0]?...]. Place a symmetric set: [(1,2),(11,2),(5,3),(7,3),(3,5),(9,5),(6,7)]? And steel at [(2,11)? no, base area is occupied by eagle on bottom center? On title there's no eagle. Let me use: brick tiles at [(1,2),(11,2),(5,2),(7,2),(3,5),(9,5),(1,9),(11,9)] and 2 steel at [(6,4),(6,6)]? Hmm (6,4) and (6,6). Wait, keep away from center text rows ~ y 60-110px = rows 2-4; tanks are at y=165 (row 6.3). Prompt at 250 (row 9.6). Decorative tiles at edges rows 2,5,9 cols 1,11 and (5,9),(7,9)? Let me pick: Bricks: (1,2),(11,2),(1,9),(11,9),(5,9),(7,9),(5,2),(7,2) Steel: (0,5)? col 0 rows 5 & 9? (0,5),(12,5)? 12 is last col (0..12). Use (0,6),(12,6). Water: (2,9),(10,9)? Cute. ok final: bricks: (1,2),(11,2),(5,2),(7,2),(1,9),(11,9),(5,9),(7,9) steel: (0,6),(12,6) water: (3,9),(9,9) tanks at y=165 → row ~6.4, x=70 & 242 — clear of (5,9)? 5,9 is x130-156 y234-260 — no overlap with tanks (y165-191). Prompt text at 250 is over water tiles (3,9) at x78-104 y234-260 — text centered at 170 'PRESS ENTER' width ~ 9px*11chars≈ 99px → spans 120-220 → over (5,9) brick? (5,9) x130-156 y234-260 — yes overlaps text area. Text is drawn later with shadow → readable. OK, or move prompt to 258. Fine. Title tank: draw at (70, 165+bob), facing right (dir 1). Wait dir 1 = right. And enemy (242, 165-bob), facing left (dir 2). Bullets: player bullet moves right at y=175: x=104+((frame*2)%60) → 104..163; enemy bullet moves left at y=175: x=234-((frame*2+30)%60). Draw white 5px squares. Occasionally collision → no, keep simple. Also add "1P" label? Skip. Now, 'clear'/'over'/'win'/'dying' state still draws world (frozen), plus booms continue via tick. One more: in tick for 'dying', we need booms to update. Let me structure the tick: ```js function tick(){ frame++; switch(state){ case 'title': break; case 'intro': if(--introT<=0) state='play'; break; case 'play': if(!paused) updatePlay(); break; case 'dying': if(!paused){ stepBooms(); if(--dieT<=0) respawn(); } break; case 'clear': stepBooms(); if(--clearT<=0){ level++; if(level>10){state='win';winT=0;sfx.win();saveHi();} else loadLevel(); } break; case 'over': overT++; break; case 'win': winT++; if(winT%26===0){booms.push({x:40+Math.random()*258,y:30+Math.random()*120,t:0,dur:24,big:Math.random()<.4}); if(Math.random()<.5)sfx.boomS();} break; } if(state!=='title'){ shake=Math.max(0,shake-0.7); } if(frame%20===0) refreshStatus(); } ``` updatePlay contains updateWorld + win check + drop apply etc. stepBooms: booms t++, filter. paused flag is separate; P toggle only when state in play/dying/clear. Wait: paused during 'clear' — allow, fine. Also refreshStatus only relevant in play. respawn(): ``` player.x=104;player.y=312;player.dir=0;player.alive=true;player.inv=160;player.phase=0; bullets=bullets.filter(b=>b.from!=='p'); state='play'; sfx.life(); ``` Note: respawn pos might overlap with enemy → inv covers (enemies pass through? enemy bullets can't kill while inv). Enemies visually overlap — fine. loadLevel(): ``` function loadLevel(){ // parse grid=[];brickMask=[]; for(let y=0;y 220 → wrap to ~11 per line (11×20=220). ~2-3 rows. Fine. Enemy count label in h3: "敌方坦克 ". I think the plan is complete. Let me now write the final HTML. Also add . One concern: canvas text with ZCOOL KuaiLe — font may not be loaded on first title draw; it'll swap once loaded (canvas redraws each frame, so it appears once font ready). Good. Also ensure keydown for 'p' doesn't conflict with typing — no inputs. Edge: keys object: const keys={}; keys[m] where m is 'up' etc. Fire key 'j' and space. Also Enter for starting. Also handle canvas pointerdown for starting. Let me write the HTML head + body + script. Also include a favicon? Skip. Also title screen "点击屏幕" — add hint on CRT foot? Fine. Let me also double-check drawTank treads stripe offset: ((ph|0)%4) with ph growing 0.3/frame → offset changes every ~13 frames? That's slow. Better: use frame*0.3 per moving tank? Tie to global: when moving, tk.phase+=0.35 → offset = (tk.phase*4|0)%4? phase 0.35/frame → phase*4=1.4/frame → offset changes ~1/frame*? (phase*4|0)%4 cycles fast: 0.35*4=1.4/frame → floor grows by 1.4 per frame → mod 4 pattern: 0,1,3,0,2,3,1... decent animation. Let me use off=((ph*4)|0)%4. Bullet draw: white core 4x4, plus 1px direction tip: skip. Freeze: enemies also can't be fired at? They can be hit (player bullet) — hp decrements (fun). Fine. Enemy spawn star: drawSpawn: ``` function drawSpawn(e){ const p=1-e.spawnT/50; if(((e.spawnT>>2)&1)) return; // blink const cx=e.x+13, cy=e.y+13; const L=22*(1-p)+6; ctx.fillStyle='#f2ead6'; ctx.fillRect(cx-2,cy-L/2,4,L); ctx.fillRect(cx-L/2,cy-2,L,4); ctx.fillStyle='#ffd24a'; ctx.fillRect(cx-1,cy-L/2+2,2,4); ctx.fillRect(cx-1,cy+L/2-6,2,4); } ``` Carrier star: ``` ctx.fillStyle='#fff'; starPath(cx, e.y-3, 4); ``` star function: ``` function star(cx,cy,r){ctx.beginPath();for(let i=0;i<10;i++){const a=-Math.PI/2+i*Math.PI/5;const rr=i%2?r*.45:r;const x=cx+Math.cos(a)*rr,y=cy+Math.sin(a)*rr;i?ctx.lineTo(x,y):ctx.moveTo(x,y);}ctx.closePath();ctx.fill();} ``` Inv shield: ``` if(player.inv>0 && (frame>>2&1)){ ctx.strokeStyle='#eaf6ff';ctx.lineWidth=2;ctx.strokeRect(player.x-2.5,player.y-2.5,31,31); ctx.strokeStyle='#45d8e6';ctx.strokeRect(player.x-4.5,player.y-4.5,35,35);} ``` Hmm, 35 > 338? player.x min 0 → -4.5 slightly off-canvas, clip, fine. Now grenade visual: also screen flash: shake=8 + white flash overlay 2 frames: flashT=4; if flashT>0 in drawWorld: fillRect rgba(255,255,255,.7); flashT--. Also small flash on player hit? Skip. OK, let me also verify: enemy bullets should not damage other enemies — correct (from 'e' skips enemy loop). Player bullets damage enemies ✓. Both damage bricks ✓. Enemy bullets can destroy base ✓. Base destruction check inside bullet loop also for enemy bullet → destroyBase (yes, both). destroyBase(): ``` baseDead=true; booms.push({x:169,y:325,t:0,dur:44,big:true}); shake=16; sfx.bigBoom(); endGame('base'); ``` Eagle rect x=156..182 center (169,325). But wait: state='over' but booms still animate (tick 'over' → only overT++ … booms won't update → freeze mid-explosion). Let me add stepBooms() in over and win and title? Win uses booms for fireworks. Add stepBooms to over/win too. Also 'dying': stepBooms ✓. Also render world during 'over' ✓ (shows final scene). Alright, HUD ecount also updated on spawn? enemiesLeft changes only on kill. Display total-kill; fine. Also small detail: enemy spawn "spawned" counts attempts that succeed; skip on invalid spots (rare). ✓ Level names: 1 新手村 2 小河弯弯 3 钢铁要塞 4 渡河行动 5 迷之回廊 6 丛林伏击 7 双水夹道 8 重装防线 9 九曲钢关 10 决战霸王城 Let me write the map arrays in the code (as defined above). Let me do a final verification of each row length (13): L1: "............." 13 ".#.#.#.#.#.#." 1+12=13? .#.#.#.#.#.#. → 13 ✓ r4 ".#.#...#.#.#." → .(1)#(2).(3)#(4).(5).(6).(7)#(8).(9)#(10).(11)#(12).(13) ✓ r8 "...#.#.#.#..." → 3+1+1+1+1+1+1+1+3 = 13 ✓ r11 ".#.#.....#.#." → 1+1+1+1+5+1+1+1+1=13 ✓ L2: ".#.#...#...#." ✓ (1+1+1+1+3+1+3+1+1=13) ".#.#.~~#~~.#." ✓ "....#...#...." → 4+1+3+1+4=13 ✓ ".#...###...#." → 1+1+3+3+3+1+1=13 ✓ L3: as above verified. r5 ".#..#.T.#..#." → 1+1+2+1+1+1+1+1+2+1+1=13 ✓ r6 ".#..#...#..#." → 1+1+2+1+3+1+2+1+1=13 ✓ r8 ".@...###...@." ✓ same as r3. L4 verified. L5: r1 ".@.#.....#.@." → 1+1+1+1+5+1+1+1+1=13 ✓ r3 ".#...#.#...#." → 1+1+3+1+1+1+3+1+1=13 ✓ r5 ".@.#...#...@." → 1+1+1+1+3+1+3+1+1=13 ✓ r6 ".#.#.T.T.#.#." → 1+1+1+1+1+1+1+1+1+1+1+1+1=13 ✓ L6: r4 ".#.~~#.#~~.#." → 1+1+1+2+1+1+1+1+2+1+1=13 ✓ r5 ".#.~~#.T.~~#." → 1+1+1+2+1+1+1+1+2+1+1=13 ✓ r8 ".#.T.#.#.T.#." → 13 ✓ L7: r2 ".#.###.#.###." verified 13 r3 ".#..#...#..#." → 1+1+2+1+3+1+2+1+1=13 ✓ r4 ".~~@.###.~~#." verified 13 r7 ".#.#.###.#.#." ✓ r9 ".#..#...#..#." ✓ L8 verified. r2 ".#..#.#.#..#." → 1+1+2+1+1+1+1+1+2+1+1=13 ✓ r3 ".#.##.~.##.#." → 1+1+1+2+1+1+1+2+1+1+1=13 ✓ r5 ".@.###.###.@." ✓ L9: r1 ".#.#.###.#.#." ✓ r4 ".@..#.T.#..@." → 1+1+2+1+1+1+1+1+2+1+1=13 ✓ r8 ".@..#.###..@." ✓ r10 ".#.#...#.#.#." ✓ L10: r1 ".@...###...@." ✓ r2 ".#..#.#.#..#." ✓ r3 ".#..#.~.#..#." → 1+1+2+1+1+1+1+1+1+2+1+1=13 ✓ r4 ".@..#.T.#..@." ✓ r5 ".#..#.###..#." → 1+1+2+1+3+1+2+1+1=13 ✓ r7 ".@..#.###..@." ✓ r10 ".#.#...#.#.#." ✓ Good. Also verify no map walls block player spawn (4,12)/(3,12) or enemy spawns (0,0),(6,0),(11,0) — row 0 is all '.' in all maps ✓. (4,12): row 12 all '.' in all maps ✓. Row 11: L3 r11 "............." ✓; L4 r11 "............." ✓; others ✓. Wait L5 r11 "............." ✓. All rows 12 "............." ✓. Base ring at (5,11),(6,11),(7,11),(5,12),(7,12): maps have '.' there (rows 11-12 clear) ✓. Enemy spawn row 0: tank at (col, 0) — needs (col,1) reachable too… AI handles. One more: L3 r1 ".#.#.#.#.#.#." → col 11 '#'? Spawn col 11 is row 0 ✓ clear; tank moves down through col 11: r1 col 11 '#'. So spawn 3 at (11,0) is immediately blocked by brick below; AI will go horizontal; can't go down… will wander top. Acceptable (classic has similar). Actually let me check L3 r1: ".#.#.#.#.#.#." col 11 '#'? Pattern .#.→ indices: 0'.', 1'#', 2'.', 3'#', 4'.', 5'#', 6'.', 7'#', 8'.', 9'#', 10'.', 11'#', 12'.' → yes col 11 '#'. Spawn at (11,0) with below (11,1) is brick → tank at row 0 can go left? (10,0)? Row 0 clear → moves left along top. Fine. L1 r1 same pattern; same behavior. Classic actually had open rows. Fine — enemies will wander the top, come down later via cols 0, 2, 4, 6… OK. Now, the "enemy fire cap": each enemy fires only when its own bullet count ≤1? Track: count bullets from this enemy — need enemy id on bullet. Add bullet.e=e ref; when firing: if(!bullets.some(b=>b.e===e)). Cheap. Player fire cap by power ✓. Total performance trivial. Let me finalize the DOM ids: score, hi (panel), hiTop (header), pips, egrid, ecount, lives, status, sndBtn, rstBtn, game canvas. Header hs val id=hiTop — update both. updateScore(): scoreEl.textContent=pad(score); hiTop & hiEl = pad(max(hi,score)); save hi only on end/win (or live-save, cheap: save on end/win + on level clear). pad = n => String(n).padStart(6,'0'). Let me write the final answer. Keep the prose around the code minimal (in Chinese): a short intro line, then the code block, then a brief usage note (controls, features). Follow the format and keep it terse. Also note: the instructions said the answer should include the full HTML in the same code block with script/link tags. ✓ Let me now write the code in full. Being extra careful about syntax errors since it's long. One more detail: `ctx.textBaseline` default alphabetic — ok. drawText helper: ```js function txt(s,x,y,font,fill,shadow,align){ ctx.save(); ctx.textAlign=align||'center'; ctx.font=font; if(shadow!==null){ctx.fillStyle=shadow; ctx.fillText(s,x+2,y+2);} ctx.fillStyle=fill; ctx.fillText(s,x,y); ctx.restore(); } ``` Title big text: txt('坦克大战',170,84,'36px "ZCOOL KuaiLe"','#f2ead6','#7a1f1f'). Chip: ctx.fillStyle='#c8281e'; ctx.fillRect(114,96,112,20); txt('霸王卡 · 10关典藏',170,111,'13px "ZCOOL KuaiLe"','#ffe9a0',null). txt('TANK BATTLE',170,136,'9px "Press Start 2P"','#45d8e6','#0b2530'). Tanks and bullets y ~150-200. Prompt: if(frame>>4&1) txt('PRESS ENTER',170,254,'9px "Press Start 2P"','#ffd24a','#5a3a00'); txt('点击屏幕或按回车开始',170,276,'12px "ZCOOL KuaiLe"','#c8cdd8','#1c2230'); txt('HI-SCORE '+pad(hi),170,300,'8px "Press Start 2P"','#8b93a3'); txt('方向键/WASD 移动 · J或空格开火 · P 暂停 · M 静音',170,322,'11px "ZCOOL KuaiLe"','#5b6578'); Title tanks: y=178+bob (bob ±3) → 175..181 within rows 6-7 (156-208). Bullet y=190? y=189 (aligned with tank center 178+13=191). Use 188. Player tank x=70, enemy x=242. Bullets: pb x = 100 + ((frame*2.2)%64) → 100..163; eb x = 238 - ((frame*2.2+32)%64). Draw 5x5 white squares at y=188. Corner brackets: ``` ctx.strokeStyle='#39445c';ctx.lineWidth=3; const L=22; corners: (6,6): moveTo(6,6+L)→(6,6)→(6+L,6); (332,6): (332-L,6)→(332,6)→(332,6+L); (6,332); (332,332). ``` Plus small gold ticks inside. Decorative tile draw before tanks. Alright, 'clear' text next stage: if level===10 won't reach clear (it goes to win) ✓. Also during 'clear' the world is already cleared (no enemies). Good. Also during intro: HUD shows current level; enemies=total. Now let me write the code. Also make sure `enemiesLeft` display updates on kill: killEnemy → enemiesLeft-- → markEnemies. markEnemies uses egrid children count = levelTotal (rebuild in loadLevel ✓). Grenade: enemiesLeft -= list.length; markEnemies(); also booms for each. Drop pickup uses aabb. applyDrop('shovel') condition: if(!baseDead && shovelT<=0). Edge: two shovels in a row — refresh timer. OK, writing. Also: ensure `player` defined before first render (title uses only PPAL tanks; render world only after load). Init: set up a default player object before the loop just in case: player={x:104,y:312,dir:0,power:1,alive:true,inv:0,phase:0}. state='title'. grid initialized to zeros? Not needed for title (no world draw). But render() calls drawWorld only if state!=='title' ✓. Let me define default grid before loadLevel for safety: grid = Array.from({length:13},()=>Array(13).fill(0)); brickMask same. Also EAGLE={x:156,y:312}. DXD=[[0,-1],[1,0],[-1,0],[0,1]]. Also double-check fire bullet offset for dir=0 (up): by=player.y+2 (bullet 6px, y+2 → spans 2..8 within tank top area, muzzle at y+? top edge y; bullet starts inside tank top edge — collision with own wall above: bullet moves up from y+2; tile above: fine, bullet spawns inside tank not wall (tank position was clear). But what about brick directly above muzzle? Bullet starts at tank's own top y+2 → substep up will check tiles: first substep at y+2-4 = y-2 → tile row above → hits brick if present. Correct behavior (can't shoot through adjacent wall). Enemy firing from dir up at y=0: bullet by=e.y+2=2; moves up → y<0 → dies at edge ✓. Player L4 steel destroy: destroySteelAt: ``` const gx=Math.floor((b.x+3)/T), gy=Math.floor((b.y+3)/T); if(gx>=0&&gy>=0&&gx{tone(300,.05,'square',.06,-100);}. Freeze sfx on drop: tone(1500→600 sine). Now final code. Also add document.fonts preload for canvas. Also, potential issue: keys 'w' — e.key.toLowerCase() for 'W' ✓; but Chinese IME? Fine. Also prevent scroll on space ✓. R button: restart → startGame() (from any non-title state). Also add: state 'intro' + Enter → skip intro (introT=0). Nice. Mute button text sync. Now let me write the CSS for .chip-card etc. Also the "hs" block in header. Let me count panel blocks: 分数 / 关卡 / 敌人 / 生命 / 状态 / 道具 / 按钮. 7 blocks — rich. Alright, let me now generate the final file. Let me write it in one go, being careful with syntax. Also, the fx pixel generator: ```js const fx=document.getElementById('fx'); const colors=['#ffd24a','#ff5346','#45d8e6','#8b93a3','#f2ead6']; for(let i=0;i<14;i++){const s=document.createElement('span');s.className='px';const sz=4+Math.random()*7;s.style.cssText=`left:${Math.random()*100}%;top:${Math.random()*100}%;width:${sz}px;height:${sz}px;--c:${colors[i%5]};--t:${10+Math.random()*14}s;--dx:${(Math.random()*60-30)|0}px;--dy:${-(20+Math.random()*70)|0}px;animation-delay:-${(Math.random()*10)|0}s`;fx.appendChild(s);} ``` Bulbs: 26 spans generated: ```js const bs=document.getElementById('bulbs');for(let i=0;i<26;i++){const b=document.createElement('span');b.className='bulb';bs.appendChild(b);} ``` OK — final answer time. Let me write compact but readable code. Let me double-check all referenced ids exist. Potential pitfall: in updatePlay, after destroyBase() inside updateBullets or enemies — we set state='over'; the rest of updatePlay still runs this frame (drops etc.) — harmless; subsequent frames will skip. KillPlayer during bullet loop: player.alive=false; further enemy bullets this frame would check player.alive ✓. respawn resets inv. Also player bullet cleanup on death handled on respawn (filter). Bullets already in air during 'dying' frozen (world not updated) — visually frozen; fine. HUD 'status' refresh during non-play states also fine. One more: after win/over, R or Enter restarts ✓. Now let me write the final version. Small thing: canvas pointerdown also sets keys? No. Touch fire button: on pointerdown keys.fire=1, keyup pointerup 0; also if title → start. Ensure .tbtn user-select none & -webkit-tap-highlight transparent. Final: title h1 in Chinese "坦克大战" + small "TANK BATTLE" below? h1 and .tag line: `霸王卡 · 童年典藏单人 10 关 · 保卫指挥部`. Also add a small "1994" in the corner of the header? Cute: .year tag on the right above hs? Put in hs lbl: "HIGH SCORE". OK, I'll write. Also I'll keep the JS robust: wrap localStorage in try/catch (some sandboxed iframes block). Use: ```js const store={get(k){try{return localStorage.getItem(k)}catch(e){return null}},set(k,v){try{localStorage.setItem(k,v)}catch(e){}}}; ``` Good — iframe-friendly. Let me now write the full file. (Also double-check no template literal issues inside HTML.) Final map array in the code: ```js const LEVELS=[ {name:"新手村",map:[ ".............", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#...#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", "...#.#.#.#...", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#.#.....#.#.", "............."]}, {name:"小河弯弯",map:[ ".............", ".#.#...#...#.", ".#.#.~~#~~.#.", ".#.#.~~#~~.#.", ".#.#...#...#.", ".#.#.#.#.#.#.", "....#...#....", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".#...###...#.", ".#.#.#.#.#.#.", ".............", "............."]}, {name:"钢铁要塞",map:[ ".............", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".@...###...@.", ".@..#...#..@.", ".#..#.T.#..#.", ".#..#...#..#.", ".@..#.###..@.", ".@...###...@.", ".#.#.#.#.#.#.", ".#.#.#.#.#.#.", ".............", "............."]}, {name:"渡河行动",map:[ ".............", ".#.#.#.#.#.#.", ".#.#.###.#.#.", ".#.#.###.#.#.", "..~~#...#~~..", "..~~#.#.#~~..", "..~~#.#.#~~..", "..~~#...#~~..", ".#.#.###.#.#.", ".#.#.###.#.#.", ".#.#.#.#.#.#.", ".............", "............."]}, {name:"迷之回廊",map:[ ".............", ".@.#.....#.@.", ".#.#.#.#.#.#.", ".#...#.#...#.", ".#.#.###.#.#.", ".@.#...#...@.", ".#.#.T.T.#.#.", ".#...#.#...#.", ".#.#.###.#.#.", ".#.#.#.#.#.#.", ".@.#.....#.@.", ".............", "............."]}, {name:"丛林伏击",map:[ ".............", ".TT.#.#.#.TT.", ".TT.#.#.#.TT.", ".#..#.#.#..#.", ".#.~~#.#~~.#.", ".#.~~#.T.~~#.", ".#..#.#.#..#.", ".#.#.#.#.#.#.", ".#.T.#.#.T.#.", ".#.#.#.#.#.#.", ".TT.#.#.#.TT.", ".............", "............."]}, {name:"双水夹道",map:[ ".............", ".#..#.#.#..#.", ".#.###.#.###.", ".#..#...#..#.", ".~~@.###.~~#.", ".~~@.###.~~#.", ".#..#...#..#.", ".#.#.###.#.#.", ".#.#.###.#.#.", ".#..#...#..#.", ".#.#.#.#.#.#.", ".............", "............."]}, {name:"重装防线",map:[ ".............", ".@.#.#.#.#.@.", ".#..#.#.#..#.", ".#.##.~.##.#.", ".#..#...#..#.", ".@.###.###.@.", ".#..#...#..#.", ".#.##.~.##.#.", ".#..#.#.#..#.", ".@.#.#.#.#.@.", ".#.#.#.#.#.#.", ".............", "............."]}, {name:"九曲钢关",map:[ ".............", ".#.#.###.#.#.", ".#.#.###.#.#.", ".#..#...#..#.", ".@..#.T.#..@.", ".#..#.T.#..#.", ".#..#...#..#.", ".@..#.###..@.", ".#..#.###..#.", ".#.#.#.#.#.#.", ".#.#...#.#.#.", ".............", "............."]}, {name:"决战霸王城",map:[ ".............", ".@...###...@.", ".#..#.#.#..#.", ".#..#.~.#..#.", ".@..#.T.#..@.", ".#..#.###..#.", ".#..#...#..#.", ".@..#.###..@.", ".#..#.###..#.", ".#.#.#.#.#.#.", ".#.#...#.#.#.", ".............", "............."]} ]; ``` Now let me generate the answer: brief Chinese intro, single HTML code block, then a short feature/controls summary. 做了一台可以直接开机玩的「霸王卡·坦克大战」：单人闯关、共 10 关，含砖墙/钢墙/水路/树丛、老鹰指挥部、敌方 4 种坦克、5 种道具、火力升级、音效与最高分记录。保存为 `.html` 用浏览器打开即可。 ```html 坦克大战 · 童年霸王卡 · 单人10关

NO.001

霸王坦克

★★★★★

坦克大战

霸王卡 · 童年典藏单人 10 关 · 保卫指挥部

HIGH SCORE
000000

▲
◀

▶
▼

开火

BAWANG-CARTV · 4:3 像素显像管

SCORE 得分
000000
HI 000000

STAGE 关卡

ENEMY 敌方坦克 0

LIVES 生命

STATUS 状态

ITEMS 道具

↑↓←→ / WASD 移动 J / SPACE 开火 P 暂停 M 静音 R 重开

守住底部中央的老鹰指挥部 · 火力升到 Lv4 可击毁钢墙 · 带★的敌车掉落道具

``` **玩法要点** - **操作**：方向键 / WASD 移动，J 或空格开火（可按住连发），P 暂停，M 静音，R 重开；手机/触屏会出现虚拟方向键和开火键。 - **规则**：每关 16~25 辆敌车从上方三处刷新，击破全部过关；老鹰指挥部被击毁立即失败，共 3 条命。 - **地形**：红砖可打碎（逐块）、钢墙只有火力 Lv4 才能击破、水路挡车不挡炮弹、树丛可隐藏车身。 - **道具**（带★敌车掉落）：★ 火力升级、红坦克 +1 命、铲子把指挥部临时加固为钢墙、手雷清屏、时钟冻结敌方 10 秒。 - **手感还原**：砖墙半块破坏、出生星形闪烁、无敌护盾、爆炸震屏、8-bit 芯片音效，最高分自动存档。