Space Invaders · particle-1

Let me write the game. I'll make it thorough with procedural graphics on canvas.

Design:
- Canvas 900x640 (responsive scaling with CSS). Playfield logical 900x640.
- Player cannon at bottom, move left/right A/D/arrows, space fires. Cooldown ~250ms. Bullet lifetime bounded (e.g., 2s or off-screen). Player bullets max 2-3.
- Alien grid 8 columns x 4 rows, moves horizontally, reverses and descends at edges. Movement speed increases as aliens are cleared.
- Aliens fire toward player randomly with decreasing interval. Enemy bullet lifetime bounded.
- Bunkers: destructible pixel grids (e.g., 4 bunkers, each with cell grid of blocks). Bullet collides, destroys cells in a small radius, persistent. Shots pass through gaps.
- Lives 3, enemy shot costs life with 1.5s invulnerability blinking.
- Game over when aliens reach player zone or lives 0. Win when aliens cleared.
- Restart resets everything.
- Controls displayed, status panel with score, lives, wave maybe.

Procedural graphics: draw aliens using pixel patterns with shading/colors, cannon with shape and glow, bunkers as rounded blocks with noise shading, starfield background maybe.

Let me implement pixel-art alien sprites as bitmap arrays with color palettes and draw blocks. Aliens types with different patterns per row. Use procedural variation (squid/crab/octopus), animate by alternating two frames.

Canvas drawing:
- Space background: dark gradient + stars drawn once (offscreen canvas or deterministic array).
- Aliens drawn with pixel grid scaling ~3px.
- Cannon: classic shape, drawn with polygons + glow gradient.
- Bunkers: each bunker defined as grid of blocks with a shape mask (arch at bottom), storage of alive booleans. Damage: when bullet hits, remove blocks within radius. Draw remaining blocks with green gradient.

Collision:
- Player bullet vs aliens: rect.
- Player bullet vs bunker blocks: find blocks overlapping bullet point.
- Enemy bullet vs player: rect, invulnerability.
- Enemy bullet vs bunker.
- Player bullet vs enemy bullet maybe optional.

Aliens reaching player zone: if alien bottom > player zone y (e.g., canvas height - 110) -> game over. Or if aliens descend below line. Also if alien touches cannon.

Alien movement: step system. Grid moves as a block; compute formation bounding box; each step move dx=12*dir; if would hit edge, move down 14 and reverse. Step interval based on aliens remaining: base 600ms down to 120ms. Use a "timeline" step with dt.

Alien bullets: from a random alive alien from bottom of its column. Interval decreasing with aliens killed. Speed ~260 px/s. Lifetime up to 6s / offscreen.

Player bullet: speed 600/s, lifetime 2s, max 2 concurrent shots, cooldown 280ms.

Bunker layout: 4 bunkers at y ~ 470 (above cannon zone). Playfield 900x680? Let's choose logical size 960x680, with HUD drawn in HTML above canvas. Use canvas W=960, H=680. Cannon at y=630. Bunker y=490..560. Aliens start y=80..250. Player zone line at y=590 (aliens reaching it = game over). Aliens descend 14 each edge; after ~24 descents they reach.

Bunker blocks: cell size 8, bunker width maybe 96, height 64. Shape: rectangle with bottom arch (round notch) — classic shape: width 12 cells, height 8 cells, remove bottom-center cells for arch, and bevel top corners. Cell size 9 → 108x72. 4 bunkers spaced.

Damage: for each hit, destroy cells within radius 1.6 cells of hit point (randomized shape). Persist. Each bullet dies on hit.

Visual damage: draw cells with slightly varied green and dark edges. Removed blocks show gap.

Player protection: invulnerable 1.6s after hit, blink drawing alpha; no damage during.

Game states: 'ready'? Start immediately in 'playing'. 'gameover', 'win' overlays with Restart button (HTML button + key R / Enter). Provide restart button always visible in HUD.

Enemy firing: each alien in the bottom-most of column eligible. Timer: fireInterval = max(380, 1100 - kills*40) ms, randomized. Alien bullet speed increases slightly with kills.

Win state: when all aliens dead → 'win' overlay, score remains. Maybe add wave? Keep simple.

Score: each alien 10 pts; increase once per kill (remove bullet). Maybe UFO not needed.

Controls display: HUD line "← → / A D Move • Space Fire • R Restart".

Implement star background procedural via seeded random at init; redraw each frame (cheap).

Let me write code.

Key handling: keydown/keyup; prevent default for space/arrows. Fire with repeat allowed while held (space held fires at cooldown). Use keys.space boolean.

Player position bounded: x within 20..W-20.

Alien drawing: Use pixel patterns strings of 0/1/2 (color variations). Draw with cell 3px scaled.

Alien types:
row 0: squid (top), row1: crab, row2: crab? classic: 2 squid rows, 2 crab rows... use rows: 0 squid, 1 crab, 2 crab, 3 octopus. Colors: magenta, cyan, yellow, green.

Pixel patterns 11x8.

Let me define patterns for each type with two frames.

Squid (11 wide? use 8x8 simpler). I'll make 11x8 patterns.

Crab:
```
0 0 1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 0 1 1 1 0 1 1 0
1 1 1 1 1 1 1 1 1 1 1
1 0 1 1 1 1 1 1 1 0 1
1 0 1 0 0 0 0 0 1 0 1
0 0 0 1 1 0 1 1 0 0 0
```
frame2 changes legs.

Octopus:
```
0 0 0 0 1 1 1 1 1 0 0 0 0
0 0 1 1 1 1 1 1 1 1 1 0 0  ...
```
Hmm keep 11 wide.

I'll write pixel arrays as arrays of strings; use scale; center positions computed.

Actually simpler and still nice: draw aliens with vector shapes: body ellipse, eyes, tentacles using sine animation. But pixel art looks more "Space Invaders". Go pixel art.

Pattern definitions:

const SPRITES = {
  squid: [
    ["0011000...", ...]
  ]
}

Let me carefully craft 11-wide, 8-tall.

squid frame1:
```
0 0 0 1 1 1 1 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 1 1 0
0 1 1 0 1 1 1 0 1 1 0
0 1 1 1 1 1 1 1 1 1 0
0 0 1 1 0 1 0 1 1 0 0
0 0 0 1 0 0 0 1 0 0 0
0 0 1 1 0 0 0 1 1 0 0
```
Hmm the squid is top row classic. Good.

frame2: change last two rows:
```
0 0 1 1 0 0 0 1 1 0 0
0 1 1 0 0 0 0 0 1 1 0
```
eh fine.

crab frame1 as above (11x8), frame2 varies legs:
frame1:
```
0 0 1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 0 1 1 1 0 1 1 0
1 1 1 1 1 1 1 1 1 1 1
1 0 1 1 1 1 1 1 1 0 1
1 0 1 0 0 0 0 0 1 0 1
0 0 0 1 1 0 1 1 0 0 0
```
frame2 last two rows:
```
1 0 1 0 0 0 0 0 1 0 1
0 0 0 1 0 0 0 1 0 0 0  -> hmm
```
Actually variation minimal is fine; animate alternating pattern makes a wiggle.

octopus frame1:
```
0 0 0 1 1 1 1 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 1 1 0
1 1 1 0 1 1 1 0 1 1 1
1 1 1 1 1 1 1 1 1 1 1
0 1 1 1 1 1 1 1 1 1 0
0 0 1 0 1 0 1 0 1 0 0
0 1 0 1 0 0 0 1 0 1 0
```
frame2:
```
0 0 0 1 1 1 1 1 0 0 0
0 0 1 1 1 1 1 1 1 0 0
0 1 1 1 1 1 1 1 1 1 0
1 1 1 0 1 1 1 0 1 1 1
1 1 1 1 1 1 1 1 1 1 1
0 1 1 1 1 1 1 1 1 1 0
0 1 0 1 0 1 0 1 0 1 0  (something)
0 0 1 0 0 0 0 0 1 0 0
```
Fine.

Alien cell size 3 → sprite 33x24 px. Grid spacing x 56, y 48. 8 columns → width 7*56+33 = 425. Center at (960-425)/2? Better compute positions with grid offsets. Let cols=8, rows=4, start x = 150, spacing 64 -> width 7*64+33=481, centered (960-481)/2 = 239. Start y = 70, spacing 50 → last row 220. OK.

Formation movement: each alien has x,y updated together. Simplest: store grid offset (formationX, formationY) and each alien base position; draw at base + offsets. Collisions using absolute positions.

Edge detection: compute min/max of alive aliens' x, if moving direction and max+dir*step > W-20 or min+dir*step < 20 → reverse, descend formationY += 16. Speed: stepInterval decreases based on kills: 550 - kills*35, min 90. Move step maybe 16px.

Alien reaching zone: if any alien y + h >= PLAYER_ZONE (y ~ 600) → game over. Also alien overlapping cannon (y+h >= cannonY) → game over.

Enemy shots: choose random alive alien, but prefer bottom-most in column to make shots come from front row. Simpler random alien. Bullet starts at alien center bottom. Speed 300 + kills*4. Lifetime 5s. Max enemy bullets 4.

Player bullet collision with bunker - check bunker blocks; remove around point.

Player bullet vs enemy bullets maybe skip.

Bunker damage radius: 2 cells radius random.

Draw bunkers: blocks cellSize 9; each alive cell draw rect with palette of 3 shades based on cell index; slightly inset for texture.

Bunkers config: 4 bunkers, width 12 cells (108), height 8 cells (72), positions x = 90 + i*240? W=960: positions centered: bunker centers at 180, 380, 580, 780. Actually 4 bunkers spaced: x start 110, 350, 590, 830? width 108 → 110..218, 350..458, 590..698, 830..938. Good. y start 470.

Shape mask: full except:
- top corners beveled: remove (0,0),(1,0),(cols-1,0),(cols-2,0)? and (0,1) etc. 
- bottom arch: remove cells where row >= rows-3 and within center: for bottom three rows, remove |col-center| < 3 for bottom row, <2 for above, etc. Classic bunker has arch opening. Let's define shape: for row r from rows-3 to rows-1, arch half width = [3,2,2]? We'll compute arch = Math.max(0, 3 - (rows-1-r)) maybe. Let's do:
for r in rows: archTop = rows-3.
if r >= rows-3: let k = r-(rows-3) (0,1,2); half = k===0?2:k===1?2:3; remove if |c - (cols-1)/2| < half. That gives notch.

Bevel top: remove if (c < 1 || c >= cols-1) && r === 0, or (c===0 && r===1)? Actually bevel: for r<2: remove c < 2-r? Like r0: c<2 or c>=cols-2; r1: c<1 or c>=cols-1.

Fine.

Player cannon: draw at x, y (top of cannon base). Body: base trapezoid, barrel, glow. Classic invader cannon shape pixel sprite maybe nicer: use pixel pattern too, 13 wide x 8 as well at scale 4 (52x32). Let's do cannon pixel pattern in cyan/white.

Cannon pattern 13x8:
```
0000001100000
0000011110000
0000011110000
0111111111110
1111111111111
1111111111111
1111011110111
1110000000111
```
Hmm. Simpler vector: base rounded rect + central barrel + side fins. Draw with gradients and glow — looks good procedurally. I'll do polygon.

Cannon: width 56, height 30. At y baseline 630.
- base: rounded rect x-28..x+28, y 612..638 with gradient cyan.
- barrel: rect x-6..x+6, y 590..614.
- fins: triangles.
- glow.

Invulnerability: flash alpha.

HUD: HTML above canvas: score, lives (draw icons), level? and status text. Restart button. Overlay for game over/win drawn on canvas or HTML overlay div. Use HTML overlay positioned over canvas with pointer-events and button.

Simplest: wrap canvas in .stage relative, overlay div absolutely positioned, display flex when state not playing.

Canvas sizing: CSS width 100%, max-width 960, aspect ratio. Use fixed internal 960x680 with `width` attribute and CSS scale. Coordinates given for internal.

Input mapping: keyboard only plus maybe on-screen buttons for mobile (nice touch). Add touch buttons? Task requires keyboard. Add simple on-screen control buttons for touch - optional. Skip or minimal.

Let me write the code now.

Game loop with requestAnimationFrame and dt clamping.

State variables:

const W=960,H=680;
PZ = 610 (player zone / game over line)
cannon = {x: W/2, y: 636, w: 54, h: 30, speed: 420}
keys
playerBullets = [] {x,y,vy,life}
enemyBullets = [] {x,y,vy,life}
aliens = [] {col,row,type,x,y,w,h,alive}
formation = {x:0, y:0, dir:1, stepTimer, stepInterval, drop}
score, lives, invuln, state, kills

Alien base positions computed in resetAliens.

Update:
- if state !== 'playing', still animate stars maybe.
- movement: x += dir*speed*dt when keys.
- shooting: if keys.fire and now-lastShot > cooldown and playerBullets.length < 2 → create bullet.
- update bullets, collision.
- formation step timer; when timer >= interval: step.
  - compute alive aliens abs positions, find minX/maxX, if dir>0 and maxX + 16 > W-24 → dir=-1, formation.y += 16, play drop; else if dir<0 and minX -16 < 24 → dir=1, formation.y+=16; else formation.x += dir*16.
  - Check danger: any alien y+h >= PZ → gameover.
- enemy fire timer.
- score display update.

Alien width 33, height 24.

For edge detection use alien.x + formation offset.

Danger check: if alien.y + 24 >= 596 (cannon top ~586) → game over. Set PZ=600.

On player hit: lives--; if lives<=0 gameover; else invuln=1.6, reset cannon x to center? Classic doesn't reset position; keep position. Clear enemy bullets near? Just invuln.

Enemy bullet vs player: rect check around cannon (x±26, y 590..640).

Win: aliens all dead → state='win'.

Restart: reset everything (aliens, bunkers, score, lives, cannon x, bullets).

Fire rate bound: cooldown 260ms, max player bullets 2, lifetime 2s. Enemy cooldown ~ min 350ms, max 4 bullets, lifetime 4s.

Bunker hit: check each alive cell rect vs bullet point. Remove nearby cells (radius 2 cells). Bullet removed. Also enemy bullets can destroy bunkers.

Let me ensure bunker collision check efficient: 4*12*8=384 cells; fine.

Damage: for cells within radius ~2.2 cells, remove with probability? Use radius and remove all within circle radius r where r = 2 + random. Slight craters. Add random to make ragged.

Draw bunkers each frame from alive flags; 384 rects *4? No, 96 per bunker*4=384 rects total - fine.

Also add "explosions" particle effects for feedback (alien hit sparkles, bunker debris). Nice touch with particles array.

Stars: create 120 stars with x,y,size,twinkle. Draw each frame.

HUD updates: score element, lives icons (draw small hearts or ship icons via characters "▲"? Use CSS-drawn). Use HTML spans with class life and render count. Simpler: text "LIVES" + 3 diamond divs. Draw lives as small canvas? Use unicode "◆". Fine.

Controls display: HTML bar below canvas.

Status overlay: div with title + subtitle + restart button, shown when gameover/win.

Also "ready" state? Start immediately.

Alien animation frame: based on time (e.g., every 400ms toggles) or step toggles; use global animTimer.

Write code now. Also add muted sound? No external assets; can synthesize WebAudio sound for shoots/explosions — nice but optional; add simple beeps with AudioContext (no network). Add sound toggle? Keep small sound effects with try/catch and only after user gesture. I'll include a tiny audio module and a mute button maybe not needed. Keep it: shooting blip, alien hit noise, player hit. Initialize AudioContext on first key. Might complicate; but adds polish. I'll include minimal.

Let me write the file.

Detailed code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Space Invaders — Procedural</title>
<style>
  :root { --cyan:#5ff2e0; --ink:#050912; }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; }
  body {
    background: radial-gradient(circle at 50% 0%, #101b35 0%, #050810 55%, #02040a 100%);
    color:#cfe9ff; font-family: "Courier New", monospace; display:flex; align-items:center; justify-content:center;
    min-height:100%; padding:16px;
    overflow:hidden;
  }
  .shell { width:min(96vw, 960px); display:flex; flex-direction:column; gap:10px; }
  header { display:flex; align-items:flex-end; justify-content:space-between; ... }
  ...
</style>
```

Layout: header with title and stats. Canvas stage.

Given viewport 1200x800 screenshot, canvas should fit: shell width min(96vw,960), aspect 960x680 → height 680 too tall plus header. Body overflow hidden may cut. Use max-height constraint: width min(96vw, 900px, calc((100vh - 150px) * 960 / 680)). Hmm CSS min with calc okay. Let's do .shell { width: min(94vw, 940px); } and canvas { width:100%; height:auto; }. In 800px height, 940 wide → 665 tall + header 60 + controls 40 = 765 > 800 with padding. Tight. Use width: min(92vw, 860px, calc((100vh - 170px) * 1.41)); where 960/680 = 1.4118. For 800h: (630)*1.41 = 889 → min 860. Canvas height = 860*680/960 = 609. + 170 = 779 fits 800. Good.

HUD inside canvas top? I'll put HUD row above canvas (title + score + lives + restart) and controls below.

Overlay inside stage.

Let me write JS carefully.

```js
(() => {
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = 960, H = 680;
canvas.width = W; canvas.height = H;

// ---------- sprites ----------
const SPRITES = {...};

// ---------- stars ----------
const stars = [];
function mulberry32(a){ return function(){ a|=0;a=a+0x6D2B79F5|0; let t=Math.imul(a^a>>>15,1|a); t=t+Math.imul(t^t>>>7,61|t)^t; return ((t^t>>>14)>>>0)/4294967296; } }
const rnd = mulberry32(1337);
for (...) stars.push({x:rnd()*W,y:rnd()*H,r:rnd()*1.4+0.3,phase:rnd()*6.28,speed:rnd()*8+2});

// colors per row
const ALIEN_TYPES = [
 {name:'squid', colors:['#ff7ad9','#ffd1f2'], points:30, sprite: ...},
 ...
]
```

Sprites: store arrays of strings.

Draw sprite function:
```js
function drawSprite(pattern, color, shade, x, y, cell) {
  for (let r=0;r<pattern.length;r++){
    const row = pattern[r];
    for (let c=0;c<row.length;c++){
      if (row[c] === '1') {
        // fill main, with darker bottom edge? 
        ctx.fillStyle = (r%3===2 && c%2===0) ? shade : color;
        ctx.fillRect(x+c*cell, y+r*cell, cell, cell);
      }
    }
  }
}
```
Add glow via shadowBlur maybe expensive; use gradient colors. Add highlight: top rows in lighter color: color for r<3 else shade? Use per-cell shading based on r and c parity (texture). We'll precompute.

Cell size 3 → 11*3=33, 8*3=24. Aliens small but okay. Could use cell 4 → 44x32; grid spacing 60x52, 8 cols → 7*60+44 = 464 centered start (960-464)/2=248. y start 80, spacing 52, 4 rows → last top 236, bottom 268. Good, larger aliens. Use cell 4, w=44, h=32.

Crab pattern 11 wide → 44. Good.

Formation start x offset base: compute baseX = 250, baseY = 80.

Alien object: {col,row,type, alive}.
abs position: baseX + col*60 + formation.x, baseY + row*52 + formation.y.

Store formation.x/y starting 0. Edge detection uses W-20 margin.

Formation step 14 px; interval 560 - kills*32 min 110. With 8 cols, formation width 7*60+44 = 464; start x 250 → right edge 714; margin right 960-24=936 → room 222; fine.

Descend 18 per edge. Player zone: danger if any alien bottom (baseY + row*52 + formation.y + 32) >= 600.

Cannon top around 594. Set PZ = 592.

Bunker y=470, height 72 → bottom 542. Cannon at y=636. Enemy bullets pass between 542 and cannon.

Enemy bullet spawn at alien bottom + 6.

Player bullet start at cannon x, y=586, vy=-620. Lifetime 2s → 1240 px travel (enough to top).

Enemy bullet vy = 260 + kills*6 max 460? Bound speed 420. Lifetime 4s.

Enemy fire: timer; interval = clamp(1200 - kills*45, 320, 1200) with random factor 0.7-1.3. Fire from random alive alien; max 4 bullets.

Bunker creation:

```js
const BUNKER_CFG = {cols:12, rows:8, cell:9, ys:470, xs:[110,350,590,830]};
function makeBunkers(){
  bunkers = BUNKER_CFG.xs.map(x0 => {
    const cells = [];
    for (let r=0;r<rows;r++) for(let c=0;c<cols;c++){
      let on = true;
      // top bevel
      if (r === 0 && (c < 2 || c >= cols-2)) on = false;
      if (r === 1 && (c < 1 || c >= cols-1)) on = false;
      // bottom arch
      if (r >= rows-3) {
        const k = r-(rows-3);
        const half = [2,2,3][k];
        if (Math.abs(c - (cols-1)/2) < half) on = false;
      }
      cells.push({c, r, on});
    }
    return {x:x0, y:470, cells, ...};
  });
}
```
Arch center (cols-1)/2 = 5.5; half 2 → c in 4.5..6.5 → c=5,6 removed for row5; half 2 same row6; half3 → c=4,5,6,7 for row7.

Hmm rows-3..rows-1 = 5,6,7. Good arch 3 rows tall with widths 2,2,4? Let's do half = [1.5,2.5,3.5][k]? Using Math.abs(c-5.5) < half: k0 half 1.5 → c=5,6 (2 wide); k1 half 2.5 → c=4..7 (4); k2 half 3.5 → c=3..8 (6). That's more arch-like. Good.

Bunker cell rect: x = bunker.x + c*9, y = bunker.y + r*9.

Hit test: iterate alive cells, if bullet (point) inside rect, destroy around:
```js
function damageBunker(bullet){
 for bunker for cell if on:
   if px >= x && px <= x+9 && py >= y && py<=y+9:
      // destroy radius
      const cx = cell, cy = cell;
      for each other cell distance <= 2.4 (with random) → on=false
      spawn debris
      return true;
}
```
Randomization: radius = 2.2 + Math.random()*0.9.

Draw bunker: per cell color choose from palette based on hash: ['#3ef08a','#2fce76','#22a75f'] and top rows lighter. Add dark inner shadow at cell borders? draw 8x8 with 1px gap? Use full 9x9 with 1px inset gives texture grid. Draw fillRect(x,y,8,8). Good.

Destroyed cells leave gap — bullets pass.

Collision ordering: player bullet update then check aliens first? Check bunker first if bullet below bunker... Typically bullet travels and hits first thing along path. We'll check aliens before bunker if overlapping alien (aliens above bunkers anyway). Simple: check aliens, then bunkers.

Player bullet vs alien rect: alien w=44,h=32 at abs pos.

Feedback: particles + score popup? Add floating score text. Particles enough plus score HUD. Add flash ring on kill.

Particles: {x,y,vx,vy,life,maxLife,color,size}. Update with gravity? no gravity in space; just drag and fade.

Explosions on alien death: 10 particles; on bunker hit: 5 green; player hit: 20 cyan/red.

Alien animation frame toggles every 300ms (animTimer). Draw frame = Math.floor(t/260)%2.

Also draw a bottom ground line at y=650 with neon gradient, and player-zone dashed line at y=600? A subtle dashed line marking danger zone. Good for feedback. Maybe draw at y=602 very subtle red dashed.

HUD: score, high? Lives icons, wave? Add "SCORE 000000". Keep score 6-digit.

Overlay: title "GAME OVER", subtitle "The invaders reached the surface." or "Lives exhausted." Include final score and button "RESTART". For win: "YOU WIN". Button restarts.

Use button click → restart(); also key R/Enter when not playing.

Also keydown P? Pause optional - implement P pause maybe. Add. Not required, but nice. Careful display. I'll add pause with P or Esc; overlay "PAUSED".

Sound: implement small `sfx` with AudioContext:
```js
let actx=null;
function audio(){ if(!actx) try{actx = new (window.AudioContext||window.webkitAudioContext)();}catch(e){} return actx; }
function beep(freq, dur, type='square', vol=0.05, slide=0){...}
```
Call on user gesture (keydown/click) to create context. Guard.

Aliens' step sound? Maybe tick. Keep sounds: shoot (saw sweep), hit (noise burst), explosion lower, player hit, win/gameover. Mute button? Add M to mute? not necessary. Volume low.

Noise burst using buffer. Implement simple oscillator-based.

Now write everything.

Timing / dt: last time, dt = min(0.05, (now-last)/1000).

Update game only if playing.

Fire control on hold: keys.fire true; cooldown check uses game time accumulated or performance.now. Use performance.now.

Let's code carefully.

```js
const state = {
  mode: 'playing',
  score: 0, lives: 3, kills: 0,
  invuln: 0,
  time: 0,
  animT: 0,
  cannonX: W/2,
  fireCd: 0,
  stepT: 0,
  stepInt: 0.56,
  fireT: 1.2,
  dir: 1,
  fOffX: 0,
  fOffY: 0,
  bullets: [], ebullets: [], aliens: [], bunkers: [], particles: [], rings: []
};
```

Cannon width 56.

resetGame():
- score=0, lives=3, kills=0, invuln=0, mode='playing', cannonX=W/2, bullets/e cleared, particles cleared, dir=1, fOffX=0, fOffY=0, stepT=0, stepInt=0.56, fireT=1.2, fireCd=0
- aliens: rows 4, cols 8; type per row: 0 squid (points 30), 1 crab (20), 2 crab(20), 3 octopus(10). colors.
- bunkers recreate
- updateHUD(); hide overlay.

Alien sprite per type: 0 squid magenta, 1 crab cyan, 2 crab cyan? maybe row colors differ: row0 pink, row1 violet, row2 gold, row3 green. Types: squid (squid sprite), crab, crab, octopus. Colors: ['#ff6bd6','#8f86ff','#ffd166','#4ef08f']. Nice.

Points: 30,20,20,10.

alienAbs(a): {x: 250 + a.col*60 + fOffX, y: 80 + a.row*52 + fOffY}. Store W/H 44/32.

Hmm starting formation width 464, x 250..714 centered at 482 vs W/2=480. Good.

Movement step:

```js
function stepFormation(){
  const alive = state.aliens.filter(a=>a.alive);
  if (!alive.length) return;
  const minX = Math.min(...alive.map(a=>alienAbs(a).x));
  const maxX = Math.max(...alive.map(a=>alienAbs(a).x+ALIEN_W));
  const step = 14;
  let nextDir = state.dir;
  const nx = state.fOffX + state.dir*step;
  const nextMin = minX + state.dir*step;
  const nextMax = maxX + state.dir*step;
  if (nextMin < 30 || nextMax > W-30){
    state.dir *= -1;
    state.fOffY += 18;
    // tick sound / pulse
    shake = 3?
  } else {
    state.fOffX = nx;
  }
  for (const a of alive) if (alienAbs(a).y + ALIEN_H >= DANGER_Y) gameOver('invasion');
}
```
DANGER_Y = 600 (zone top). Bunker top 470 so aliens would hit bunkers? Aliens pass over bunkers visually... They descend and reach player zone, game over. Bunkers should be destroyed by alien contact? Not required. Fine. Maybe aliens colliding with bunkers clears cells too (classic). Not needed.

Note: if alien overlaps bunker, weird visuals. Could remove bunker cells touching aliens; skip.

Step interval: 0.56 - kills*0.03, min 0.1. When edge-reverse, drop 18 → from y bottom 268 (row3) to reach 600: (600-32-268-80?) Let me compute: alien y = 80 + 3*52 = 236; bottom 268. Need fOffY such that y+h >= 600 → fOffY >= 600-268 = 332 → 332/18 ≈ 19 drops. Each drop requires traversing formation width ~ (W-60-464)=436/14 ≈ 31 steps per row. At 0.56 s early = 17s per traverse... 19 drops too slow. Reduce descend step interval faster: maybe drop 22 and alien rows descend faster as they get killed. 15 drops × ~30 steps × avg 0.3s = 135s worst case. Classic games are long. But for playable demo it's fine, player will clear them in ~1-2 min.

Alternatively descend 24 per drop → 14 drops.

Aliens' horizontal movement speed: step interval 0.56 with 14px → 25 px/s, slow-ish but classic. Fine.

Enemy fire should be threatening but fair: player has 3 lives. Bullet speed 250. Interval ~1s.

Player hit check: bullet point inside cannon rect: cannonX-26..+26, y 596..638. Actually cannon drawn base at y 610..640, barrel 586..612. Use hitbox x±24, y 580..640.

Player invuln 1.6s: blink.

Enemy bullets passing bunkers destroy them.

Enemy bullets vs player shots — skip.

Alien fire selection: bottom-most alien per column. Compute eligible: for each alive alien, no alive alien in same col with larger row. Choose random from eligible. Good.

Enemy bullet cap 5. Interval clamp(1250 - kills*40, 300, 1250) * (0.75+Math.random()*0.5). Speed 250 + kills*5 capped 400.

Bullet lifetime: player 2.0, enemy 5.0 with offscreen removal.

Player fire cooldown 0.28s, max 3 bullets? Set 2 concurrent to bound fire rate; cooldown 0.3. I'll use cooldown 0.28 + max 3.

Now HUD update: score text, lives.

Draw functions:

drawBackground: fill gradient, stars twinkle (sin(time*speed+phase)), maybe nebula radial gradient. Also grid horizon lines? Keep stars.

drawGround: bottom strip y 660..680 gradient with cyan line at 660? Cannon baseline at 638. Playfield boundary glow line at y=662. Also side borders subtle.

Danger line at y=600: subtle dashed red with low alpha; label "DANGER ZONE" small.

drawAliens: For each alive alien, sprite based on frame; shadow glow under? Draw pixel sprite with color and shade. Add subtle drop glow via ctx.shadowColor/shadowBlur=8 for the sprite (may cost but 32 sprites fine). Use shadowBlur 6.

drawCannon: glow + polygons.

Cannon design:
- energy glow ellipse under base.
- base: rounded rect x-26,622,52,16 with gradient cyan.
- hull: polygon [(x-20,622),(x-8,604),(x+8,604),(x+20,622)] fill gradient.
- barrel: rect x-4,586,8,20 rounded, brighter.
- side fins: path x-20,622 → x-30,634 → x-20,634.
- top turret dot: circle at (x, 606)? Hmm barrel top.
- invuln blink: globalAlpha.

Also tilt? no.

Draw bullets:
- player: elongated capsule with glow gradient, trail.
- enemy: squiggly zigzag line? Draw lightning bolt/zigzag with glow. Procedural: draw 3-segment zigzag progressing downward based on time. Use line with stroke gradient magenta/red.

Draw bunkers as above.

Particles draw.

Rings: expanding circles on alien kill.

HUD is HTML.

Overlay: HTML div with big text.

Now check restart button and overlay included.

Let's write full file now. Aim ~700 lines.

Edge behavior details for formation: when hits edge, reverse and descend, don't move horizontally that step.

Score increments once per kill — bullet removed on hit so yes.

Restart resets player position (cannonX = W/2), lives, score, bunkers, aliens, bullets.

Now code writing.

Also ensure focus: keyboard events on window, prevent default for space/arrows.

Mobile buttons: add small on-screen buttons under canvas (◀ ▶ FIRE) that set keys via pointer events; helpful but optional. I'll add three buttons in controls row with touch handlers; they use pointerdown/up. Fine.

Audio:

```js
let audioCtx = null, muted = false;
function ac(){ if (!audioCtx) { try { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); } catch(e) { audioCtx = null; } } if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume(); return audioCtx; }
function tone(freq, dur, type, vol, slideTo) {
  const a = ac(); if (!a || muted) return;
  const o = a.createOscillator(), g = a.createGain();
  o.type = type || 'square'; o.frequency.setValueAtTime(freq, a.currentTime);
  if (slideTo) o.frequency.exponentialRampToValueAtTime(Math.max(30,slideTo), a.currentTime + dur);
  g.gain.setValueAtTime(vol||0.04, a.currentTime);
  g.gain.exponentialRampToValueAtTime(0.0001, a.currentTime + dur);
  o.connect(g).connect(a.destination); o.start(); o.stop(a.currentTime + dur + 0.02);
}
function noise(dur, vol){...}
```

Noise buffer create once.

Add mute toggle button in HUD "SOUND". Eh, keep simple: sound on. Some environments block audio until gesture — we create on keydown.

Let's write.

One more consideration: overlay should not intercept when playing; use `hidden` attribute or class. CSS .overlay { display:none } .overlay.show{display:flex}.

Game over messages:
- lives 0: "GAME OVER" / "Your last cannon was destroyed." 
- invasion: "GAME OVER" / "The invaders reached the surface."
- win: "WAVE CLEARED" / "All invaders eliminated."

Stats in overlay: final score.

Pause: P toggles. overlay separate showing "PAUSED" with resume hint. Maybe skip pause overlay to avoid complexity of restart button visibility. I'll implement pause with simple text drawn on canvas; keys handled. Actually simpler: no pause. Required functionality only. But a pause is nice... skip.

Now consider that when state mode 'gameover'/'win', update stops but we still need animation of particles fading. Allow particles update always. Keep simple: update particles and stars always.

Write the code.

Bunker draw colors: base green '#2ee06e'; use 3 shades by hash of (c*7+r*13)%3.

Damage visualization: gap plus darkened neighbors? fine.

Bullet-bunker collision may hit cells that are adjacent to destroyed; only alive cells checked so passes through gaps. Good.

Hits from both sides: player and enemy bullets both call damageBunker.

Now write.

Details for alien draw with pixel shading: create small helper drawing columns; colors: main color, dark shade (multiply?) — define per row colors both bright and dark in palette. E.g. type colors: {main:'#ff6bd6', dark:'#b62f92', light:'#ffd6f4'}.

For each '1' cell: fill color = r < 2 ? light : (r > 5 ? dark : main)? Gives vertical gradient. Plus glow shadow of main color. Nice enough.

Also add bottom glow ellipse below alien? no.

Let me now write file via write tool.

Code:

```js
'use strict';
(() => {
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const W = 960, H = 680;
  canvas.width = W; canvas.height = H;

  const DANGER_Y = 600;
  const ALIEN_W = 44, ALIEN_H = 32;
  const ALIEN_CELL = 4;
  const BASE_X = 250, BASE_Y = 78;
  const COL_GAP = 60, ROW_GAP = 52;
  const COLS = 8, ROWS = 4;
  const CANNON_Y = 640; // baseline
  const CANNON_W = 56;

  const SPRITES = {
    squid: [
      [
        "0000111111100",
        ...
```

Wait 11 wide but strings must be consistent length. I'll build pattern arrays of 11 chars each carefully.

squid frame A (11x8):
row0: "00001111100" (11?) count: 0000(4)+11111(5)+00(2)=11 ✓
row1: "00011111110" = 3+7+1=11
row2: "00111111111" = 2+9=11
row3: "00110111011" hmm need eyes holes: "01101110110"? Let me use simpler symmetric:
row3: "00110111011" = 2+2+1+3+1+2? count chars: 0,0,1,1,0,1,1,1,0,1,1 = 11 ✓ (eyes at index 4 and 8)
row4: "00111111111" ✓
row5: "00011010110" = 3+2+1+1+1+... count: 0,0,0,1,1,0,1,0,1,1,0 = 11 ✓
row6: "00001010100" = 4+1+1+1+1+1+2? count: 0,0,0,0,1,0,1,0,1,0,0 = 11 ✓
row7 frameA: "00110000011"? hmm legs: "00101000100" count 0,0,1,0,1,0,0,0,1,0,0=11 ✓ (frame A legs)
frame B row6/7 differ: row6 "00001010100"; row7 "00110101100"? count: 0,0,1,1,0,1,0,1,1,0,0=11 ✓. Just wiggle.

Crab frame A (11x8):
row0: "00100000100" (0,0,1,0,0,0,0,0,1,0,0)=11 ✓ (antenna)
row1: "00010001000" = 11 ✓
row2: "00111111110" = 2+8? count 0,0,1,1,1,1,1,1,1,1,0 = 11 ✓
row3: "01101110110" = 0,1,1,0,1,1,1,0,1,1,0=11 ✓
row4: "11111111111" ✓
row5: "10111111101" = 1,0,1,1,1,1,1,1,1,0,1 ✓
row6: "10100000101" = 1,0,1,0,0,0,0,0,1,0,1 ✓
row7: "00011001100"? wiggle: A: "00011001100" count= 0,0,0,1,1,0,0,1,1,0,0=11 ✓ ; B: "00110000110"? count=11? 0,0,1,1,0,0,0,0,1,1,0=11 ✓
row0/1 might swap for frame, but fine keep same, only row6/7 differ in B: row6 "10100000101", row7 "00110000110".

Octopus frame A:
row0: "00011111110"?? Classic octopus has a wide head. width 11:
row0: "00001111100" (4+5+2=11)
row1: "00011111110"
row2: "00111111111"
row3: "01101110110"
row4: "11111111111"
row5: "01111111110"? count 0,1*9?,0 = 11 ✓
row6: "00101010100" = 2+1+1+1+1+1+1+1+2 = wait count chars: 0,0,1,0,1,0,1,0,1,0,0 = 11 ✓
row7: "01010001010" = 0,1,0,1,0,0,0,1,0,1,0 = 11 ✓ (frame A)
frame B row7: "00101010100" maybe; row6 "00101010100" same... B: row6 "01010101010" count=11? 0,1,0,1,0,1,0,1,0,1,0 = 11 ✓; row7 "10100000101"? count=11 ✓.

Fine.

Type mapping rows: 0 squid, 1 crab, 2 crab, 3 octopus. Colors: ['#ff6bd6','#a78bfa','#ffd166','#4ef08f'] with darks.

Actually two crab rows same color is fine but vary: row1 violet, row2 gold. ok.

point values: [30,20,20,10] but per type? Score based on row. Use ROW_POINTS = [30,20,20,10].

Kill: score += ROW_POINTS[row]; kills++.

Now code the main loop.

State object as described.

Alien abs helper:
```js
function ax(a){ return BASE_X + a.col*COL_GAP + S.fOffX; }
function ay(a){ return BASE_Y + a.row*ROW_GAP + S.fOffY; }
```
S = state.

Update:

```js
function update(dt){
  S.time += dt;
  updateParticles(dt);
  if (S.mode !== 'playing') return;
  S.anim += dt;
  // cannon movement
  let mv = 0;
  if (keys.left) mv -= 1;
  if (keys.right) mv += 1;
  S.cannonX = clamp(S.cannonX + mv*CANNON_SPEED*dt, 34, W-34);
  // invuln
  if (S.invuln > 0) S.invuln = Math.max(0, S.invuln - dt);
  // fire
  S.fireCd -= dt;
  if (keys.fire && S.fireCd <= 0 && S.bullets.length < 3) {
    S.bullets.push({x:S.cannonX, y:590, vy:-640, life:1.9});
    S.fireCd = 0.26;
    tone(880, 0.09, 'square', 0.03, 320);
  }
  // player bullets
  for (let i=S.bullets.length-1;i>=0;i--){
    const b = S.bullets[i];
    b.y += b.vy*dt; b.life -= dt;
    let dead = b.y < -20 || b.life <= 0;
    if (!dead) dead = hitAlien(b);
    if (!dead) dead = hitBunker(b, 1);
    if (dead) S.bullets.splice(i,1);
  }
  // enemy fire timing
  S.fireT -= dt;
  if (S.fireT <= 0){
    enemyFire();
    const base = Math.max(0.32, 1.15 - S.kills*0.04);
    S.fireT = base * (0.7 + Math.random()*0.7);
  }
  // enemy bullets
  for (...){
    b.y += b.vy*dt; b.life -= dt;
    let dead = b.y > H+20 || b.life <= 0;
    if (!dead) dead = hitBunker(b, -1);
    if (!dead && S.invuln <= 0 && Math.abs(b.x - S.cannonX) < 22 && b.y > 578 && b.y < 646) {
      playerHit(); dead = true;
    }
    if (dead) splice...
  }
  // formation stepping
  S.stepT += dt;
  const interval = Math.max(0.085, 0.55 - S.kills*0.03);
  if (S.stepT >= interval){
    S.stepT = 0;
    stepFormation();
  }
  // win check
  if (S.aliens.every(a=>!a.alive)) win();
}
```

Note player bullet speed 640, life 1.9 → 1216 px from 590 → passes top. Good.

hitBunker returns true if a cell is destroyed:
```js
function hitBunker(b, side){
  for (const bk of S.bunkers){
    if (b.x < bk.x - 12 || b.x > bk.x + bk.w + 12) continue;
    for (const cell of bk.cells){
      if (!cell.on) continue;
      const x = bk.x + cell.c*BCELL, y = bk.y + cell.r*BCELL;
      if (b.x >= x && b.x <= x+BCELL && b.y >= y && b.y <= y+BCELL){
        // crater
        const rad = 2.1 + Math.random()*0.8;
        for (const o of bk.cells){
          if (!o.on) continue;
          const ox = bk.x + o.c*BCELL + BCELL/2, oy = bk.y + o.r*BCELL + BCELL/2;
          const d = Math.hypot(ox-b.x, oy-b.y);
          if (d <= rad*BCELL*0.75) { o.on = false; ... debris particles maybe a few }
        }
        cell.on = false;
        spawnDebris(b.x, b.y, bk);
        tone(160, 0.07, 'square', 0.02, 90);
        return true;
      }
    }
  }
  return false;
}
```
Careful loop over cells while modifying `on` in inner loop — fine.

Radius: BCELL=9; rad (in cells) 2.1-2.9 → distance check in px: rad*9*0.75 ≈ 14-19 px. Center cell plus neighbors gets removed. Reasonable.

Debris particles: 6 green.

Bunker w = 12*9 = 108, h=72.

Bunker positions: xs [110, 350, 590, 830], y 472. Ensure cannon path: cannon at 640 below bunkers 544. Good.

Aliens start bottom row 236+32=268; bunkers top 472. Gap; enemy bullets from aliens fall.

Enemy fire selects bottom-most alien per column then random; bullet x,y.

hitAlien:
```js
function hitAlien(b){
  for (const a of S.aliens){
    if (!a.alive) continue;
    const x = ax(a), y = ay(a);
    if (b.x > x-3 && b.x < x+ALIEN_W+3 && b.y > y-3 && b.y < y+ALIEN_H+3){
      a.alive = false;
      S.score += ROW_POINTS[a.row];
      S.kills++;
      addExplosion(x+ALIEN_W/2, y+ALIEN_H/2, alienColor(a.row));
      addRing(x+ALIEN_W/2, y+ALIEN_H/2, alienColor(a.row));
      updateHUD();
      tone(300, 0.14, 'sawtooth', 0.04, 80);
      if (S.aliens.every(a=>!a.alive)) win();
      return true;
    }
  }
  return false;
}
```
Calling win inside then update continues—win sets mode != 'playing' and shows overlay; fine, update continues remaining bullets but mode checked next frame. Could early-out. It's ok.

stepFormation with danger check:
```js
function stepFormation(){
  const alive = S.aliens.filter(a=>a.alive);
  if (!alive.length) return;
  let minX=Infinity,maxX=-Infinity;
  for (const a of alive){ const x=ax(a); minX=Math.min(minX,x); maxX=Math.max(maxX,x+ALIEN_W); }
  const nextMin = minX + S.dir*14, nextMax = maxX + S.dir*14;
  if (nextMin < 26 || nextMax > W-26){
    S.dir *= -1;
    S.fOffY += 18;
    S.shake = 5;
    tone(110, 0.12, 'triangle', 0.03, 70);
  } else {
    S.fOffX += S.dir*14;
  }
  for (const a of alive){
    if (ay(a) + ALIEN_H >= DANGER_Y){ gameOver('The invaders reached the surface.'); return; }
  }
}
```

Wait if nextMin<26, reverse but the current position may already be inside margin; fine since formation starts centered.

Danger zone: DANGER_Y 600, cannon top ~586. Aliens reaching y+h>=600 → game over.

Player hit:
```js
function playerHit(){
  S.lives--;
  S.invuln = 1.7;
  addExplosion(S.cannonX, 610, '#6ff5ff', 22);
  S.shake = 12;
  tone(...);
  updateHUD();
  if (S.lives <= 0) gameOver('Your last cannon was destroyed.');
}
```
Also destroy enemy bullets near? no.

Game over:
```js
function gameOver(msg){ if (S.mode !== 'playing') return; S.mode='gameover'; showOverlay('GAME OVER', msg, '#ff6b8b'); }
function win(){ if (S.mode !== 'playing') return; S.mode='win'; S.score += S.lives*50; updateHUD(); showOverlay('WAVE CLEARED', 'Every invader has been eliminated.', '#5fffd0'); }
```
Bonus points for remaining lives — display? fine but keep score simple. Add bonus might confuse "clear aliens shows win state" - fine. I'll include bonus and mention in subtitle "Lives bonus +150". Let's include: msg = `All invaders eliminated. Lives bonus +${S.lives*50}.` Good.

Overlay show sets content, classList add 'show'.

restart():
- hide overlay, reset.

Keyboard:
```js
const keys = {left:false,right:false,fire:false};
window.addEventListener('keydown', e => {
  const k = e.key.toLowerCase();
  if (['arrowleft','arrowright','arrowup','arrowdown',' '].includes(k) || k==='spacebar') e.preventDefault();
  ac(); // init audio
  if (k==='arrowleft'||k==='a') keys.left = true;
  if (k==='arrowright'||k==='d') keys.right = true;
  if (k===' '||k==='spacebar') keys.fire = true;
  if (k==='r' && S.mode!=='playing') restart();
  if (k==='enter' && S.mode!=='playing') restart();
});
```
Note e.key for space is ' ' and lowercase is ' '. ok. Also prevent page scroll.

keyup similar; blur resets keys.

Restart button: `document.getElementById('restartBtn').addEventListener('click', restart);` and overlay button.

On-screen buttons: pointerdown sets keys, pointerup/leave/cancel clears. Also prevent default to avoid focus/scroll. Use document.getElement.

drawing:

```js
function draw(){
  // shake
  ctx.setTransform(1,0,0,1,0,0);
  ctx.clearRect(0,0,W,H);
  drawBackground();
  const sh = S.shake; if (sh>0){ ctx.save(); ctx.translate((Math.random()-0.5)*sh, (Math.random()-0.5)*sh); }
  drawDangerLine();
  drawBunkers();
  drawAliens();
  drawEnemyBullets();
  drawCannon();
  drawPlayerBullets();
  drawParticles();
  if (sh>0) ctx.restore();
  drawVignette();
}
```
Shake decays in updateParticles or update always: S.shake = Math.max(0, S.shake - dt*40).

drawBackground: gradient fill; stars with twinkle alpha; subtle nebula radial gradient; horizon glow at bottom.

drawPlayerBullets: gradient capsule:
```js
for (b of S.bullets){
  ctx.save();
  ctx.shadowColor = '#7fffe0'; ctx.shadowBlur = 12;
  const g = ctx.createLinearGradient(0,b.y-14,0,b.y+4);
  g.addColorStop(0,'#ffffff'); g.addColorStop(0.4,'#8ffff0'); g.addColorStop(1,'rgba(60,255,220,0)');
  ctx.fillStyle = g;
  ctx.fillRect(b.x-2.5, b.y-12, 5, 18);
  ctx.restore();
}
```
Trail behind.

Enemy bullets: draw zigzag with neon magenta:
```js
ctx.strokeStyle='#ff5f9e'; shadow; lineWidth 3;
ctx.beginPath();
const t = S.time*30;
for (let i=0;i<4;i++){
  const yy = b.y - i*6;
  const xx = b.x + Math.sin(t + i*1.4)*4;
  i? ctx.lineTo(xx,yy) : ctx.moveTo(xx,yy);
}
ctx.stroke();
circle head.
```

Cannon:
```js
function drawCannon(){
  const x = S.cannonX, base = CANNON_Y;
  ctx.save();
  if (S.invuln > 0 && Math.floor(S.time*14)%2===0) ctx.globalAlpha = 0.35;
  // glow
  const glow = ctx.createRadialGradient(x, base-16, 2, x, base-16, 60);
  glow.addColorStop(0,'rgba(90,255,230,0.35)'); glow.addColorStop(1,'rgba(90,255,230,0)');
  ctx.fillStyle = glow; ctx.beginPath(); ctx.ellipse(x, base-16, 60, 40, 0, 0, Math.PI*2); ctx.fill();

  ctx.shadowColor = '#5ff2e0'; ctx.shadowBlur = 16;
  // base
  let g = ctx.createLinearGradient(0, base-16, 0, base);
  g.addColorStop(0,'#b9fff6'); g.addColorStop(0.5,'#38e8cf'); g.addColorStop(1,'#0d7f86');
  ctx.fillStyle = g;
  roundRect(x-28, base-14, 56, 14, 4); ctx.fill();
  // hull trapezoid
  ctx.beginPath();
  ctx.moveTo(x-20, base-14); ctx.lineTo(x-8, base-30); ctx.lineTo(x+8, base-30); ctx.lineTo(x+20, base-14); ctx.closePath();
  ctx.fillStyle = g; ctx.fill();
  // barrel
  ctx.fillStyle = '#eafffb';
  roundRect(x-4, base-46, 8, 18, 3); ctx.fill();
  // tip
  ctx.fillStyle = '#ff9de0';
  ctx.fillRect(x-3, base-50, 6, 5);
  // fins
  ctx.beginPath();
  ctx.moveTo(x-20, base-14); ctx.lineTo(x-32, base-2); ctx.lineTo(x-20, base-2); ctx.closePath();
  ctx.moveTo(x+20, base-14); ctx.lineTo(x+32, base-2); ctx.lineTo(x+20, base-2); ctx.closePath();
  ctx.fillStyle = '#19b3b0'; ctx.fill();
  ctx.restore();
}
```
roundRect helper using ctx.beginPath + arcTo or use ctx.roundRect? roundRect supported in modern browsers; implement own helper.

Cannon hitbox y 578..646, x±22 — matches barrel and base.

Ground strip drawn in background: gradient at bottom with line at y=base. Draw in background: 
```js
ctx.fillStyle = 'rgba(5,18,30,0.9)'; ctx.fillRect(0, CANNON_Y-2, W, H-CANNON_Y+2);
ctx.strokeStyle='rgba(95,242,224,0.35)'; line at CANNON_Y-2.
```
Cannon base bottom at CANNON_Y → sits on line y=640. Ground strip from 640 to 680. Good.

Aliens color per row:
```js
const ROW_STYLE = [
 {main:'#ff77d9', light:'#ffd0f4', dark:'#a52f86'},
 {main:'#a98bff', light:'#ded0ff', dark:'#5b3fb5'},
 {main:'#ffd166', light:'#fff0c0', dark:'#b8791a'},
 {main:'#4ef08f', light:'#c6ffdf', dark:'#1e9c58'},
];
```
Draw sprite:
```js
function drawAlien(a){
  const pat = SPRITES[a.type][S.frame];
  const x = ax(a), y = ay(a);
  const st = ROW_STYLE[a.row];
  ctx.save();
  ctx.shadowColor = st.main; ctx.shadowBlur = 10;
  for (let r=0;r<pat.length;r++){
    for (let c=0;c<pat[r].length;c++){
      if (pat[r][c] !== '1') continue;
      ctx.fillStyle = r < 2 ? st.light : r > 5 ? st.dark : st.main;
      ctx.fillRect(x + c*4, y + r*4, 4, 4);
    }
  }
  ctx.restore();
}
```
frame toggling: S.frame = Math.floor(S.time*3.2) % 2 (when playing) else keep.

Aliens drawn with 44x32 but pattern is 11 wide *4 = 44 ✓ and 8 rows*4 = 32 ✓.

Bunkers draw:
```js
function drawBunkers(){
  for (const bk of S.bunkers){
    for (const cell of bk.cells){
      if (!cell.on) continue;
      const x = bk.x + cell.c*9, y = bk.y + cell.r*9;
      const shade = ((cell.c*7 + cell.r*13) % 3);
      ctx.fillStyle = cell.r < 2 ? '#7dffb0' : ['#39e37b','#2ecb6c','#26b35f'][shade];
      ctx.fillRect(x, y, 8, 8);
      // inner highlight
      ctx.fillStyle = 'rgba(255,255,255,0.08)';
      ctx.fillRect(x, y, 8, 2);
    }
    // subtle base shadow? 
  }
}
```
Add glow shadow maybe one shadow for all cells — expensive setting shadow per fill? Set shadowBlur once before loops with color '#39e37b'. Fine.

Particles drawing simple circles with alpha.

drawDangerLine: dashed red at y=DANGER_Y with alpha 0.13 and text? Maybe subtle line only. Add small ticks "▽" no. Just dashed line.

Vignette: radial gradient overlay? Can add using precomputed? Creating gradient each frame ok.

HUD update function sets score & lives DOM; render lives as spans:
```js
livesEl.innerHTML = '';
for (let i=0;i<S.lives;i++){ const s = document.createElement('span'); s.className='life'; livesEl.appendChild(s); }
```
Plus text? Use label "LIVES" separate. Use CSS diamond with clip-path. If css clip-path works fine.

Simpler: build HTML string of 3 slots with 'filled'/'empty':
```js
livesEl.innerHTML = [0,1,2].map(i => `<span class="life ${i < S.lives ? 'on':''}"></span>`).join('');
```

Score display padded: String(score).padStart(6,'0').

Overlay markup:
```html
<div class="overlay" id="overlay">
  <div class="panel">
    <div class="title" id="ovTitle">GAME OVER</div>
    <div class="sub" id="ovMsg"></div>
    <div class="ovscore" id="ovScore"></div>
    <button id="ovBtn">RESTART</button>
    <div class="hint">Press R or Enter</div>
  </div>
</div>
```

showOverlay(title,msg,color) sets ovTitle text & color, msg, score text, add show.

updateHUD also updates ovScore? Only on end.

Restart button in header: `↻ RESTART`.

Game loop:

```js
let last = performance.now();
function frame(now){
  let dt = (now-last)/1000; last = now;
  dt = Math.min(dt, 0.05);
  update(dt);
  draw();
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
```
Also handle visibility change → last reset? dt clamped.

Shake decay in update before mode check.

Also pause when tab hidden? fine.

Reset aliens positions:
```js
S.aliens = [];
for r, c: S.aliens.push({col:c,row:r,type: r===0?'squid': r===3?'octopus':'crab', alive:true, row});
```
Wait type field vs row. Use a.type.

row points: ROW_POINTS.

Also alien type per row: 0 squid, 1 crab, 2 crab, 3 octopus.

Bunker creation function returns cells with {c,r,on}.

Also store bunker w/h for quick bounds.

Initialize restart() at load; updateHUD.

Controls line HTML: 
```
<div class="controls">
  <span><kbd>←</kbd><kbd>→</kbd> / <kbd>A</kbd><kbd>D</kbd> Move</span>
  <span><kbd>SPACE</kbd> Fire</span>
  <span><kbd>R</kbd> Restart</span>
  <span class="touch">buttons...</span>
</div>
```

On-screen buttons might break layout; include three buttons: ◀ ▶ and FIRE. Show always (useful). Position in controls row.

Let me ensure pointer events don't cause double fires — using keys flags works.

Now write the whole file.

CSS details:
- body font, header with title gradient text "SPACE INVADERS" and subtitle "PROCEDURAL DEFENSE".
- .hud: display flex; stat blocks with label.
- stage: position relative; border 1px solid rgba; border-radius; box-shadow; overflow hidden; background #02060e.
- canvas display block; width 100%; height auto.
- overlay: absolute inset 0; display flex; opacity 0; pointer-events none; transition; background rgba(2,8,16,0.72); backdrop-filter blur(3px).
- .overlay.show { opacity 1; pointer-events auto; }
- panel centered with border glow.
- Buttons neon.

Header title font-size clamp.

Let me write the file now. I need to be careful with the width min constraints.

```css
.shell{
  width: min(94vw, 880px, calc((100vh - 172px) * 1.4118));
  display:flex; flex-direction:column; gap:10px;
}
```
If 100vh - 172 is negative on tiny screens, width negative → invalid; add max(320px, ...) via max() inside min: width: min(94vw, 880px, max(320px, calc((100vh - 172px)*1.4118))). Hmm min of max... If viewport height 300 → max gives 320 → width min(...,320). Fine.

Header height maybe ~54. controls ~34, gaps 20, body padding 32 → 140ish. Use 160.

Actually since I want screenshot at 1200x800: 100vh-160=640 → *1.4118=903 → min(1128,880,903) = 880. Canvas height 880/1.4118=623. Header+controls ~ 54+34+30 gap ≈ 118 + padding 32 → 773 → fits 800. Good.

Now let me write.

Also make sure `drawBackground` uses stored stars. Nebula gradient maybe create once into a cached offscreen canvas for performance. Just draw radial gradient each frame, fine.

Write file.

Now run in browser, inspect console and screenshot.

The screenshot shows the game looks good. Aliens appear as circles rather than the pixel sprites... Actually they look like blobs because cell size 4 and shadow blur 9 smears them. The detail is lost—the patterns look like oval blobs. Let me look closer: row 1 pink blobs with antennae; they look round, not like the sprites. The shadowBlur is making them fuzzy. Also "collect alien pixels" not legible. Maybe reduce shadowBlur to 5 and use cell 4 (44x32), should show patterns. The screenshot is scaled down to 1200x800 from 960 canvas, so ~1.25 scale. The sprites look like circles because my patterns are actually similar? Squid pattern is roughly oval with jagged bottom. Rendered small it reads roundish. Crab rows look similar too. Let's zoom screenshot via browser maybe not possible. Could increase alien size a bit for clarity: cell 4 → patterns 44x32 at 960 internal then CSS 880 wide → 40x29 px. Hmm.

Let me check by taking a screenshot after zooming? Instead, I can inspect with a clip? The browser tool only full screenshots. I could temporarily set canvas CSS width larger? Not worth it. Better to improve sprite clarity: reduce shadowBlur to 5, add dark outline? Pixel patterns could be more distinct if I use distinct silhouettes:
- squid: tall narrow with pointed bottom tentacles
- crab: wide with arms up
- octopus: rounded with legs.

My patterns currently: squid rows 0-4 wide oval, row5-7 tentacles. Looks like a blob. Let me redesign sprites more recognizable with sharper features.

Also aliens positioned at 44px wide with 16px gaps—fine.

Let me test functionality first: move and fire using keyboard via browser tool. The browser tool has key action with text. Let me click canvas to focus, press ArrowLeft, screenshot, then space.

Check state via canvas pixel checking difficult; inspect DOM only.

Let me fire: press space, screenshot after.

First improve sprites then test. Actually test first to ensure mechanics; sprites later if time.

Press keys: browser key action with text "ArrowLeft"? The tool type/key - "key" likely takes text like "Space" or "ArrowLeft". Let's try holding? The key action probably a single press (keydown+keyup) which might not hold long enough for visible movement. Better: use key action with text multiple? Let me test holding via repeated keydown? Browser tool likely dispatches keydown then keyup. Movement over a single frame dt tiny — no visible movement. Fire: keydown once sets fire true then keyup → might not fire if both before a frame. Hmm. Using on-screen button click won't hold either.

I can evaluate via injecting JS? No evaluate tool. But browser "type" action types text into focused element; key events maybe with hold.

Alternative: simulate gameplay by temporarily auto-testing via URL/hash or a debug script in page? I can use the browser click on pad buttons (pointerdown/up). Click = down+up quickly; again may not hold.

Maybe the key action supports repeated key hold? Let me just try pressing ArrowLeft and screenshot to compare cannon position.

Frames advanced (aliens animated frame). Cannon didn't move (single tap). Enemy bullet appeared. Also note aliens overlap gaps: alien sprites look like blobs due to shadow and pattern; rows 2 & 3 shapes look almost identical blobs. Need sharper sprites.

I can test firing by clicking canvas then key "Space"? A single space keydown probably sets fire true then keyup before frame → no shot. But maybe keydown and keyup are in different frames. Let's try pressing Space and screenshot.

Also can test by dispatching synthetic held keys via a debug approach? No eval tool. But I can add an autoplay/demo mode triggered by URL hash (e.g., ?autotest) to verify mechanics programmatically, then remove or keep harmless. Or add an invisible "test harness" only when location.hash === '#test' which simulates keys. That would let me screenshot verification of firing/hits.

Actually simpler: the browser key action may keep the key pressed (some tools hold). Test space, see result.

Space didn't fire visibly (no bullet). Likely key event too fast. Need a way to verify. I'll add a debug/demo hook: if URL contains `#auto`, run scripted input over time (e.g. hold fire, move). This stays harmless but lets me verify via screenshots. Alternatively use browser "drag" or "click" hold? Click on pad = pointerdown then up quickly as well.

Another way: use `browser` action "type" with text maybe triggers keypress per character but no hold.

Better approach: add a tiny test harness that responds to URL hash `#test-fire`, which sets keys.fire = true for 2 seconds at start. And `#test-move-left` etc. But I need to verify multiple behaviors: movement, firing, bunker damage, alien hit/score, restart.

I could add a general debug mode where when hash includes `#demo`, the game auto-plays: cannon moves left/right, fires continuously. That will produce hits, bunker damage, score. Then screenshot after a few seconds. Removing later isn't necessary, but keeping a demo mode might be odd. I can add a hidden keyboard shortcut? Actually auto-play could interfere with users only if hash set. Keep it, but ideally remove final? It's harmless dead code but adds clutter. Could implement via devtools? No eval.

Alternatively, use browser click on the on-screen FIRE button and hold via drag? Click is down+up.

I'll add a temporary debug harness in the page, verify, then remove it. Add script block at end:

```js
if (location.hash.includes('autotest')) {
  keys.fire = true;
  // oscillate movement
  let t=0;
  setInterval(()=>{ ... }, 100);
}
```
But autotest needs shooting to hit bunkers/aliens: cannon at center x=480; firing straight up hits aliens eventually (column under 480: alien at col? 250+ c*60+22; col 3 center 432, col 4 center 492). 480 between; with width 44, alien cols 3 spans 430-474, col4 490-534. Bullet x=480 might pass between columns! Hmm. Player bullet width visual 5 but collision only point x. Shot at 480 hits neither col 3 (ends 474) nor col 4 (starts 490). But it will hit bunker at x 350..458? no. Bunker 3 at 590..698 no. So center shots at 480 pass between bunkers and between alien columns, missing everything. That's actually classic (centered between slots), but for the game, gaps: bunker at 350..458 and 590..698, cannon at 480 in gap between bunkers — shooting straight up goes between bunkers and between alien columns. Player must move. Fine.

For autotest, move left/right while firing to hit.

Also concern: spawning at x=480 firing straight up yields no hit—that's fine.

Let me think about hitboxes: alien collision checks b.x within x-3..x+W+3, so col3 right edge 474+3=477 < 480 → miss; col4 left 490-3=487 >480 → miss. Yes.

Bunker gap between bunkers 458..590 is 132 wide. Cannon width 54 at center fits.

For verification, I'll add autotest that moves cannon to x 410 (hit bunker 2? bunker 2 x=350..458 at 410; yes will destroy bunker) then to x 452 (hit alien col 3 maybe). Scripted inputs.

Plan autotest keyframes:
- t 0..1.0s: left? cannon starts 480; hold left for ~0.3s → x 480-129=351. Hmm need precise. Use pad simulation keys.
- Better autotest directly sets S? Not accessible (IIFE). But I can expose a debug API conditionally: `window.__game = {S, keys, resetGame}` when hash autotest. That's easy and lets me use... but I can't run JS from browser tool. No eval. So scripted.

Autotest simplest: hold fire and sweep left/right continuously; after several seconds screenshot shows destroyed aliens, score, damaged bunker. Movement test visible via cannon position differs.

Script:
```js
const demo = location.hash.includes('demo');
if (demo) {
  let t = 0;
  keys.fire = true;
  setInterval(() => {
    t += 0.1;
    const px = (t % 6);
    keys.left = px > 3; keys.right = px <= 3;
  }, 100);
}
```
This sweeps. To hit aliens quickly, bullets take ~0.6s to reach row3 (y 268..), plenty.

But wait: fire only when mode playing. It auto-restarts? no. Fine for ~10s test.

Better targeted test: set keys.right true for 1.6s then left... Actually sweeping works.

Also verify restart: after autotest, click Restart button and screenshot: formation full, bunkers restored, score 0, lives 3, cannon centered.

Let me also improve sprite legibility before testing. Current sprites look like rounded blobs with shadowBlur. Increase contrast: reduce shadowBlur to 6, add distinct shapes. Let me redesign:

Squid (top row) 11x8: tall pointed head with tentacles:
```
"00001111100",
"00111111111",
"01111111111",
"11101110111",  -> eyes
"11111111111",
"01111111110",
"00110101100",
"01100000110"
```
Crab (rows1-2): wide with pincers raised:
```
"11000000011"? Hmm crab arms up at top corners then eyes.
```
Classic crab:
```
"00010001000"
"00111011100"? 
```
Let me use classic 11x8 crab:
row0: "00100000100"
row1: "00010001000"
row2: "00111111110"
row3: "01101110110"
row4: "11111111111"
row5: "10111111101"
row6: "10100000101"
row7: "00011001100"
This is already what I have — but at 4px cells it looks like a blob due to blur. In the screenshot rows 1&2 do show antenna bumps. It's okay honestly; the neon blur aesthetic is fine. But rows 1 (purple) and 2 (gold) look almost identical (correct, both crab) and row3 octopus looks similar too. Adding distinct top antenna and different silhouette helps.

Octopus: round head wider:
```
"00001111100",
"00111111110",
"01111111111",
"11011111101"? eyes at edges... 
"11111111111",
"11111111111",
"01101010110",
"11010001011"
```
Bottom legs spread wide.

Squid: narrow with pointy tentacles:
```
"00001111100",
"00011111110",
"00111111111",
"00110111011",
"00111111111",
"00011010110",
"00001010100",
"00010001000"
```

Squid currently. Should be fine.

Honestly appearance is acceptable — alien sprites are recognizably invader-ish but blur softens the bitmap. Let me reduce shadowBlur to 5 to sharpen and maybe increase cell to 4 stays. Also add slight dark offsets? Let's reduce blur and test visually with zoom: I can enlarge canvas display temporarily? Use CSS transform? Simpler: take screenshot and crop? I can use bash with ImageMagick? Probably not installed. Python PIL maybe. I could crop via canvas? Eh.

Let's focus on required behaviors; sprites look decent overall.

Now add autotest harness temporarily.

Also noticed: bunkers lose material in second screenshot (middle-right bunker has a chunk taken near right? Yes, bunker at 590 shows a notch — enemy bullet damage works). Good.

One issue: enemy bullet spawned at x near 750 zigs; okay.

Concern: bullet collision with aliens uses alien abs position and bullet point; good.

Concern: hitting bunker from below (player bullet) and above (enemy bullet) both work.

Concern: enemy bullet passes bunker gap.

Now let's add the harness with hash 'demo', test for 8 seconds, screenshot. Then remove harness.

Actually I can keep harness out of final; add now.

Reload with hash. How do I set URL hash with browser tool? Reload action doesn't accept URL. Maybe the browser page is served index.html; navigating via hash requires... The tool only has reload. Maybe I can add a query? Hmm. I could instead activate demo by default temporarily and run, then remove. Simpler: change condition to true temporarily. Let's set `if (true)` for testing, capture screenshots at intervals, then remove. But initial screenshot would already show autoplay. Sequence: reload, wait, screenshot. Do it.

Firing works (bullet visible at 598). Cannon still center in this frame (sweep uses right at t small?). Player bullet in the gap between bunkers. Wait a few seconds and screenshot again.

Excellent! Verified:
- Cannon moves (now at far right).
- Shooting works, aliens destroyed (score 80), kills: 5 aliens? score 80 (e.g., 30+10+20+20 = 80). HUD score updated, lives 2 (enemy shot hit player). Invulnerability presumably.
- Bunkers damaged heavily including from enemy shots; gaps visible.
- Enemy bullets zigzag near bottom.

Issue: cannon stops at far right edge? x clamp W-34 = 926 → drawn at 926 in internal → in screenshot ~ 1020 of 1040 stage = correct. Cannon at edge partially fine.

Problem observed: score 80 after killing 5 aliens (30+20+20+10 = 80... that's 4). Fine.

Issue: scoreboard has some empty/ghost aliens in middle (destroyed holes) — correct.

The alien row 2 middle has yellow ring = explosion ring effect. Good.

Now what about win/gameover? Hard to test fully but logic straightforward. Let me check restart and initial state after removing autotest. Also check bunker persistence — visible craters remain.

One concern: the autotest demonstrates many alien kills quickly because bullets fired while moving; score increments correctly.

Another concern: frame timing; the game runs even when tab not focused? fine.

Let me test Game Over by letting autotest run until lives exhausted/aliens reach bottom? Could take long. Alternatively trust logic.

Test win? Hard.

Test restart: click restart button while demo continues → resets and immediately demo fires again. Check DOM score 000000 and bunkers full. Let's click restart, then screenshot immediately.

Restart works: full alien grid, full bunkers, score 000000, lives 3, cannon centered.

Now test game over flow. I can force it via demo autotest continuing until aliens reach bottom — takes long. Alternatively temporarily add a test action: set S.lives=1 and place enemy bullet? Not accessible externally. I could temporarily set initial lives to 1 in code, let demo run until hit → Game Over overlay, screenshot, then revert. But that changes file; manageable.

Actually testing overlay visibility and restart from overlay matters. I can temporarily add to the autotest harness: after 2s, call playerHit twice? The harness is inside IIFE so has access to S and functions. Add:
```
setTimeout(()=>{ if (S.mode==='playing'){ S.invuln=0; playerHit(); } }, 1500);
setTimeout(()=>{ if (S.mode==='playing'){ playerHit(); } }, 1700);
```
This forces game over quickly. But demo autotest immediately resets? no. Then screenshot overlay, click overlay restart. Then remove harness entirely.

Let's modify harness temporarily.

No python3. Use node? Check node exists.

Wait; screenshot was taken immediately after reload (before 2.5s). Wait 4s then screenshot.

Game Over overlay works (lives 0 hearts, message, final score). Note game over overlay shows "GAME OVER" already in DOM initially (hidden by CSS opacity) — fine.

Now click overlay Restart to verify restoring from gameover. Then remove autotest harness.

Also confirm win state: hard to test quickly. I can temporarily force win in harness after restart? Add a timeout calling win() to verify overlay. Let's do that after testing restart: click overlay restart, then examine. Then add temporary win trigger? Could just call win() via harness setTimeout on reload with only that. Let's test win overlay quickly after restart by temporarily replacing force-gameover block with win() call. But overlay structure is same; win's message/color may be fine. I'll test.

Click restart now.

Restart from overlay resets score 0, lives 3, formation full, bunkers fresh, cannon center. Overlay is fading out (still visible in frame). Good.

Now test win overlay. Modify temp harness: remove forced gameover, add setTimeout(win, 2500). Then reload and screenshot after 3s. Then remove all harness.

Win overlay works. Note when I forced win I set score 470 and lives 2, bonus +100 → 570 shown. Good.

Now remove the entire temp autotest harness and restore initial clean state. Also tweak sprite shadows slightly for clarity? Current sprites at full formation screenshot look great (distinct pixel aliens). Earlier blобs were due to the overlay blur/backdrop-filter! Yes — bunkers and aliens looked blurry because the overlay's backdrop-filter blur(3px) was active in those shots. In the clean screenshot, sprites are crisp and recognizable. Great.

Now remove harness:
Replace lines from "// temporary self-test harness..." to end with just `})();`. Use node regex.

Clean. Only legit setTimeout (win chime) remains.

Final check reload inspect console initial. Also verify keyboard tap caused issue? Real users hold keys, fine.

One more thought: requirement "Aliens reaching the player zone or zero lives causes Game Over" — implemented. "clearing the aliens shows a win state" — implemented; note win() adds bonus but score only increments once per alien. Fine.

"Bound projectile lifetime and fire rate" — yes.

"Enemy shots cost a life with brief protection" — yes 1.7s blink.

"Restart to restore ... player position" — resetGame sets cannonX center.

Bunker persistence — verified.

One possible edge: `roundRect` uses global ctx fine.

Potential bug: on win, bullets cleared but particles remain — fine. Overlay hidden when restart.

Potential issue: overlay title initial color set inline; on restart hidden. Game over after win works (showOverlay updates color).

Potential issue: "R" pressed while playing does nothing — spec asks Restart button, fine. But maybe allow R anytime? Controls list says R restart. Currently R only when not playing. The requirement only says provide Restart. It's okay but a user pressing R mid-game expects restart. Let's allow R always (harmless). Also Enter only restart when game over to avoid accidental. Change: R → resetGame() always. Update hint maybe.

Also the on-screen pads: the FIRE button is small; fine.

Also the lives icons: lost life icons dim (seen screenshot). Good.

One more check: alien formation steps when it descends doesn't move horizontally that step; standard.

Edge detection margin: aliens maxX starts 714; W-26=934; fine.

Alien bullet can spawn inside bunker region after aliens descend; hitBunker handles.

Aliens reaching DANGER_Y=600: cannon hitbox top 578; game over triggers before overlap. Good.

Let me modify R behavior and reload final to confirm initial screen and console empty.

Initial state clean, no console errors. Game ready.

Final summary: mention checks performed using temporary harness then removed:
- movement (cannon traversed to edges and stayed within playfield)
- firing (bullets, cooldown, max count)
- alien kills/score once each (score went up), explosion feedback
- bunker damage from both sides, gaps persistent (visible craters, bullets passing)
- enemy fire and life loss with invulnerability blink (lives decremented while demo ran)
- game over overlay (lives 0), win overlay, restart from overlay/button resets score/lives/formation/bunkers/player pos

Unverified: long-term alien descent game-over trigger (invasion), exact edge reverse visually observed? In demo the formation did move; edge reversal likely occurred during 4s at speed? Not sure. Say unverified: end-game via aliens reaching zone, long-session timing/fairness, touch controls.