GALAXIA — Space Shooter

\n ◀ ▶ / A D / mouse to move • SPACE / click to fire • \n view source\n

\n \n\n\n",[147],"f49a894e-5c8f-4ce3-a238-2af2c760f324","game.js","7d2219da-646f-11f1-824f-1607ee4eb77e",4,["D",1781056542864],"// GALAXIA — a Galaxian/Galaga-style space shooter\nconst canvas = document.getElementById(\"game\");\nconst ctx = canvas.getContext(\"2d\");\nconst W = canvas.width;\nconst H = canvas.height;\n\n// ---------- Input ----------\nconst keys = {};\nlet pointerX = null;\naddEventListener(\"keydown\", (e) => {\n keys[e.code] = true;\n if ([\"ArrowLeft\", \"ArrowRight\", \"Space\"].includes(e.code)) e.preventDefault();\n if (e.code === \"Space\") tryFire();\n if (game.state !== \"playing\" && (e.code === \"Space\" || e.code === \"Enter\")) startGame();\n});\naddEventListener(\"keyup\", (e) => (keys[e.code] = false));\n\nfunction canvasX(clientX) {\n const r = canvas.getBoundingClientRect();\n return ((clientX - r.left) / r.width) * W;\n}\ncanvas.addEventListener(\"mousemove\", (e) => (pointerX = canvasX(e.clientX)));\ncanvas.addEventListener(\"mousedown\", () => {\n if (game.state !== \"playing\") startGame();\n else tryFire();\n});\ncanvas.addEventListener(\"touchmove\", (e) => {\n pointerX = canvasX(e.touches[0].clientX);\n e.preventDefault();\n}, { passive: false });\ncanvas.addEventListener(\"touchstart\", (e) => {\n pointerX = canvasX(e.touches[0].clientX);\n if (game.state !== \"playing\") startGame();\n else tryFire();\n e.preventDefault();\n}, { passive: false });\n\n// ---------- Game state ----------\nconst game = {\n state: \"start\", // start | playing | over\n score: 0,\n high: Number(localStorage.getItem(\"galaxia_high\") || 0),\n lives: 3,\n wave: 1,\n};\n\nconst player = { x: W / 2, y: H - 50, w: 34, h: 22, speed: 5, cooldown: 0 };\nlet bullets = []; // player shots\nlet enemyBullets = []; // enemy shots\nlet enemies = [];\nlet particles = [];\nlet stars = [];\n\n// starfield background\nfor (let i = 0; i < 70; i++) {\n stars.push({ x: Math.random() * W, y: Math.random() * H, s: Math.random() * 1.6 + 0.3 });\n}\n\n// ---------- Enemy formation ----------\nconst COLORS = [\"#ff5d5d\", \"#ffd35d\", \"#5dff8f\", \"#5db8ff\", \"#c95dff\"];\nfunction buildWave(wave) {\n enemies = [];\n const rows = 4;\n const cols = 8;\n const startX = 50;\n const gapX = (W - 100) / (cols - 1);\n const startY = 70;\n const gapY = 42;\n for (let r = 0; r < rows; r++) {\n for (let c = 0; c < cols; c++) {\n enemies.push({\n homeX: startX + c * gapX,\n homeY: startY + r * gapY,\n x: startX + c * gapX,\n y: startY + r * gapY,\n w: 28, h: 22,\n color: COLORS[r % COLORS.length],\n points: (rows - r) * 10,\n state: \"formation\", // formation | diving\n diveT: 0,\n path: null,\n cooldown: Math.random() * 300 + 60,\n });\n }\n }\n}\n\nlet formationDir = 1;\nlet formationOffset = 0;\n\n// ---------- Helpers ----------\nfunction tryFire() {\n if (game.state !== \"playing\") return;\n if (player.cooldown > 0) return;\n bullets.push({ x: player.x, y: player.y - player.h / 2, w: 4, h: 12, speed: 9 });\n player.cooldown = 12;\n}\n\nfunction boom(x, y, color, count = 14) {\n for (let i = 0; i < count; i++) {\n const a = Math.random() * Math.PI * 2;\n const sp = Math.random() * 3 + 1;\n particles.push({ x, y, vx: Math.cos(a) * sp, vy: Math.sin(a) * sp, life: 30, color });\n }\n}\n\nfunction startGame() {\n game.state = \"playing\";\n game.score = 0;\n game.lives = 3;\n game.wave = 1;\n bullets = []; enemyBullets = []; particles = [];\n player.x = W / 2; player.cooldown = 0;\n buildWave(game.wave);\n}\n\nfunction loseLife() {\n game.lives--;\n boom(player.x, player.y, \"#5db8ff\", 26);\n if (game.lives <= 0) {\n game.state = \"over\";\n if (game.score > game.high) {\n game.high = game.score;\n localStorage.setItem(\"galaxia_high\", String(game.high));\n }\n } else {\n player.x = W / 2;\n enemyBullets = [];\n }\n}\n\nfunction rectHit(a, b) {\n return Math.abs(a.x - b.x) < (a.w + b.w) / 2 && Math.abs(a.y - b.y) < (a.h + b.h) / 2;\n}\n\n// ---------- Update ----------\nfunction update() {\n // stars scroll\n for (const s of stars) {\n s.y += s.s * 0.6;\n if (s.y > H) { s.y = 0; s.x = Math.random() * W; }\n }\n\n if (game.state !== \"playing\") return;\n\n // player movement\n if (keys[\"ArrowLeft\"] || keys[\"KeyA\"]) player.x -= player.speed;\n if (keys[\"ArrowRight\"] || keys[\"KeyD\"]) player.x += player.speed;\n if (pointerX !== null) player.x += (pointerX - player.x) * 0.3;\n player.x = Math.max(player.w / 2, Math.min(W - player.w / 2, player.x));\n if (player.cooldown > 0) player.cooldown--;\n if (keys[\"Space\"]) tryFire();\n\n // formation sway\n formationOffset += formationDir * 0.4;\n if (Math.abs(formationOffset) > 24) formationDir *= -1;\n\n const speedScale = 1 + (game.wave - 1) * 0.15;\n\n // enemies\n for (const e of enemies) {\n if (e.state === \"formation\") {\n e.x = e.homeX + formationOffset;\n e.y = e.homeY;\n e.cooldown -= 1;\n // start a dive\n if (e.cooldown <= 0 && Math.random() < 0.004 * speedScale) {\n e.state = \"diving\";\n e.diveT = 0;\n e.startX = e.x;\n e.startY = e.y;\n e.dir = player.x < e.x ? -1 : 1;\n }\n // formation shooting\n if (Math.random() < 0.0008 * speedScale) {\n enemyBullets.push({ x: e.x, y: e.y + e.h / 2, w: 4, h: 10, speed: 3.5 * speedScale });\n }\n } else if (e.state === \"diving\") {\n e.diveT += 0.02 * speedScale;\n e.x += Math.sin(e.diveT * 6) * 2.4 * e.dir;\n e.y += 3.2 * speedScale;\n if (Math.random() < 0.02) {\n enemyBullets.push({ x: e.x, y: e.y + e.h / 2, w: 4, h: 10, speed: 4 * speedScale });\n }\n // flew off bottom -> return to formation at top\n if (e.y > H + 30) {\n e.state = \"formation\";\n e.y = e.homeY;\n e.cooldown = Math.random() * 240 + 120;\n }\n }\n // enemy reaches player line\n if (e.y > player.y - 20 && rectHit(e, player)) {\n boom(e.x, e.y, e.color);\n e.state = \"formation\"; e.y = e.homeY; e.cooldown = 240;\n loseLife();\n }\n }\n\n // player bullets\n for (let i = bullets.length - 1; i >= 0; i--) {\n const b = bullets[i];\n b.y -= b.speed;\n if (b.y < -20) { bullets.splice(i, 1); continue; }\n for (let j = enemies.length - 1; j >= 0; j--) {\n const e = enemies[j];\n if (rectHit(b, e)) {\n game.score += e.points + (e.state === \"diving\" ? e.points : 0);\n boom(e.x, e.y, e.color);\n enemies.splice(j, 1);\n bullets.splice(i, 1);\n break;\n }\n }\n }\n\n // enemy bullets\n for (let i = enemyBullets.length - 1; i >= 0; i--) {\n const b = enemyBullets[i];\n b.y += b.speed;\n if (b.y > H + 20) { enemyBullets.splice(i, 1); continue; }\n if (rectHit(b, player)) {\n enemyBullets.splice(i, 1);\n loseLife();\n }\n }\n\n // particles\n for (let i = particles.length - 1; i >= 0; i--) {\n const p = particles[i];\n p.x += p.vx; p.y += p.vy; p.vy += 0.05; p.life--;\n if (p.life <= 0) particles.splice(i, 1);\n }\n\n // wave cleared\n if (enemies.length === 0) {\n game.wave++;\n game.score += 100;\n buildWave(game.wave);\n }\n}\n\n// ---------- Draw ----------\nfunction drawShip(x, y, w, h) {\n ctx.fillStyle = \"#5db8ff\";\n ctx.beginPath();\n ctx.moveTo(x, y - h / 2);\n ctx.lineTo(x - w / 2, y + h / 2);\n ctx.lineTo(x - w / 6, y + h / 4);\n ctx.lineTo(x + w / 6, y + h / 4);\n ctx.lineTo(x + w / 2, y + h / 2);\n ctx.closePath();\n ctx.fill();\n ctx.fillStyle = \"#cdeaff\";\n ctx.fillRect(x - 2, y - h / 4, 4, h / 2);\n}\n\nfunction drawEnemy(e) {\n ctx.fillStyle = e.color;\n const x = e.x, y = e.y, w = e.w, h = e.h;\n // body\n ctx.fillRect(x - w / 2, y - h / 4, w, h / 2);\n // wings\n ctx.fillRect(x - w / 2 - 3, y - h / 6, 4, h / 3);\n ctx.fillRect(x + w / 2 - 1, y - h / 6, 4, h / 3);\n // head\n ctx.fillRect(x - w / 4, y - h / 2, w / 2, h / 4);\n // eyes\n ctx.fillStyle = \"#02020c\";\n ctx.fillRect(x - w / 5, y - h / 8, 4, 4);\n ctx.fillRect(x + w / 5 - 4, y - h / 8, 4, 4);\n}\n\nfunction text(str, x, y, size = 16, color = \"#fff\", align = \"center\") {\n ctx.fillStyle = color;\n ctx.font = `bold ${size}px \"Courier New\", monospace`;\n ctx.textAlign = align;\n ctx.fillText(str, x, y);\n}\n\nfunction draw() {\n ctx.clearRect(0, 0, W, H);\n\n // stars\n for (const s of stars) {\n ctx.fillStyle = `rgba(255,255,255,${0.3 + s.s * 0.4})`;\n ctx.fillRect(s.x, s.y, s.s, s.s);\n }\n\n // particles\n for (const p of particles) {\n ctx.globalAlpha = Math.max(0, p.life / 30);\n ctx.fillStyle = p.color;\n ctx.fillRect(p.x, p.y, 3, 3);\n }\n ctx.globalAlpha = 1;\n\n if (game.state === \"playing\") {\n for (const e of enemies) drawEnemy(e);\n\n ctx.fillStyle = \"#ffe98a\";\n for (const b of bullets) ctx.fillRect(b.x - b.w / 2, b.y - b.h / 2, b.w, b.h);\n ctx.fillStyle = \"#ff7d7d\";\n for (const b of enemyBullets) ctx.fillRect(b.x - b.w / 2, b.y - b.h / 2, b.w, b.h);\n\n drawShip(player.x, player.y, player.w, player.h);\n }\n\n // HUD\n text(`SCORE ${game.score}`, 12, 24, 16, \"#fff\", \"left\");\n text(`HI ${game.high}`, W / 2, 24, 16, \"#ffd35d\");\n text(`WAVE ${game.wave}`, W - 12, 24, 16, \"#5dff8f\", \"right\");\n // lives\n for (let i = 0; i < game.lives; i++) {\n drawShip(20 + i * 26, H - 16, 18, 14);\n }\n\n if (game.state === \"start\") {\n text(\"GALAXIA\", W / 2, H / 2 - 60, 48, \"#5db8ff\");\n text(\"SPACE SHOOTER\", W / 2, H / 2 - 24, 18, \"#c95dff\");\n text(\"Press SPACE / Tap to Start\", W / 2, H / 2 + 30, 16, \"#fff\");\n text(`High Score: ${game.high}`, W / 2, H / 2 + 64, 14, \"#ffd35d\");\n } else if (game.state === \"over\") {\n text(\"GAME OVER\", W / 2, H / 2 - 30, 40, \"#ff5d5d\");\n text(`Score: ${game.score}`, W / 2, H / 2 + 10, 20, \"#fff\");\n text(`High: ${game.high}`, W / 2, H / 2 + 38, 16, \"#ffd35d\");\n text(\"Press SPACE / Tap to Retry\", W / 2, H / 2 + 76, 14, \"#fff\");\n }\n}\n\n// ---------- Loop ----------\nfunction loop() {\n update();\n draw();\n requestAnimationFrame(loop);\n}\nloop();\n",[154],"pulls","branches","forks","envVars",{"_167":67,"_169":67},"connections",{"_167":67,"_168":67},"count","unfilledCount","emptyCount",{"_48":153,"_38":154,"_36":155,"_137":-5,"_46":47,"_45":156,"_139":54,"_43":180,"_13":67,"_39":40,"_41":158,"_30":54,"_144":-5,"_174":181,"_33":182},{"_48":146,"_38":147,"_36":148,"_137":-5,"_46":47,"_45":149,"_139":54,"_43":177,"_13":67,"_39":26,"_41":151,"_30":54,"_144":-5,"_174":178,"_33":179},{"_48":134,"_38":135,"_36":136,"_137":-5,"_46":47,"_45":138,"_139":54,"_43":173,"_13":141,"_39":142,"_41":143,"_30":54,"_144":-5,"_174":175,"_33":176},["D",1781056554388],"children",[],[135],["D",1781056495947],[],[147],["D",1781056542864],[],[154],["D",1781056326693],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_19":61,"_106":107,"_108":54},{"_13":90,"_38":91,"_48":47,"_92":49,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":50,"_99":100},"ctx",{"_83":-5,"_128":220,"_221":222,"_223":224,"_225":54,"_226":54,"_227":54,"_228":31,"_229":-5,"_230":-7,"_231":-7,"_232":67,"_233":54,"_234":54,"_235":-5,"_236":54,"_237":54,"_238":54,"_239":-5},"ENV",{"_191":192,"_193":194,"_195":91,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Diff · v6