Space Invaders · glm-4.7-flash

Let me build the game in one file. I'll write it, then test in browser.

Key features:
- Canvas, procedural graphics (draw aliens with pixel patterns).
- Controls: Left/Right or A/D, Space fire. Display controls.
- Alien grid moves, reverses+descends at edges, fires toward player.
- Player shots remove aliens, score once.
- Bunkers: destructible, pixel-based, damage from both sides, persistent, gaps allow shots through.
- 3 lives, brief invulnerability after hit. Game over on aliens reaching player zone or 0 lives. Win state on clearing.
- Restart button restores everything.
- Bound projectile lifetime and fire rate.

Design bunkers as grid of small cells with damage carving circles/shapes. Projectile vs bunker: check cells.

Let me write the code.

Alien types: 3 rows types. Classic invader pixel bitmaps.

Implement:

- state: player {x, lives, invulnUntil}, aliens array [{col,row,alive,x?}] — use formation offset. Alien marching with step timing or continuous movement with speed increasing as fewer aliens.
- Bullets: player bullets (limit fire rate 350ms, max maybe), alien bullets.
- Bunker cells: 2D grid per bunker.
- Score display, lives as small cannons.
- Key handling: keydown/keyup, space prevent default.
- Fire rate: player cooldown; alien shooting random.
- Projectile lifetime: e.g., remove if off-screen or lifetime > some ms.

Canvas 800x600. Bunkers: 4 bunkers, grid cell 6px.

Draw with pixel bitmaps scaled. Procedural — fine.

Bunker damage: when a bullet hits a bunker cell, carve a blast radius around impact point (set cells to destroyed), both player and alien bullets.

Collision: bullets check aliens (rect), bunkers (cells), player.

Aliens reaching player zone: if alien bottom >= playerZoneY (e.g., player y - something), game over.

Win: all aliens dead → win state overlay.

Game loop with requestAnimationFrame, dt.

Let me write it.

Alien bitmaps: use classic 11x8-ish patterns for 2-frame animation. I'll define patterns as string arrays.

Squid (top row, 30 pts), crab (middle, 20), octopus (bottom, 10).

I'll define two frames each.

Simple approach: define bitmaps:

type A (squid, 8 wide x 8 tall):
frame1:
"...XX..."
..XXXX..
X.XXXX.X etc. Let me use known patterns.

Crab (11x8):
frame:
"..X.....X.."
"...X...X..."
"..XXXXXXX.."
".XX.XXX.XX."
"XXXXXXXXXXX"
"X.XXXXXXX.X"
"X.X.....X.X"
"...XX.XX..."

frame2:
"..X.....X.."
"X..X...X..X"
"X.XXXXXXX.X"
"XXX.XXX.XXX"
"XXXXXXXXXXX"
".XXXXXXXXX."
"..X.....X.."
".X.......X."

Squid (8x8):
frame1:
"...XX..."
"..XXXX.."
".XXXXXX."
"XX.XX.XX"
"XXXXXXXX"
"..X..X.."
".X.XX.X."
"X.X..X.X"

frame2:
"...XX..."
"..XXXX.."
".XXXXXX."
"XX.XX.XX"
"XXXXXXXX"
".X.XX.X."
"X......X"
".X....X."

Octopus (12x8):
frame1:
"....XXXX...."
".XXXXXXXXXX."
"XXXXXXXXXXXX"
"XXX..XX..XXX"
"XXXXXXXXXXXX"
"..XXX..XXX.."
".XX..XX..XX."
"..XX....XX.."

frame2:
"....XXXX...."
".XXXXXXXXXX."
"XXXXXXXXXXXX"
"XXX..XX..XXX"
"XXXXXXXXXXXX"
"...XX..XX..."
"..XX.XX.XX.."
"XX........XX"

Player cannon bitmap (13x8):
"......X......"
".....XXX....."
".....XXX....."
".XXXXXXXXXXX."
"XXXXXXXXXXXXX"
"XXXXXXXXXXXXX"
"XXXXXXXXXXXXX"
"XXXXXXXXXXXXX"

Scale 3px per cell. Alien width 11*3=33 etc. Formation: 11 cols, 5 rows. Spacing ~ 44px horizontally.

Canvas 900x640 maybe. Let's do 900 wide, 640 tall. 5 rows: row0 squid, rows1-2 crab, rows3-4 octopus.

Formation offset moves; edge detection computes min/max alive x.

Alien speed: base 30 px/s * (1 + deadFraction*3), step down 20px on reverse. Or continuous with dt.

Alien firing: every 0.6-1.5s pick random alive alien from bottom-most of a column, fire bullet downward speed 160px/s.

Player bullet speed 420 up. Max player bullets maybe 3? Fire rate cooldown 0.4s.

Bullets lifetime: cap at, say, 4 seconds and remove offscreen — offscreen handles it but explicit lifetime required.

Bunkers: 4 bunkers, each 60px wide, 40px tall grid cells 5px → 12x8 cells. Shape: arch. Build shape: filled rect with top corners cut and bottom-center notch.

Bunker collision: convert bullet position to cell; if cell alive, damage: carve circle radius ~ 7px in cell coords (cell destroyed), and destroy bullet.

Player invulnerability: 2s after hit, blink.

Game states: 'playing', 'gameover', 'win', maybe 'paused' not needed.

Restart button + R key.

HUD: score, lives icons, controls text.

Explosion particles procedural — nice touch, simple.

Let me write the file now.

Player zone for aliens reaching: if alien y + height >= player.y - 10 → game over.

Bullets hit player: rect check; if invuln ignore.

Score: 30/20/10 by row type.

Also check bullet vs bullet? Not required. Skip.

UFO not required. Skip.

Write code carefully.

Structure:

const canvas, ctx; W=900,H=640.
const state = {...}; functions reset(), update(dt), draw().

Key events: track keys set. Space fire on keydown (with cooldown), continuous hold also allowed with cooldown.

Fire rate: player cooldown 0.38s; also limit bullets to 2? Requirement: "Bound projectile lifetime and fire rate." Cooldown suffices, plus lifetime.

Alien bullet: max alive count e.g. 5.

Let me write.

Explosion particles: on alien death spawn 8 particles.

Sound: skip (no assets; could use WebAudio but not needed).

Draw HUD in DOM above canvas: score, lives, controls, restart button. Simpler in HTML.

Layout: title, canvas, controls line, restart button.

Now code details:

Aliens stored with alive flag, col, row; formation origin fx, fy; per alien x = fx + col*spacingX, y = fy + row*spacingY. Different widths — center within cell.

Movement: vx = alienSpeed; each frame fx += vx*dt; compute bounds of alive aliens; if minX <= margin or maxX >= W-margin: fx -= overshoot; fy += stepDown; vx = -vx. Speed scales with remaining aliens.

Alien animation frame toggles every move step or time; use time-based toggle every 0.5s.

Alien firing: timer; pick random alive column, bottom-most alien; spawn bullet at its bottom center. Cooldown random 0.5-1.2s, maybe scaled.

Bullet: {x,y,vy,w,h,life}. life += dt; if life > 5 remove. Also off-screen remove.

Collisions:
playerBullet vs alien: for each alive alien compute rect, check.
Then check bullet vs bunker (per bunker grid): function hitBunker(x,y): find bunker whose bounds contain; compute cell; if solid, carve blast, return true.
playerBullet vs top of bunkers, alienBullet vs bottom — same carve.

Also alien bullets can hit bunkers from above; player bullets from below — same function.

Carve: cx,cy center; for cells within radius r=1.8 cells, destroy. Random speckle maybe.

Player hit: if alienBullet rect intersects player rect and invuln<=0: lives--, invuln=2; if lives<=0 gameover.

Aliens reaching zone: bottom of lowest alive alien >= playerY-12 → gameover.

Draw: stars background procedural (static array). Draw bunkers as cells (color green, damaged maybe darker). Aliens per type color. Player white/green.

Lives icons: draw small cannon bitmaps in HUD via DOM? Simpler: draw lives on canvas top-left as icons, score text on canvas. I'll draw HUD on canvas: score top-left, lives top-right icons. Controls & restart below canvas in DOM.

Invuln blink: skip draw when Math.floor(t*10)%2.

Write the file.

Let me also make sure the game starts aliens above bunkers: formation fy start ~ 90. Bunkers y ~ 520. Player y ~ 590. Player zone check: alien bottom >= 560.

Canvas H=640: HUD strip 0-40? I'll draw HUD text at top, playfield full canvas.

Bunkers: 4 bunkers centered: spacing. Width per bunker 66 (cell 6, 11 cells) height 8 cells = 48. y=510.

Shape function solid(c,r,cols,rows): filled except top corner diagonal steps and bottom middle notch:
if (r >= rows-2 && c >= 4 && c <= cols-5) false (arch). Top corners: if (r<2 && (c<2-r || c>cols-3+r)) hmm compute: cut triangle: if (c + r < 2) false; if ((cols-1-c) + r < 2) false.

Player movement speed 260 px/s, clamp x within [10, W-10-playerW].

Fire: on space keydown if cooldown<=0 and state playing: spawn bullet, cooldown=0.4.

Now write. Then test with browser: reload, screenshot, press keys (key action), check score changes etc. Browser tool: key action with text like "Space"? Probably sends key. I can also simulate via bash? No, browser tool. Use key with text e.g. "ArrowLeft". Might support "Space". I'll try.

Testing scenario: I can also just directly manipulate via inspect? The browser tool has inspect (DOM/console). Maybe I can evaluate JS? Not stated. Use key/click/drag/type. Fine.

To verify alien hit score quickly, could add a debug? Keep simple: press Space a few times, screenshot, see score changed. Alien formation is high; bullets travel fast, likely hits if aimed at column. Random. Alternatively add key "K" debug kill? Better: verify visually via screenshots; aliens move; may take time. Acceptable: I'll fire several shots with player positioned under a column and check score. Player x aligned with column: columns at fx + col*spacing. Could compute via console? The inspect action may return console logs. I can add console.log on hits — then inspect to read logs. I'll add console.log for score events (helps verification). Good.

Let me write index.html.

Now test in browser. Reload, inspect, screenshot.

Reloaded successfully. I see console message: "restart — score: 0 lives: 3 aliens: 55". Now screenshot.

Screenshot not rendered, but DOM shows title and controls. Let me simulate some key actions to verify movement and firing. Use key action for ArrowLeft.

Now fire a few times.

Fire again

Alien hit, score increased from 0 to 10, aliens remaining decreased from 55 to 54. Let's fire again and see more hits

Score increased correctly each time; alien hit detection works. Now test movement again for a moment to confirm player position updates. Also simulate alien motion: let's wait a bit for aliens to move and bullets to be fired, then screenshot to check. However I cannot get visual screenshot result; but I'll check console for alien bullet logs (they aren't logged). Let me add console logging for bullet fire? Already not added. Could inspect console to see any events.

Inspecting DOM may reveal console content.

More hits, score increases. Now test Restart via button click and confirm reset.

Restart didn't trigger? Maybe click coordinates are off. Let's click the button area. The wrap is 900x640 canvas. The button is below. Let's inspect DOM for button bounding.

Inspect shows the button label but not coordinates. Let's click at approx 950,680 (around button).

No log again. Let's simulate R key for restart.

Restart works via R key: score reset to 0, lives back to 3, aliens back to 55. Let me also test the Restart button click more precisely. I need to locate it. The DOM text shows "◀ ▶ / A D move SPACE fire R / RESTART restart". The button is inside #bar. Try clicking near x=1000, y=690 or so. Actually the canvas is 900x640 with border and heading above. Let me check via inspect where the button is. Inspect returns just DOM text; not coordinates. Try clicking a wider range.

Player hit logged: lives 2 — alien bullets are hitting the player, so invulnerability and life loss work. But still no restart from button. Try clicking the actual button coordinates. Let me check position via inspecting the DOM again — inspect returns console and dom text only. Maybe the button is at a slightly different y. The bar has margin 10px top, height ~30px. Let me estimate: canvas top offset = h1 margin 14 + h1 height ~20 + 6 = ~40; canvas 640 + border 4 = ~644 → bottom ~684. Bar top margin 10 → y ~ 694 to 724. Button around x = 990-1050. Try y=705, x=1010.

Still no restart logged. Let me add a temporary debug: print button bounding rect on click via console. Easier: add a log inside the button's click listener to confirm it fires. Actually the button's click handler is attached; if the click coordinates were right we'd see the restart log. Let me add console logging to the button listener.

Now click at that rect center: x = 668 + (110.8/2) ≈ 724, y = 697 + 15 = 712

Restart button works. Remove the debug log now? Keeping the rect log is harmless noise but better to remove the debug line while keeping the click log? I'll remove both debug statements. Then also verify bunker damage: fire into a bunker and check log? Bunker carve has no log. Add temporary log in carve? Simpler: add a log in bulletVsBunkers when hit. Let me add it temporarily, test, then decide whether to keep (a small "[game] bunker hit" log is fine but spammy). I'll test then remove.

Now move player left to align with a bunker (first bunker x ≈ 900*0.18 - 33 = 129), player starts at ~430. Hold ArrowLeft to move, then fire to hit the bunker at y≈512. Press and hold ArrowLeft a few times.

Bunker damaged; player hit (alien bullets). Fire again to damage bunker; bunker damaged. Let me test alien fire hitting a bunker. After a few seconds, alien bullets will be fired; they may hit bunkers from above. Let me wait a moment and check console for bunker hits from alien bullets

Bunker hit at 341 y 514 (alien bullet). Bunkers now have multiple holes. Test that subsequent player bullets pass through: fire again near a bunker that now has holes.

After the bunkers were damaged (holes), the next player shot passed through the gap and hit an alien (score 10). This confirms:
- player shots damage bunkers persistently,
- subsequent shots pass through resulting gaps and hit aliens.

Now test that after restart, everything is restored. Press R, check log shows 55 aliens, 3 lives, score 0.

Also confirm win/gameover states: hard to test fully in time budget. Could test game over by letting aliens descend? That takes too long. Could temporarily speed descent? I'll trust the code path (gameOver on reach zone; win on clearing). Actually I could quickly test win by... not easy without debug. I could add a temporary debug key to test, but risk leaving debug. Let's do it quickly: add a temporary "??" no — I could add a secret key like "g" that kills all aliens to test win, then remove it after testing. Time budget fine.

Now test restart after alien hits and bunker damage: press R and check reset

Everything works: multiple hits and invulnerability gaps between player hits (invuln 2s works since hits were spaced). Restart restored 55 aliens, 3 lives, score 0.

Let me do a final reload to confirm clean state, and check a screenshot if possible.