\n\n

GALAXIAN

PRESS START

← → / A D MOVE

SPACE FIRE

\n \n

HI-SCORE 0

\n\n

GAME OVER

SCORE 0

HI-SCORE 0

\n \n

\n\n \n

\n \n \n \n

\n\n view source\n\n \n \n\n","label",[18],"pulls","branches","forks","envVars",{"_183":26,"_185":26},"connections",{"_183":26,"_184":26},"count","unfilledCount","emptyCount",{"_33":292,"_13":251,"_66":245,"_43":-5,"_35":36,"_169":293,"_170":96,"_37":294,"_39":26,"_68":295,"_172":-5,"_69":24,"_174":-5,"_205":296,"_17":297},{"_33":284,"_13":285,"_66":286,"_43":245,"_35":36,"_169":287,"_170":96,"_37":288,"_39":26,"_68":212,"_172":289,"_69":24,"_174":-5,"_205":290,"_17":291},{"_33":276,"_13":277,"_66":278,"_43":245,"_35":36,"_169":279,"_170":96,"_37":280,"_39":26,"_68":212,"_172":281,"_69":24,"_174":-5,"_205":282,"_17":283},{"_33":268,"_13":269,"_66":270,"_43":245,"_35":36,"_169":271,"_170":96,"_37":272,"_39":26,"_68":212,"_172":273,"_69":24,"_174":-5,"_205":274,"_17":275},{"_33":260,"_13":261,"_66":262,"_43":245,"_35":36,"_169":263,"_170":96,"_37":264,"_39":26,"_68":212,"_172":265,"_69":24,"_174":-5,"_205":266,"_17":267},{"_33":252,"_13":253,"_66":254,"_43":245,"_35":36,"_169":255,"_170":96,"_37":256,"_39":40,"_68":212,"_172":257,"_69":24,"_174":-5,"_205":258,"_17":259},{"_33":242,"_13":243,"_66":244,"_43":245,"_35":36,"_169":246,"_170":96,"_37":247,"_39":26,"_68":212,"_172":248,"_69":24,"_174":-5,"_205":249,"_17":250},{"_33":235,"_13":236,"_66":237,"_43":-5,"_35":36,"_169":119,"_170":96,"_37":238,"_39":40,"_68":21,"_172":239,"_69":24,"_174":-5,"_205":240,"_17":241},{"_33":227,"_13":228,"_66":229,"_43":-5,"_35":36,"_169":230,"_170":96,"_37":231,"_39":40,"_68":21,"_172":232,"_69":24,"_174":-5,"_205":233,"_17":234},{"_33":168,"_13":18,"_66":67,"_43":-5,"_35":36,"_169":75,"_170":96,"_37":224,"_39":40,"_68":21,"_172":173,"_69":24,"_174":-5,"_205":225,"_17":226},{"_33":216,"_13":217,"_66":94,"_43":-5,"_35":36,"_169":218,"_170":96,"_37":219,"_39":40,"_68":220,"_172":221,"_69":24,"_174":-5,"_205":222,"_17":223},{"_33":208,"_13":209,"_66":210,"_43":-5,"_35":36,"_169":40,"_170":96,"_37":211,"_39":26,"_68":212,"_172":213,"_69":24,"_174":-5,"_205":214,"_17":215},{"_33":199,"_13":200,"_66":201,"_43":-5,"_35":36,"_169":202,"_170":96,"_37":203,"_39":40,"_68":21,"_172":204,"_69":24,"_174":-5,"_205":206,"_17":207},"22ca1876-f37a-4867-9b0b-f93050ca25f4","style.css","019eaf6f-9553-76bf-ba64-a16ed2dac2ac",4,["D",1781059827033],"@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n height: 100%;\n background: #000;\n color: #fff;\n font-family: \"Press Start 2P\", monospace;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n#game-wrap {\n position: relative;\n width: 480px;\n max-width: 100vw;\n aspect-ratio: 480 / 640;\n}\n\ncanvas {\n display: block;\n width: 100%;\n height: 100%;\n background: #000;\n image-rendering: pixelated;\n border: 2px solid #1b2a4a;\n box-shadow: 0 0 24px #0a1a3a inset, 0 0 30px #11224400;\n}\n\n/* ---- overlay screens ---- */\n.screen {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 22px;\n text-align: center;\n background: rgba(0, 0, 6, 0.78);\n padding: 20px;\n}\n.screen.hidden { display: none; }\n\n.screen h1 {\n font-size: 28px;\n color: #ffe14d;\n letter-spacing: 2px;\n text-shadow: 0 0 12px #ff8a00;\n}\n.screen p { font-size: 11px; line-height: 1.8; color: #9fd0ff; }\n.controls p { color: #6fae9f; font-size: 9px; }\n.hi { color: #ff6f8f !important; }\n\n.blink { animation: blink 1s steps(2, start) infinite; color: #33ff66 !important; }\n@keyframes blink { to { visibility: hidden; } }\n\nbutton {\n font-family: inherit;\n font-size: 12px;\n color: #001b0a;\n background: #33ff66;\n border: none;\n padding: 14px 26px;\n cursor: pointer;\n letter-spacing: 1px;\n box-shadow: 0 4px 0 #178a37;\n transition: transform .05s;\n}\nbutton:active { transform: translateY(3px); box-shadow: 0 1px 0 #178a37; }\n\n/* ---- touch controls ---- */\n#touch-controls {\n position: absolute;\n left: 0; right: 0; bottom: 8px;\n display: none;\n justify-content: space-between;\n padding: 0 10px;\n gap: 8px;\n}\n.tbtn {\n flex: 1;\n font-size: 14px;\n padding: 18px 0;\n background: rgba(51, 255, 102, 0.15);\n color: #33ff66;\n box-shadow: none;\n border: 1px solid #33ff66;\n}\n.tbtn#t-fire { background: rgba(255, 111, 143, 0.15); color: #ff6f8f; border-color: #ff6f8f; }\n\n#source-link {\n position: fixed;\n bottom: 6px;\n right: 8px;\n font-size: 8px;\n color: #335;\n text-decoration: none;\n}\n#source-link:hover { color: #88a; }\n\n/* show touch controls on coarse pointers */\n@media (pointer: coarse) {\n #touch-controls { display: flex; }\n}\n","children",[],[200],"c6650258-5ba9-4bc6-883d-f989e6a44028","script.js","019eaf6f-9553-76bf-ba64-9eb5514c1da9",["D",1781059785998],"script","/* If you're feeling fancy you can add interactivity\n to your site with Javascript.\n Note: TypeScript won't work in this file. */\n\n// prints \"hi\" in the browser's dev tools console\nconsole.log(\"hi\");",[],[209],"6419963c-8d2c-4320-b3a2-8ddc35e2fa84","main.tsx",12,["D",1781059950237],"http","import { parseVal, staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst serveStatic = staticHTTPServer();\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n // \"view source\" link -> this val's page\n if (url.pathname === \"/source\") {\n return new Response(null, {\n status: 302,\n headers: { Location: parseVal().links.self.val },\n });\n }\n return serveStatic(req);\n}\n",[],[217],["D",1781059815002],[],[18],"fccf64d9-a55e-4407-afde-c9bc3538bf44","favicon.svg","019eaf6f-9553-76bf-ba64-9002f246cfb1",2,["D",1781059806046],"\n",[],[228],"84fcf86e-708a-46d6-9989-9bb220e65823","README.md","019eaf6f-9553-76bf-ba64-8c55f05eb563",["D",1781059970764],"# 👾 GALAXIAN\n\nA Galaxian-style arcade space shooter, built with vanilla JS + HTML Canvas on\nVal Town. Aliens hold a swaying formation, then peel off and dive-bomb your ship\nin classic Galaxian fashion. Pure procedural pixel-art sprites and synthesized\nWebAudio sound — no external image or audio assets.\n\n## How to play\n\n| Input | Action |\n| --- | --- |\n| `←` `→` or `A` `D` | Move ship |\n| `Space` (or `↑` / `W`) | Fire |\n| On-screen buttons | Touch / mobile controls |\n\n- Shoot aliens for points. **Aliens shot while diving are worth double.**\n- Clear all aliens to advance to the next level (dives get faster each level).\n- You start with **3 lives** and earn a bonus life at 5,000 points, then every\n 8,000 after. High score is saved in your browser.\n\n## Scoring\n\n| Alien | Color | Points |\n| --- | --- | --- |\n| Flagship | 🟡 yellow | 60 |\n| Escort | 🔵 cyan | 40 |\n| Grunt | 🔴 red | 20 |\n\n(Double when hit mid-dive.)\n\n## Architecture\n\n```mermaid\nflowchart TD\n H[index.html] --> M[game/main.js
game loop + state]\n M --> E[entities.js
Player / Alien / Bullet / Explosion]\n M --> S[sprites.js
pixel-art grids]\n M --> SF[starfield.js
parallax stars]\n M --> A[audio.js
WebAudio sfx]\n M --> I[input.js
keyboard + touch]\n E --> S\n T[main.tsx] -. serves static files .-> H\n```\n\n- **`main.tsx`** — HTTP entrypoint; serves the static files and a `/source` redirect.\n- **`game/main.js`** — game loop, state machine (menu → playing → dying → game over), formation + dive scheduling, collisions, scoring.\n- **`game/entities.js`** — `Player`, `Alien` (formation / diving / returning states with bezier dive paths), `Bullet`, `Explosion`.\n- **`game/sprites.js`** — all sprites drawn from small character grids, no images.\n- **`game/starfield.js`** — three-layer parallax starfield.\n- **`game/audio.js`** — synthesized arcade sound effects.\n- **`game/input.js`** — keyboard and on-screen touch controls.\n\nBuilt on the [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) template.\n",[],[236],"eab1db75-183b-40ee-8d36-d17108bb74ca","starfield.js","38bbd878-6477-11f1-a5ee-1607ee4eb77e","6914c4dc-ca5a-411b-9371-867d828a93f9",8,["D",1781059864084],"// Parallax scrolling starfield background.\nexport class Starfield {\n constructor(width, height, count = 90) {\n this.w = width;\n this.h = height;\n this.stars = [];\n for (let i = 0; i < count; i++) {\n const layer = Math.floor(Math.random() * 3); // 0 = far, 2 = near\n this.stars.push({\n x: Math.random() * width,\n y: Math.random() * height,\n layer,\n size: layer === 2 ? 2 : 1,\n speed: 12 + layer * 28, // px/sec\n twinkle: Math.random() * Math.PI * 2,\n });\n }\n }\n\n update(dt) {\n for (const s of this.stars) {\n s.y += s.speed * dt;\n s.twinkle += dt * 6;\n if (s.y > this.h) {\n s.y -= this.h;\n s.x = Math.random() * this.w;\n }\n }\n }\n\n draw(ctx) {\n for (const s of this.stars) {\n const a = 0.5 + 0.5 * Math.sin(s.twinkle);\n const shade = 140 + s.layer * 38;\n ctx.fillStyle = `rgba(${shade}, ${shade}, 255, ${a.toFixed(2)})`;\n ctx.fillRect(s.x | 0, s.y | 0, s.size, s.size);\n }\n }\n}\n",[],[251,243],"game","e99cce44-8a1d-48ad-9f32-a4289951e480","sprites.js","2ddcb080-6477-11f1-8e27-1607ee4eb77e",7,["D",1781059858989],"// Pixel-art sprite drawing helpers. Everything is drawn procedurally\n// from small grids so we don't depend on external image assets.\n\n// Draw a sprite from a string grid. Each char maps to a color via `palette`.\n// \".\" = transparent. Cells are `scale` px each, centered on (cx, cy).\nexport function drawGrid(ctx, grid, palette, cx, cy, scale) {\n const rows = grid;\n const h = rows.length;\n const w = rows[0].length;\n const ox = cx - (w * scale) / 2;\n const oy = cy - (h * scale) / 2;\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const ch = rows[y][x];\n if (ch === \".\") continue;\n ctx.fillStyle = palette[ch];\n ctx.fillRect(ox + x * scale, oy + y * scale, scale, scale);\n }\n }\n}\n\n// Player ship\nconst SHIP = [\n \"....G....\",\n \"....G....\",\n \"...GGG...\",\n \"...GWG...\",\n \"..GGGGG..\",\n \".GGGGGGG.\",\n \"GGGGGGGGG\",\n \"G.GGGGG.G\",\n \"G.G...G.G\",\n];\nconst SHIP_PAL = { G: \"#33ff66\", W: \"#bfffff\" };\n\nexport function drawShip(ctx, cx, cy, scale = 3) {\n drawGrid(ctx, SHIP, SHIP_PAL, cx, cy, scale);\n}\n\n// Three alien types, each with a 2-frame animation for a little wiggle.\nconst ALIENS = {\n // bottom-row grunt (red)\n grunt: {\n pal: { B: \"#ff4466\", E: \"#ffffff\" },\n frames: [\n [\n \".B.....B.\",\n \"..B...B..\",\n \".BBBBBBB.\",\n \"BB.BBB.BB\",\n \"BBBBBBBBB\",\n \"B.BBBBB.B\",\n \"B.B...B.B\",\n \"...B.B...\",\n ],\n [\n \"B.......B\",\n \".B.....B.\",\n \".BBBBBBB.\",\n \"BB.BBB.BB\",\n \"BBBBBBBBB\",\n \"B.BBBBB.B\",\n \".B.B.B.B.\",\n \"B.......B\",\n ],\n ],\n },\n // mid escort (cyan)\n escort: {\n pal: { B: \"#33ddff\", E: \"#ffffff\" },\n frames: [\n [\n \"..B...B..\",\n \"...BBB...\",\n \"..BBBBB..\",\n \".BB.B.BB.\",\n \".BBBBBBB.\",\n \"..B.B.B..\",\n \".B.....B.\",\n \"B.......B\",\n ],\n [\n \"..B...B..\",\n \"B..BBB..B\",\n \".BBBBBBB.\",\n \".BB.B.BB.\",\n \".BBBBBBB.\",\n \"..B.B.B..\",\n \"..B...B..\",\n \".B.....B.\",\n ],\n ],\n },\n // flagship (yellow, worth the most)\n flagship: {\n pal: { B: \"#ffd24d\", Y: \"#ff8a00\", E: \"#ffffff\" },\n frames: [\n [\n \"...YYY...\",\n \"..YBBBY..\",\n \".YBBBBBY.\",\n \"YBBYBYBBY\",\n \"YBBBBBBBY\",\n \".YBBBBBY.\",\n \"..Y.B.Y..\",\n \".Y.....Y.\",\n ],\n [\n \"...YYY...\",\n \"..YBBBY..\",\n \".YBBBBBY.\",\n \"YBBYBYBBY\",\n \"YBBBBBBBY\",\n \".YBBBBBY.\",\n \"..Y.B.Y..\",\n \"Y.......Y\",\n ],\n ],\n },\n};\n\nexport function drawAlien(ctx, type, cx, cy, frame, scale = 3) {\n const def = ALIENS[type] || ALIENS.grunt;\n const grid = def.frames[frame % def.frames.length];\n drawGrid(ctx, grid, def.pal, cx, cy, scale);\n}\n\nexport const ALIEN_TYPES = Object.keys(ALIENS);\n",[],[251,253],"ebd4a7c8-44c5-4039-a4a2-393495dc5784","main.js","64781684-6477-11f1-84b4-1607ee4eb77e",11,["D",1781059937460],"import { Alien, Bullet, Explosion, hit, Player } from \"./entities.js\";\nimport { Starfield } from \"./starfield.js\";\nimport { sfx, unlock } from \"./audio.js\";\nimport { clearEdges, initTouch, keys, onStart } from \"./input.js\";\n\nconst canvas = document.getElementById(\"game\");\nconst ctx = canvas.getContext(\"2d\");\nconst W = canvas.width;\nconst H = canvas.height;\nctx.imageSmoothingEnabled = false;\n\nconst HI_KEY = \"galaxian_hi\";\nlet hiScore = Number(localStorage.getItem(HI_KEY) || 0);\n\n// ---- formation layout ----\nconst COLS = 8;\nconst ROWS = 5;\nconst CELL_W = 40;\nconst CELL_H = 36;\nconst FORM_TOP = 70;\n// alien type + points by row (top rows worth more)\nconst ROW_DEF = [\n { type: \"flagship\", points: 60 },\n { type: \"escort\", points: 40 },\n { type: \"escort\", points: 40 },\n { type: \"grunt\", points: 20 },\n { type: \"grunt\", points: 20 },\n];\n\nconst State = { MENU: 0, PLAYING: 1, DYING: 2, OVER: 3, CLEAR: 4 };\n\nconst game = {\n state: State.MENU,\n score: 0,\n lives: 3,\n level: 1,\n player: null,\n aliens: [],\n pBullets: [],\n eBullets: [],\n booms: [],\n formation: { offsetX: 0, offsetY: 0, dir: 1, t: 0 },\n diveTimer: 1.5,\n respawnT: 0,\n clearT: 0,\n nextLife: 5000,\n};\n\nconst stars = new Starfield(W, H);\n\n// ---- UI elements ----\nconst overlay = document.getElementById(\"overlay\");\nconst gameover = document.getElementById(\"gameover\");\nconst elHi = document.getElementById(\"hi-score\");\nconst elHi2 = document.getElementById(\"hi-score-2\");\nconst elFinal = document.getElementById(\"final-score\");\nelHi.textContent = hiScore;\n\nfunction buildFormation(level) {\n const aliens = [];\n const formW = COLS * CELL_W;\n const startX = (W - formW) / 2 + CELL_W / 2;\n for (let r = 0; r < ROWS; r++) {\n for (let c = 0; c < COLS; c++) {\n const def = ROW_DEF[r];\n const hx = startX + c * CELL_W;\n const hy = FORM_TOP + r * CELL_H;\n aliens.push(new Alien(def.type, c, r, hx, hy, def.points));\n }\n }\n return aliens;\n}\n\nfunction startGame() {\n game.state = State.PLAYING;\n game.score = 0;\n game.lives = 3;\n game.level = 1;\n game.nextLife = 5000;\n resetLevel();\n overlay.classList.add(\"hidden\");\n gameover.classList.add(\"hidden\");\n}\n\nfunction resetLevel() {\n game.player = new Player(W, H);\n game.aliens = buildFormation(game.level);\n game.pBullets = [];\n game.eBullets = [];\n game.booms = [];\n game.formation = { offsetX: 0, offsetY: 0, dir: 1, t: 0 };\n game.diveTimer = Math.max(0.6, 1.8 - game.level * 0.12);\n}\n\nfunction nextLevel() {\n game.level++;\n sfx.levelUp();\n game.state = State.CLEAR;\n game.clearT = 1.4;\n}\n\nfunction endGame() {\n game.state = State.OVER;\n if (game.score > hiScore) {\n hiScore = game.score;\n localStorage.setItem(HI_KEY, String(hiScore));\n }\n elHi.textContent = hiScore;\n elHi2.textContent = hiScore;\n elFinal.textContent = game.score;\n gameover.classList.remove(\"hidden\");\n}\n\nfunction addScore(n) {\n game.score += n;\n if (game.score >= game.nextLife) {\n game.lives++;\n game.nextLife += 8000;\n sfx.extraLife();\n }\n}\n\n// ---- update ----\nfunction update(dt) {\n stars.update(dt);\n\n if (game.state === State.CLEAR) {\n game.clearT -= dt;\n if (game.clearT <= 0) {\n resetLevel();\n game.state = State.PLAYING;\n }\n return;\n }\n\n if (game.state === State.DYING) {\n game.respawnT -= dt;\n game.booms.forEach((b) => b.update(dt));\n game.booms = game.booms.filter((b) => !b.dead);\n if (game.respawnT <= 0) {\n if (game.lives <= 0) {\n endGame();\n } else {\n game.player = new Player(W, H);\n game.eBullets = [];\n game.state = State.PLAYING;\n }\n }\n return;\n }\n\n if (game.state !== State.PLAYING) return;\n\n // formation sway\n const f = game.formation;\n f.t += dt;\n f.offsetX = Math.sin(f.t * 0.8) * 22;\n\n // player\n game.player.update(dt, keys);\n if (keys.fire && game.player.canFire()) {\n game.player.cooldown = 0.32;\n game.pBullets.push(new Bullet(game.player.x, game.player.y - 16, -560, \"#fff\"));\n sfx.shoot();\n }\n\n // aliens\n const formAliens = game.aliens.filter((a) => a.state === \"formation\");\n game.diveTimer -= dt;\n if (game.diveTimer <= 0 && formAliens.length > 0) {\n const a = formAliens[Math.floor(Math.random() * formAliens.length)];\n const dir = a.homeX < W / 2 ? 1 : -1;\n a.startDive(game.player.x, H, dir);\n sfx.dive();\n game.diveTimer = Math.max(0.5, 1.6 - game.level * 0.1) * (0.6 + Math.random());\n }\n\n for (const a of game.aliens) {\n a.update(dt, game.formation);\n // diving aliens occasionally shoot down at the player\n if (a.state === \"diving\") {\n a.shootTimer -= dt;\n if (a.shootTimer <= 0) {\n a.shootTimer = 0.5 + Math.random();\n game.eBullets.push(new Bullet(a.x, a.y + 12, 300, \"#ff7766\"));\n }\n }\n }\n\n // bullets\n game.pBullets.forEach((b) => b.update(dt));\n game.eBullets.forEach((b) => b.update(dt));\n game.pBullets = game.pBullets.filter((b) => b.y > -20 && !b.dead);\n game.eBullets = game.eBullets.filter((b) => b.y < H + 20 && !b.dead);\n\n // player bullets vs aliens\n for (const b of game.pBullets) {\n for (const a of game.aliens) {\n if (a.dead) continue;\n if (hit(b, a)) {\n b.dead = true;\n a.dead = true;\n const mult = a.state === \"diving\" ? 2 : 1;\n addScore(a.points * mult);\n game.booms.push(new Explosion(a.x, a.y, colorFor(a.type)));\n sfx.explosion();\n break;\n }\n }\n }\n game.aliens = game.aliens.filter((a) => !a.dead);\n\n // enemy bullets / diving aliens vs player\n if (game.player && !game.player.dead) {\n const collide =\n game.eBullets.some((b) => hit(b, game.player)) ||\n game.aliens.some((a) => a.state === \"diving\" && hit(a, game.player));\n if (collide) killPlayer();\n }\n\n // explosions\n game.booms.forEach((b) => b.update(dt));\n game.booms = game.booms.filter((b) => !b.dead);\n\n // win condition\n if (game.aliens.length === 0) nextLevel();\n}\n\nfunction colorFor(type) {\n return type === \"flagship\" ? \"#ffd24d\" : type === \"escort\" ? \"#33ddff\" : \"#ff4466\";\n}\n\nfunction killPlayer() {\n game.lives--;\n game.booms.push(new Explosion(game.player.x, game.player.y, \"#33ff66\"));\n game.player.dead = true;\n sfx.playerHit();\n game.state = State.DYING;\n game.respawnT = 1.3;\n}\n\n// ---- draw ----\nfunction draw() {\n ctx.fillStyle = \"#000\";\n ctx.fillRect(0, 0, W, H);\n stars.draw(ctx);\n\n if (game.state === State.PLAYING || game.state === State.DYING || game.state === State.CLEAR) {\n game.aliens.forEach((a) => a.draw(ctx));\n game.pBullets.forEach((b) => b.draw(ctx));\n game.eBullets.forEach((b) => b.draw(ctx));\n game.booms.forEach((b) => b.draw(ctx));\n if (game.player && !game.player.dead) game.player.draw(ctx);\n drawHUD();\n if (game.state === State.CLEAR) drawCenter(`LEVEL ${game.level}`, \"#ffe14d\");\n } else {\n drawHUD();\n }\n}\n\nfunction drawHUD() {\n ctx.fillStyle = \"#fff\";\n ctx.font = \"10px 'Press Start 2P', monospace\";\n ctx.textBaseline = \"top\";\n ctx.textAlign = \"left\";\n ctx.fillText(\"SCORE \" + String(game.score).padStart(5, \"0\"), 10, 10);\n ctx.textAlign = \"center\";\n ctx.fillStyle = \"#ff6f8f\";\n ctx.fillText(\"HI \" + String(hiScore).padStart(5, \"0\"), W / 2, 10);\n ctx.textAlign = \"right\";\n ctx.fillText(\"LV \" + game.level, W - 10, 10);\n // lives as little ships\n ctx.textAlign = \"left\";\n ctx.fillStyle = \"#33ff66\";\n for (let i = 0; i < game.lives; i++) {\n ctx.fillText(\"▲\", 12 + i * 18, H - 22);\n }\n}\n\nfunction drawCenter(text, color) {\n ctx.fillStyle = color;\n ctx.font = \"20px 'Press Start 2P', monospace\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(text, W / 2, H / 2);\n}\n\n// ---- main loop ----\nlet last = performance.now();\nfunction loop(now) {\n let dt = (now - last) / 1000;\n last = now;\n if (dt > 0.05) dt = 0.05; // clamp big frame gaps\n update(dt);\n draw();\n clearEdges();\n requestAnimationFrame(loop);\n}\n\n// ---- wiring ----\nfunction begin() {\n if (game.state === State.PLAYING || game.state === State.DYING) return;\n unlock();\n startGame();\n}\ndocument.getElementById(\"start-btn\").addEventListener(\"click\", begin);\ndocument.getElementById(\"again-btn\").addEventListener(\"click\", begin);\nonStart(begin);\ninitTouch();\n\nrequestAnimationFrame(loop);\n",[],[251,261],"5f8c1ca7-94d7-4780-aa5c-586a2dbd3ae4","input.js","332c05f4-6477-11f1-a5ee-1607ee4eb77e",6,["D",1781059854752],"// Centralized input: keyboard + on-screen touch buttons.\n// Exposes a small reactive `keys` object the game loop reads each frame.\n\nexport const keys = {\n left: false,\n right: false,\n fire: false,\n // edge-triggered \"fire was just pressed\" used for menus / single shots\n firePressed: false,\n};\n\nconst LEFT = new Set([\"ArrowLeft\", \"KeyA\"]);\nconst RIGHT = new Set([\"ArrowRight\", \"KeyD\"]);\nconst FIRE = new Set([\"Space\", \"KeyW\", \"ArrowUp\"]);\n\nlet onStartCb = null;\nexport function onStart(cb) {\n onStartCb = cb;\n}\n\naddEventListener(\"keydown\", (e) => {\n if (LEFT.has(e.code)) keys.left = true;\n if (RIGHT.has(e.code)) keys.right = true;\n if (FIRE.has(e.code)) {\n if (!keys.fire) keys.firePressed = true;\n keys.fire = true;\n e.preventDefault();\n }\n if (e.code === \"Enter\" && onStartCb) onStartCb();\n});\n\naddEventListener(\"keyup\", (e) => {\n if (LEFT.has(e.code)) keys.left = false;\n if (RIGHT.has(e.code)) keys.right = false;\n if (FIRE.has(e.code)) keys.fire = false;\n});\n\n// ---- touch controls ----\nfunction bindHold(id, on, off) {\n const el = document.getElementById(id);\n if (!el) return;\n const press = (e) => { e.preventDefault(); on(); };\n const release = (e) => { e.preventDefault(); off(); };\n el.addEventListener(\"touchstart\", press, { passive: false });\n el.addEventListener(\"touchend\", release, { passive: false });\n el.addEventListener(\"touchcancel\", release, { passive: false });\n el.addEventListener(\"mousedown\", press);\n el.addEventListener(\"mouseup\", release);\n el.addEventListener(\"mouseleave\", release);\n}\n\nexport function initTouch() {\n bindHold(\"t-left\", () => (keys.left = true), () => (keys.left = false));\n bindHold(\"t-right\", () => (keys.right = true), () => (keys.right = false));\n bindHold(\n \"t-fire\",\n () => { keys.firePressed = true; keys.fire = true; },\n () => (keys.fire = false),\n );\n}\n\n// Call at the end of each frame to clear edge-triggered flags.\nexport function clearEdges() {\n keys.firePressed = false;\n}\n",[],[251,269],"747bdc9f-bc1b-4183-ad1c-95ce4c07253b","entities.js","4e9bd968-6477-11f1-bc88-1607ee4eb77e",10,["D",1781059900784],"// Game entities: player, alien formation, diving aliens, bullets, explosions.\nimport { drawShip, drawAlien } from \"./sprites.js\";\n\nexport const SCALE = 3;\n\n// ---------------------------------------------------------------- Player\nexport class Player {\n constructor(w, h) {\n this.w = 24;\n this.h = 24;\n this.x = w / 2;\n this.y = h - 50;\n this.bounds = { min: 18, max: w - 18 };\n this.speed = 260; // px/sec\n this.cooldown = 0;\n this.dead = false;\n }\n update(dt, keys) {\n if (keys.left) this.x -= this.speed * dt;\n if (keys.right) this.x += this.speed * dt;\n this.x = Math.max(this.bounds.min, Math.min(this.bounds.max, this.x));\n if (this.cooldown > 0) this.cooldown -= dt;\n }\n canFire() {\n return this.cooldown <= 0;\n }\n draw(ctx) {\n drawShip(ctx, this.x, this.y, SCALE);\n }\n}\n\n// ---------------------------------------------------------------- Bullet\nexport class Bullet {\n constructor(x, y, vy, color) {\n this.x = x;\n this.y = y;\n this.vy = vy;\n this.color = color;\n this.w = 3;\n this.h = 10;\n this.dead = false;\n }\n update(dt) {\n this.y += this.vy * dt;\n }\n draw(ctx) {\n ctx.fillStyle = this.color;\n ctx.fillRect(this.x - this.w / 2, this.y - this.h / 2, this.w, this.h);\n }\n}\n\n// ---------------------------------------------------------------- Alien\n// States: \"formation\" (sitting in the grid, swaying) and \"diving\"\n// (swooping toward the player along a curved path, Galaxian-style).\nexport class Alien {\n constructor(type, col, row, homeX, homeY, points) {\n this.type = type;\n this.col = col;\n this.row = row;\n this.homeX = homeX;\n this.homeY = homeY;\n this.x = homeX;\n this.y = homeY;\n this.points = points;\n this.w = 24;\n this.h = 24;\n this.state = \"formation\";\n this.dead = false;\n this.frame = 0;\n this.diveT = 0;\n this.path = null;\n this.shootTimer = 0.4 + Math.random() * 1.2;\n }\n\n // Build a curved dive path from the current formation slot.\n startDive(targetX, height, dir) {\n this.state = \"diving\";\n this.diveT = 0;\n const startX = this.x;\n const startY = this.y;\n // Control points for a quadratic-ish swoop: peel out sideways, then\n // sweep down across the screen toward the player's x.\n this.path = {\n sx: startX,\n sy: startY,\n // mid control point pushes them out to the side\n cx: startX + dir * (80 + Math.random() * 70),\n cy: startY + 60,\n // end below the screen, biased toward the target\n ex: targetX + (Math.random() * 80 - 40),\n ey: height + 40,\n };\n }\n\n update(dt, formation) {\n this.frame = (this.frame + dt * 4) % 2;\n if (this.state === \"formation\") {\n this.x = this.homeX + formation.offsetX;\n this.y = this.homeY + formation.offsetY;\n } else if (this.state === \"diving\") {\n this.diveT += dt * 0.55;\n const t = this.diveT;\n if (t >= 1) {\n // Looped off the bottom: respawn at top, glide back to formation slot.\n this.state = \"returning\";\n this.y = -20;\n this.x = this.homeX + formation.offsetX;\n return;\n }\n const p = this.path;\n const mt = 1 - t;\n // Quadratic bezier\n this.x = mt * mt * p.sx + 2 * mt * t * p.cx + t * t * p.ex;\n this.y = mt * mt * p.sy + 2 * mt * t * p.cy + t * t * p.ey;\n } else if (this.state === \"returning\") {\n const tx = this.homeX + formation.offsetX;\n const ty = this.homeY + formation.offsetY;\n const dx = tx - this.x;\n const dy = ty - this.y;\n const d = Math.hypot(dx, dy);\n if (d < 4) {\n this.state = \"formation\";\n } else {\n const sp = 200 * dt;\n this.x += (dx / d) * Math.min(sp, d);\n this.y += (dy / d) * Math.min(sp, d);\n }\n }\n }\n\n draw(ctx) {\n // tilt diving aliens slightly toward their travel direction\n drawAlien(ctx, this.type, this.x, this.y, Math.floor(this.frame), SCALE);\n }\n}\n\n// ---------------------------------------------------------------- Explosion\nexport class Explosion {\n constructor(x, y, color = \"#ffcc33\") {\n this.x = x;\n this.y = y;\n this.color = color;\n this.t = 0;\n this.dur = 0.45;\n this.dead = false;\n this.parts = [];\n const n = 10;\n for (let i = 0; i < n; i++) {\n const a = (i / n) * Math.PI * 2 + Math.random() * 0.5;\n const s = 40 + Math.random() * 90;\n this.parts.push({ vx: Math.cos(a) * s, vy: Math.sin(a) * s, x: 0, y: 0 });\n }\n }\n update(dt) {\n this.t += dt;\n if (this.t >= this.dur) this.dead = true;\n for (const p of this.parts) {\n p.x += p.vx * dt;\n p.y += p.vy * dt;\n }\n }\n draw(ctx) {\n const k = 1 - this.t / this.dur;\n ctx.globalAlpha = Math.max(0, k);\n ctx.fillStyle = this.color;\n const size = 3 * k + 1;\n for (const p of this.parts) {\n ctx.fillRect(this.x + p.x - size / 2, this.y + p.y - size / 2, size, size);\n }\n ctx.globalAlpha = 1;\n }\n}\n\n// Axis-aligned bounding box overlap test (entities are center-anchored).\nexport function hit(a, b) {\n return (\n Math.abs(a.x - b.x) < (a.w + b.w) / 2 &&\n Math.abs(a.y - b.y) < (a.h + b.h) / 2\n );\n}\n",[],[251,277],"9eb7a2c3-303b-4548-b0fc-a0c080628192","audio.js","3f7b955e-6477-11f1-84b4-1607ee4eb77e",9,["D",1781059875408],"// Tiny WebAudio sound engine — all sounds synthesized, no asset files.\nlet ctx = null;\nlet enabled = true;\n\nfunction ac() {\n if (!ctx) {\n const AC = window.AudioContext || window.webkitAudioContext;\n ctx = new AC();\n }\n if (ctx.state === \"suspended\") ctx.resume();\n return ctx;\n}\n\n// Must be called from a user gesture (button click) to unlock audio.\nexport function unlock() {\n ac();\n}\n\nexport function setEnabled(v) {\n enabled = v;\n}\n\nfunction tone({ freq = 440, type = \"square\", dur = 0.1, vol = 0.2, slide = 0 }) {\n if (!enabled) return;\n const a = ac();\n const osc = a.createOscillator();\n const gain = a.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, a.currentTime);\n if (slide) {\n osc.frequency.exponentialRampToValueAtTime(\n Math.max(20, freq + slide),\n a.currentTime + dur,\n );\n }\n gain.gain.setValueAtTime(vol, a.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.0001, a.currentTime + dur);\n osc.connect(gain).connect(a.destination);\n osc.start();\n osc.stop(a.currentTime + dur);\n}\n\nfunction noise({ dur = 0.2, vol = 0.3 }) {\n if (!enabled) return;\n const a = ac();\n const frames = a.sampleRate * dur;\n const buffer = a.createBuffer(1, frames, a.sampleRate);\n const data = buffer.getChannelData(0);\n for (let i = 0; i < frames; i++) {\n data[i] = (Math.random() * 2 - 1) * (1 - i / frames);\n }\n const src = a.createBufferSource();\n src.buffer = buffer;\n const gain = a.createGain();\n gain.gain.setValueAtTime(vol, a.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.0001, a.currentTime + dur);\n const filter = a.createBiquadFilter();\n filter.type = \"lowpass\";\n filter.frequency.value = 1200;\n src.connect(filter).connect(gain).connect(a.destination);\n src.start();\n}\n\nexport const sfx = {\n shoot: () => tone({ freq: 880, type: \"square\", dur: 0.08, vol: 0.12, slide: 400 }),\n hit: () => tone({ freq: 220, type: \"sawtooth\", dur: 0.12, vol: 0.18, slide: -160 }),\n explosion: () => noise({ dur: 0.35, vol: 0.35 }),\n dive: () => tone({ freq: 600, type: \"triangle\", dur: 0.25, vol: 0.12, slide: -420 }),\n playerHit: () => noise({ dur: 0.6, vol: 0.4 }),\n levelUp: () => {\n [523, 659, 784, 1047].forEach((f, i) =>\n setTimeout(() => tone({ freq: f, type: \"square\", dur: 0.12, vol: 0.15 }), i * 90)\n );\n },\n extraLife: () => {\n [784, 1047].forEach((f, i) =>\n setTimeout(() => tone({ freq: f, type: \"triangle\", dur: 0.15, vol: 0.18 }), i * 120)\n );\n },\n};\n",[],[251,285],"6f442e9e-eda8-4f6e-8ff8-be4264e47f36",5,["D",1781059845842],"directory",[187,188,189,190,191,192],[251],["D",1781059785998],{"_11":12,"_134":72},{"_11":12,"_130":72,"_71":72,"_30":70,"_131":132,"_133":24},{"_39":119,"_13":16,"_33":36,"_120":83,"_121":63,"_122":64,"_123":87,"_124":125,"_126":127,"_128":14,"_129":12},"ctx",{"_52":-5,"_155":335,"_336":337,"_338":339,"_340":24,"_341":24,"_342":24,"_343":96,"_344":-5,"_345":-7,"_346":-7,"_347":26,"_348":24,"_349":24,"_350":-5,"_351":24,"_352":24,"_353":24,"_354":-5},"ENV",{"_306":307,"_308":309,"_310":16,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html