[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69eb6f93fba88191aca6b124a773d446","versionInt","title","Neon Arena Survivor No Dependencies","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\n\nconst VIEW_W = 960;\nconst VIEW_H = 620;\nconst PLAYER_R = 16;\nconst BASE_PLAYER_SPEED = 4.2;\nconst ENEMY_LIMIT = 160;\nconst TWO_PI = Math.PI * 2;\n\nfunction clamp(value, min, max) {\n return Math.max(min, Math.min(max, value));\n}\n\nfunction dist(a, b) {\n const dx = b.x - a.x;\n const dy = b.y - a.y;\n return Math.sqrt(dx * dx + dy * dy);\n}\n\nfunction angleTo(a, b) {\n return Math.atan2(b.y - a.y, b.x - a.x);\n}\n\nfunction randomRange(min, max) {\n return min + Math.random() * (max - min);\n}\n\nfunction spawnAtEdge() {\n const side = Math.floor(Math.random() * 4);\n if (side === 0) return { x: randomRange(-40, VIEW_W + 40), y: -40 };\n if (side === 1) return { x: VIEW_W + 40, y: randomRange(-40, VIEW_H + 40) };\n if (side === 2) return { x: randomRange(-40, VIEW_W + 40), y: VIEW_H + 40 };\n return { x: -40, y: randomRange(-40, VIEW_H + 40) };\n}\n\nfunction drawRoundedRect(ctx, x, y, w, h, r) {\n const radius = Math.min(r, w / 2, h / 2);\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.lineTo(x + w - radius, y);\n ctx.quadraticCurveTo(x + w, y, x + w, y + radius);\n ctx.lineTo(x + w, y + h - radius);\n ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);\n ctx.lineTo(x + radius, y + h);\n ctx.quadraticCurveTo(x, y + h, x, y + h - radius);\n ctx.lineTo(x, y + radius);\n ctx.quadraticCurveTo(x, y, x + radius, y);\n ctx.closePath();\n}\n\nfunction makeEnemy(wave) {\n const p = spawnAtEdge();\n const elite = Math.random() < Math.min(0.05 + wave * 0.006, 0.22);\n const fast = !elite && Math.random() < Math.min(0.12 + wave * 0.006, 0.34);\n const tank = !elite && !fast && Math.random() < Math.min(0.08 + wave * 0.004, 0.26);\n\n let type = \"grunt\";\n let r = 13;\n let hp = 16 + wave * 2.1;\n let speed = 1.25 + wave * 0.018;\n let value = 1;\n\n if (fast) {\n type = \"fast\";\n r = 10;\n hp *= 0.7;\n speed *= 1.72;\n value = 1;\n }\n\n if (tank) {\n type = \"tank\";\n r = 21;\n hp *= 3.0;\n speed *= 0.62;\n value = 3;\n }\n\n if (elite) {\n type = \"elite\";\n r = 18;\n hp *= 4.8;\n speed *= 1.08;\n value = 7;\n }\n\n return {\n x: p.x,\n y: p.y,\n vx: 0,\n vy: 0,\n r,\n hp,\n maxHp: hp,\n speed,\n type,\n value,\n hit: 0,\n phase: Math.random() * 1000,\n };\n}\n\nfunction makeGame() {\n return {\n player: {\n x: VIEW_W / 2,\n y: VIEW_H / 2,\n vx: 0,\n vy: 0,\n hp: 100,\n maxHp: 100,\n speed: BASE_PLAYER_SPEED,\n invuln: 0,\n dash: 0,\n dashCooldown: 0,\n aimAngle: 0,\n },\n bullets: [],\n enemies: [],\n gems: [],\n particles: [],\n floatingTexts: [],\n stars: Array.from({ length: 120 }, () => ({ x: Math.random() * VIEW_W, y: Math.random() * VIEW_H, r: Math.random() * 1.8 + 0.4, speed: Math.random() * 0.25 + 0.05 })),\n frame: 0,\n score: 0,\n level: 1,\n xp: 0,\n xpNext: 12,\n wave: 1,\n waveTimer: 0,\n spawnTimer: 0,\n fireTimer: 0,\n fireRate: 16,\n bulletDamage: 14,\n bulletSpeed: 9.5,\n bulletLife: 72,\n spread: 1,\n pierce: 0,\n magnet: 78,\n regen: 0,\n upgrades: [],\n pausedForUpgrade: false,\n upgradeChoices: [],\n gameOver: false,\n message: \"WASD 이동 · 마우스 조준 · 자동 발사 · Space 대시\",\n };\n}\n\nconst UPGRADE_POOL = [\n {\n id: \"damage\",\n title: \"Plasma Core\",\n ko: \"탄환 피해 +6\",\n apply: (g) => {\n g.bulletDamage += 6;\n g.message = \"탄환이 더 강해졌습니다.\";\n },\n },\n {\n id: \"rapid\",\n title: \"Overclock\",\n ko: \"발사 속도 증가\",\n apply: (g) => {\n g.fireRate = Math.max(5, g.fireRate - 2);\n g.message = \"무기 연사가 빨라졌습니다.\";\n },\n },\n {\n id: \"spread\",\n title: \"Split Barrel\",\n ko: \"탄환 수 +1\",\n apply: (g) => {\n g.spread = Math.min(7, g.spread + 1);\n g.message = \"동시에 더 많은 탄환을 발사합니다.\";\n },\n },\n {\n id: \"speed\",\n title: \"Light Boots\",\n ko: \"이동 속도 +0.45\",\n apply: (g) => {\n g.player.speed += 0.45;\n g.message = \"기동성이 상승했습니다.\";\n },\n },\n {\n id: \"magnet\",\n title: \"Gravity Ring\",\n ko: \"경험치 흡수 범위 증가\",\n apply: (g) => {\n g.magnet += 52;\n g.message = \"멀리 있는 에너지 조각도 끌어옵니다.\";\n },\n },\n {\n id: \"heart\",\n title: \"Nano Repair\",\n ko: \"최대 체력 +25, 회복\",\n apply: (g) => {\n g.player.maxHp += 25;\n g.player.hp = Math.min(g.player.maxHp, g.player.hp + 45);\n g.message = \"최대 체력과 현재 체력이 상승했습니다.\";\n },\n },\n {\n id: \"pierce\",\n title: \"Phase Rounds\",\n ko: \"관통 +1\",\n apply: (g) => {\n g.pierce += 1;\n g.message = \"탄환이 적을 관통합니다.\";\n },\n },\n {\n id: \"regen\",\n title: \"Bio Battery\",\n ko: \"천천히 체력 재생\",\n apply: (g) => {\n g.regen += 0.014;\n g.message = \"생체 배터리가 체력을 조금씩 회복합니다.\";\n },\n },\n];\n\nfunction pickUpgrades() {\n const pool = [...UPGRADE_POOL];\n const choices = [];\n while (choices.length < 3 && pool.length > 0) {\n const index = Math.floor(Math.random() * pool.length);\n choices.push(pool.splice(index, 1)[0]);\n }\n return choices;\n}\n\nfunction addFloatingText(game, x, y, text, color = \"#f8fafc\") {\n game.floatingTexts.push({ x, y, text, color, life: 52, vy: -0.7 });\n}\n\nfunction addParticles(game, x, y, color, count = 10, speed = 3) {\n for (let i = 0; i < count; i++) {\n const a = Math.random() * TWO_PI;\n const s = Math.random() * speed;\n game.particles.push({\n x,\n y,\n vx: Math.cos(a) * s,\n vy: Math.sin(a) * s,\n r: randomRange(1.5, 4.5),\n color,\n life: randomRange(18, 42),\n });\n }\n}\n\nfunction nearestEnemy(game) {\n let best = null;\n let bestDist = Infinity;\n for (const e of game.enemies) {\n const d = dist(game.player, e);\n if (d < bestDist) {\n best = e;\n bestDist = d;\n }\n }\n return best;\n}\n\nfunction fireWeapon(game, mouse) {\n const p = game.player;\n const target = nearestEnemy(game);\n let baseAngle = p.aimAngle;\n if (target) baseAngle = angleTo(p, target);\n else if (mouse) baseAngle = Math.atan2(mouse.y - p.y, mouse.x - p.x);\n\n p.aimAngle = baseAngle;\n\n const count = game.spread;\n const arc = Math.min(0.62, 0.11 * (count - 1));\n for (let i = 0; i < count; i++) {\n const t = count === 1 ? 0 : i / (count - 1) - 0.5;\n const a = baseAngle + t * arc;\n game.bullets.push({\n x: p.x + Math.cos(a) * 20,\n y: p.y + Math.sin(a) * 20,\n vx: Math.cos(a) * game.bulletSpeed,\n vy: Math.sin(a) * game.bulletSpeed,\n r: 5,\n damage: game.bulletDamage,\n life: game.bulletLife,\n pierceLeft: game.pierce,\n });\n }\n addParticles(game, p.x + Math.cos(baseAngle) * 24, p.y + Math.sin(baseAngle) * 24, \"#93c5fd\", 4, 1.8);\n}\n\nfunction gainXp(game, amount) {\n game.xp += amount;\n while (game.xp >= game.xpNext) {\n game.xp -= game.xpNext;\n game.level += 1;\n game.xpNext = Math.floor(game.xpNext * 1.22 + 8);\n game.pausedForUpgrade = true;\n game.upgradeChoices = pickUpgrades();\n game.message = \"레벨업! 오른쪽에서 업그레이드를 고르세요.\";\n }\n}\n\nfunction updateGame(game, keys, mouse) {\n if (game.gameOver || game.pausedForUpgrade) return;\n\n const p = game.player;\n const inputX = (keys.KeyD || keys.ArrowRight ? 1 : 0) - (keys.KeyA || keys.ArrowLeft ? 1 : 0);\n const inputY = (keys.KeyS || keys.ArrowDown ? 1 : 0) - (keys.KeyW || keys.ArrowUp ? 1 : 0);\n const mag = Math.sqrt(inputX * inputX + inputY * inputY) || 1;\n const dashPressed = keys.Space && !keys.dashLock;\n\n if (dashPressed && p.dashCooldown <= 0) {\n p.dash = 13;\n p.dashCooldown = 82;\n p.invuln = Math.max(p.invuln, 18);\n keys.dashLock = true;\n addParticles(game, p.x, p.y, \"#60a5fa\", 22, 4.5);\n }\n if (!keys.Space) keys.dashLock = false;\n\n const speed = p.speed + (p.dash > 0 ? 8.8 : 0);\n p.vx = (inputX / mag) * speed;\n p.vy = (inputY / mag) * speed;\n p.x = clamp(p.x + p.vx, PLAYER_R + 12, VIEW_W - PLAYER_R - 12);\n p.y = clamp(p.y + p.vy, PLAYER_R + 12, VIEW_H - PLAYER_R - 12);\n if (p.dash > 0) p.dash -= 1;\n if (p.dashCooldown > 0) p.dashCooldown -= 1;\n if (p.invuln > 0) p.invuln -= 1;\n if (game.regen > 0 && game.frame % 12 === 0) p.hp = Math.min(p.maxHp, p.hp + game.regen * 12);\n\n if (mouse) p.aimAngle = Math.atan2(mouse.y - p.y, mouse.x - p.x);\n\n game.waveTimer += 1;\n game.spawnTimer -= 1;\n if (game.waveTimer > 900) {\n game.wave += 1;\n game.waveTimer = 0;\n game.message = `Wave ${game.wave} 진입`;\n addFloatingText(game, VIEW_W / 2, 120, `WAVE ${game.wave}`, \"#facc15\");\n }\n\n const spawnGap = Math.max(9, 52 - game.wave * 2.2);\n if (game.spawnTimer <= 0 && game.enemies.length < ENEMY_LIMIT) {\n game.spawnTimer = spawnGap;\n const burst = game.wave % 4 === 0 ? 2 : 1;\n for (let i = 0; i < burst; i++) game.enemies.push(makeEnemy(game.wave));\n }\n\n game.fireTimer -= 1;\n if (game.fireTimer <= 0) {\n game.fireTimer = game.fireRate;\n fireWeapon(game, mouse);\n }\n\n for (const e of game.enemies) {\n const a = angleTo(e, p);\n const wobble = Math.sin(game.frame * 0.035 + e.phase) * 0.42;\n const speed = e.speed * (e.hit > 0 ? 0.55 : 1);\n e.vx = Math.cos(a + wobble * 0.1) * speed;\n e.vy = Math.sin(a + wobble * 0.1) * speed;\n e.x += e.vx;\n e.y += e.vy;\n if (e.hit > 0) e.hit -= 1;\n\n const d = dist(e, p);\n if (d < e.r + PLAYER_R && p.invuln <= 0) {\n const damage = e.type === \"tank\" ? 16 : e.type === \"elite\" ? 22 : 10;\n p.hp -= damage;\n p.invuln = 42;\n p.vx -= Math.cos(a) * 8;\n p.vy -= Math.sin(a) * 8;\n addParticles(game, p.x, p.y, \"#fb7185\", 18, 4);\n addFloatingText(game, p.x, p.y - 24, `-${damage}`, \"#fb7185\");\n game.message = \"충돌 피해! 대시로 빠져나오세요.\";\n if (p.hp <= 0) {\n p.hp = 0;\n game.gameOver = true;\n game.message = \"게임 오버. Restart로 다시 시작하세요.\";\n addParticles(game, p.x, p.y, \"#f43f5e\", 60, 7);\n }\n }\n }\n\n for (const b of game.bullets) {\n b.x += b.vx;\n b.y += b.vy;\n b.life -= 1;\n\n for (const e of game.enemies) {\n if (e.hp <= 0) continue;\n const dx = e.x - b.x;\n const dy = e.y - b.y;\n const hitRange = e.r + b.r;\n if (dx * dx + dy * dy < hitRange * hitRange) {\n e.hp -= b.damage;\n e.hit = 8;\n addParticles(game, b.x, b.y, e.type === \"elite\" ? \"#facc15\" : \"#f87171\", 5, 2.6);\n if (e.hp <= 0) {\n game.score += e.value * 25;\n game.gems.push({ x: e.x, y: e.y, r: 6 + Math.min(e.value, 5), value: e.value, vx: randomRange(-1.2, 1.2), vy: randomRange(-1.2, 1.2) });\n if (Math.random() < 0.045) game.gems.push({ x: e.x + 8, y: e.y - 8, r: 8, value: \"heal\", vx: randomRange(-1, 1), vy: randomRange(-1, 1) });\n addParticles(game, e.x, e.y, e.type === \"elite\" ? \"#fde047\" : \"#ef4444\", e.type === \"tank\" || e.type === \"elite\" ? 28 : 14, 4.2);\n }\n if (b.pierceLeft > 0) b.pierceLeft -= 1;\n else b.life = 0;\n break;\n }\n }\n }\n\n game.bullets = game.bullets.filter((b) => b.life > 0 && b.x > -40 && b.x < VIEW_W + 40 && b.y > -40 && b.y < VIEW_H + 40);\n game.enemies = game.enemies.filter((e) => e.hp > 0);\n\n for (const gem of game.gems) {\n const d = dist(gem, p);\n const pullRange = gem.value === \"heal\" ? game.magnet * 0.7 : game.magnet;\n if (d < pullRange) {\n const a = angleTo(gem, p);\n const pull = gem.value === \"heal\" ? 0.52 : 0.38;\n gem.vx += Math.cos(a) * pull;\n gem.vy += Math.sin(a) * pull;\n }\n gem.x += gem.vx;\n gem.y += gem.vy;\n gem.vx *= 0.92;\n gem.vy *= 0.92;\n\n if (d < PLAYER_R + gem.r + 4) {\n gem.collected = true;\n if (gem.value === \"heal\") {\n p.hp = Math.min(p.maxHp, p.hp + 18);\n addFloatingText(game, p.x, p.y - 26, \"+18 HP\", \"#4ade80\");\n } else {\n gainXp(game, gem.value);\n game.score += gem.value * 6;\n }\n }\n }\n game.gems = game.gems.filter((g) => !g.collected);\n\n for (const part of game.particles) {\n part.x += part.vx;\n part.y += part.vy;\n part.vx *= 0.97;\n part.vy *= 0.97;\n part.life -= 1;\n part.r *= 0.98;\n }\n game.particles = game.particles.filter((p) => p.life > 0 && p.r > 0.2);\n\n for (const t of game.floatingTexts) {\n t.y += t.vy;\n t.life -= 1;\n }\n game.floatingTexts = game.floatingTexts.filter((t) => t.life > 0);\n\n for (const star of game.stars) {\n star.y += star.speed;\n if (star.y > VIEW_H) {\n star.y = -4;\n star.x = Math.random() * VIEW_W;\n }\n }\n\n game.frame += 1;\n}\n\nexport default function NeonArenaSurvivor() {\n const canvasRef = useRef(null);\n const animationRef = useRef(null);\n const gameRef = useRef(makeGame());\n const keysRef = useRef({});\n const mouseRef = useRef({ x: VIEW_W / 2, y: VIEW_H / 2, inside: false });\n const [ui, setUi] = useState({ score: 0, hp: 100, maxHp: 100, level: 1, xp: 0, xpNext: 12, wave: 1, enemies: 0, message: gameRef.current.message, pausedForUpgrade: false, choices: [] });\n\n function reset() {\n gameRef.current = makeGame();\n keysRef.current = {};\n setUi({ score: 0, hp: 100, maxHp: 100, level: 1, xp: 0, xpNext: 12, wave: 1, enemies: 0, message: gameRef.current.message, pausedForUpgrade: false, choices: [] });\n }\n\n function chooseUpgrade(upgrade) {\n const game = gameRef.current;\n upgrade.apply(game);\n game.upgrades.push(upgrade.id);\n game.pausedForUpgrade = false;\n game.upgradeChoices = [];\n setUi((old) => ({ ...old, pausedForUpgrade: false, choices: [], message: game.message }));\n }\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext(\"2d\");\n const dpr = window.devicePixelRatio || 1;\n let lastTime = performance.now();\n\n function resize() {\n const rect = canvas.getBoundingClientRect();\n canvas.width = Math.floor(rect.width * dpr);\n canvas.height = Math.floor(rect.height * dpr);\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n }\n\n function getScale() {\n const rect = canvas.getBoundingClientRect();\n const scale = Math.min(rect.width / VIEW_W, rect.height / VIEW_H);\n const offsetX = (rect.width - VIEW_W * scale) / 2;\n const offsetY = (rect.height - VIEW_H * scale) / 2;\n return { scale, offsetX, offsetY, rect };\n }\n\n function setCanvasTransform() {\n const { scale, offsetX, offsetY } = getScale();\n ctx.setTransform(dpr * scale, 0, 0, dpr * scale, dpr * offsetX, dpr * offsetY);\n }\n\n function clientToWorld(clientX, clientY) {\n const { scale, offsetX, offsetY, rect } = getScale();\n return {\n x: clamp((clientX - rect.left - offsetX) / scale, 0, VIEW_W),\n y: clamp((clientY - rect.top - offsetY) / scale, 0, VIEW_H),\n };\n }\n\n function drawBackground(game) {\n const gradient = ctx.createRadialGradient(VIEW_W * 0.5, VIEW_H * 0.45, 80, VIEW_W * 0.5, VIEW_H * 0.45, VIEW_W * 0.75);\n gradient.addColorStop(0, \"#172554\");\n gradient.addColorStop(0.55, \"#0f172a\");\n gradient.addColorStop(1, \"#020617\");\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, VIEW_W, VIEW_H);\n\n for (const star of game.stars) {\n ctx.fillStyle = `rgba(226,232,240,${0.35 + star.r * 0.18})`;\n ctx.beginPath();\n ctx.arc(star.x, star.y, star.r, 0, TWO_PI);\n ctx.fill();\n }\n\n ctx.strokeStyle = \"rgba(59, 130, 246, 0.13)\";\n ctx.lineWidth = 1;\n const gridSize = 48;\n const offset = (game.frame * 0.35) % gridSize;\n for (let x = -gridSize; x < VIEW_W + gridSize; x += gridSize) {\n ctx.beginPath();\n ctx.moveTo(x + offset, 0);\n ctx.lineTo(x + offset, VIEW_H);\n ctx.stroke();\n }\n for (let y = -gridSize; y < VIEW_H + gridSize; y += gridSize) {\n ctx.beginPath();\n ctx.moveTo(0, y + offset);\n ctx.lineTo(VIEW_W, y + offset);\n ctx.stroke();\n }\n }\n\n function drawPlayer(player, game) {\n const flicker = player.invuln > 0 && Math.floor(player.invuln / 4) % 2 === 0;\n if (flicker) return;\n\n ctx.save();\n ctx.translate(player.x, player.y);\n ctx.rotate(player.aimAngle);\n\n const glow = ctx.createRadialGradient(0, 0, 3, 0, 0, 42);\n glow.addColorStop(0, \"rgba(96, 165, 250, 0.55)\");\n glow.addColorStop(1, \"rgba(96, 165, 250, 0)\");\n ctx.fillStyle = glow;\n ctx.beginPath();\n ctx.arc(0, 0, 42, 0, TWO_PI);\n ctx.fill();\n\n ctx.fillStyle = player.dash > 0 ? \"#bfdbfe\" : \"#60a5fa\";\n ctx.beginPath();\n ctx.moveTo(24, 0);\n ctx.lineTo(-15, -14);\n ctx.lineTo(-8, 0);\n ctx.lineTo(-15, 14);\n ctx.closePath();\n ctx.fill();\n ctx.strokeStyle = \"#dbeafe\";\n ctx.lineWidth = 2;\n ctx.stroke();\n\n ctx.fillStyle = \"#0f172a\";\n ctx.beginPath();\n ctx.arc(2, 0, 6, 0, TWO_PI);\n ctx.fill();\n\n ctx.restore();\n\n if (player.dashCooldown > 0) {\n const pct = 1 - player.dashCooldown / 82;\n ctx.strokeStyle = \"rgba(96,165,250,0.7)\";\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.arc(player.x, player.y, 27, -Math.PI / 2, -Math.PI / 2 + pct * TWO_PI);\n ctx.stroke();\n }\n }\n\n function drawEnemy(enemy, game) {\n const hpPct = clamp(enemy.hp / enemy.maxHp, 0, 1);\n let color = \"#ef4444\";\n let edge = \"#fecaca\";\n if (enemy.type === \"fast\") {\n color = \"#f97316\";\n edge = \"#fed7aa\";\n }\n if (enemy.type === \"tank\") {\n color = \"#7f1d1d\";\n edge = \"#fca5a5\";\n }\n if (enemy.type === \"elite\") {\n color = \"#a855f7\";\n edge = \"#fde047\";\n }\n if (enemy.hit > 0) color = \"#ffffff\";\n\n ctx.save();\n ctx.translate(enemy.x, enemy.y);\n const spin = game.frame * 0.025 + enemy.phase;\n ctx.rotate(spin);\n\n const sides = enemy.type === \"fast\" ? 3 : enemy.type === \"tank\" ? 6 : enemy.type === \"elite\" ? 8 : 5;\n ctx.beginPath();\n for (let i = 0; i < sides; i++) {\n const a = (i / sides) * TWO_PI;\n const radius = enemy.r * (i % 2 === 0 ? 1.05 : 0.82);\n const x = Math.cos(a) * radius;\n const y = Math.sin(a) * radius;\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n }\n ctx.closePath();\n ctx.fillStyle = color;\n ctx.fill();\n ctx.strokeStyle = edge;\n ctx.lineWidth = enemy.type === \"elite\" ? 3 : 2;\n ctx.stroke();\n ctx.restore();\n\n if (enemy.hp < enemy.maxHp) {\n ctx.fillStyle = \"rgba(15,23,42,0.8)\";\n ctx.fillRect(enemy.x - enemy.r, enemy.y - enemy.r - 10, enemy.r * 2, 4);\n ctx.fillStyle = \"#22c55e\";\n ctx.fillRect(enemy.x - enemy.r, enemy.y - enemy.r - 10, enemy.r * 2 * hpPct, 4);\n }\n }\n\n function drawBullet(bullet) {\n const glow = ctx.createRadialGradient(bullet.x, bullet.y, 1, bullet.x, bullet.y, 14);\n glow.addColorStop(0, \"rgba(191,219,254,0.95)\");\n glow.addColorStop(1, \"rgba(59,130,246,0)\");\n ctx.fillStyle = glow;\n ctx.beginPath();\n ctx.arc(bullet.x, bullet.y, 14, 0, TWO_PI);\n ctx.fill();\n ctx.fillStyle = \"#dbeafe\";\n ctx.beginPath();\n ctx.arc(bullet.x, bullet.y, bullet.r, 0, TWO_PI);\n ctx.fill();\n }\n\n function drawGem(gem, frame) {\n ctx.save();\n ctx.translate(gem.x, gem.y);\n ctx.rotate(frame * 0.04 + gem.x * 0.01);\n if (gem.value === \"heal\") {\n ctx.fillStyle = \"#22c55e\";\n ctx.fillRect(-gem.r, -gem.r * 0.32, gem.r * 2, gem.r * 0.64);\n ctx.fillRect(-gem.r * 0.32, -gem.r, gem.r * 0.64, gem.r * 2);\n } else {\n ctx.fillStyle = gem.value >= 7 ? \"#facc15\" : gem.value >= 3 ? \"#a78bfa\" : \"#38bdf8\";\n ctx.beginPath();\n ctx.moveTo(0, -gem.r);\n ctx.lineTo(gem.r, 0);\n ctx.lineTo(0, gem.r);\n ctx.lineTo(-gem.r, 0);\n ctx.closePath();\n ctx.fill();\n }\n ctx.restore();\n }\n\n function drawParticles(game) {\n for (const part of game.particles) {\n ctx.globalAlpha = clamp(part.life / 36, 0, 1);\n ctx.fillStyle = part.color;\n ctx.beginPath();\n ctx.arc(part.x, part.y, part.r, 0, TWO_PI);\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n }\n\n function drawFloatingTexts(game) {\n ctx.textAlign = \"center\";\n ctx.font = \"900 16px ui-sans-serif, system-ui\";\n for (const t of game.floatingTexts) {\n ctx.globalAlpha = clamp(t.life / 38, 0, 1);\n ctx.fillStyle = t.color;\n ctx.fillText(t.text, t.x, t.y);\n }\n ctx.globalAlpha = 1;\n ctx.textAlign = \"left\";\n }\n\n function drawHud(game) {\n const p = game.player;\n ctx.fillStyle = \"rgba(2,6,23,0.72)\";\n drawRoundedRect(ctx, 18, 16, 360, 74, 18);\n ctx.fill();\n\n ctx.fillStyle = \"#f8fafc\";\n ctx.font = \"900 18px ui-sans-serif, system-ui\";\n ctx.fillText(`LV ${game.level}`, 34, 42);\n ctx.fillText(`WAVE ${game.wave}`, 112, 42);\n ctx.fillText(`SCORE ${game.score}`, 218, 42);\n\n ctx.fillStyle = \"rgba(148,163,184,0.35)\";\n drawRoundedRect(ctx, 34, 57, 150, 10, 999);\n ctx.fill();\n ctx.fillStyle = p.hp <= p.maxHp * 0.3 ? \"#ef4444\" : \"#22c55e\";\n drawRoundedRect(ctx, 34, 57, 150 * clamp(p.hp / p.maxHp, 0, 1), 10, 999);\n ctx.fill();\n ctx.fillStyle = \"#cbd5e1\";\n ctx.font = \"800 11px ui-sans-serif, system-ui\";\n ctx.fillText(`HP ${Math.ceil(p.hp)}/${p.maxHp}`, 36, 82);\n\n ctx.fillStyle = \"rgba(148,163,184,0.35)\";\n drawRoundedRect(ctx, 206, 57, 140, 10, 999);\n ctx.fill();\n ctx.fillStyle = \"#38bdf8\";\n drawRoundedRect(ctx, 206, 57, 140 * clamp(game.xp / game.xpNext, 0, 1), 10, 999);\n ctx.fill();\n ctx.fillStyle = \"#cbd5e1\";\n ctx.fillText(`XP ${game.xp}/${game.xpNext}`, 208, 82);\n\n ctx.fillStyle = \"rgba(2,6,23,0.72)\";\n drawRoundedRect(ctx, VIEW_W - 350, 16, 332, 42, 16);\n ctx.fill();\n ctx.fillStyle = \"#cbd5e1\";\n ctx.font = \"800 13px ui-sans-serif, system-ui\";\n ctx.fillText(game.message, VIEW_W - 334, 43);\n\n if (game.pausedForUpgrade) {\n ctx.fillStyle = \"rgba(2,6,23,0.72)\";\n ctx.fillRect(0, 0, VIEW_W, VIEW_H);\n ctx.textAlign = \"center\";\n ctx.fillStyle = \"#facc15\";\n ctx.font = \"950 42px ui-sans-serif, system-ui\";\n ctx.fillText(\"LEVEL UP\", VIEW_W / 2, 150);\n ctx.fillStyle = \"#e2e8f0\";\n ctx.font = \"800 16px ui-sans-serif, system-ui\";\n ctx.fillText(\"오른쪽 카드 중 하나를 선택하세요\", VIEW_W / 2, 180);\n ctx.textAlign = \"left\";\n }\n\n if (game.gameOver) {\n ctx.fillStyle = \"rgba(2,6,23,0.76)\";\n ctx.fillRect(0, 0, VIEW_W, VIEW_H);\n ctx.textAlign = \"center\";\n ctx.fillStyle = \"#fb7185\";\n ctx.font = \"950 52px ui-sans-serif, system-ui\";\n ctx.fillText(\"CORE DESTROYED\", VIEW_W / 2, VIEW_H / 2 - 20);\n ctx.fillStyle = \"#f8fafc\";\n ctx.font = \"800 18px ui-sans-serif, system-ui\";\n ctx.fillText(`Final Score: ${game.score} · Wave ${game.wave} · Level ${game.level}`, VIEW_W / 2, VIEW_H / 2 + 22);\n ctx.textAlign = \"left\";\n }\n }\n\n function draw() {\n const rect = canvas.getBoundingClientRect();\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n ctx.fillStyle = \"#020617\";\n ctx.fillRect(0, 0, rect.width, rect.height);\n setCanvasTransform();\n\n const game = gameRef.current;\n drawBackground(game);\n for (const gem of game.gems) drawGem(gem, game.frame);\n for (const bullet of game.bullets) drawBullet(bullet);\n for (const enemy of game.enemies) drawEnemy(enemy, game);\n drawParticles(game);\n drawPlayer(game.player, game);\n drawFloatingTexts(game);\n drawHud(game);\n }\n\n function frame(time) {\n const elapsed = time - lastTime;\n lastTime = time;\n const steps = clamp(Math.round(elapsed / 16.67), 1, 3);\n for (let i = 0; i < steps; i++) updateGame(gameRef.current, keysRef.current, mouseRef.current);\n draw();\n\n const game = gameRef.current;\n setUi((old) => {\n const next = {\n score: game.score,\n hp: Math.ceil(game.player.hp),\n maxHp: game.player.maxHp,\n level: game.level,\n xp: game.xp,\n xpNext: game.xpNext,\n wave: game.wave,\n enemies: game.enemies.length,\n message: game.message,\n pausedForUpgrade: game.pausedForUpgrade,\n choices: game.upgradeChoices,\n };\n if (\n old.score === next.score &&\n old.hp === next.hp &&\n old.maxHp === next.maxHp &&\n old.level === next.level &&\n old.xp === next.xp &&\n old.xpNext === next.xpNext &&\n old.wave === next.wave &&\n old.enemies === next.enemies &&\n old.message === next.message &&\n old.pausedForUpgrade === next.pausedForUpgrade &&\n old.choices === next.choices\n ) return old;\n return next;\n });\n\n animationRef.current = requestAnimationFrame(frame);\n }\n\n function onKeyDown(event) {\n keysRef.current[event.code] = true;\n if ([\"Space\", \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].includes(event.code)) event.preventDefault();\n if (event.code === \"KeyR\") reset();\n }\n\n function onKeyUp(event) {\n keysRef.current[event.code] = false;\n }\n\n function onPointerMove(event) {\n const p = clientToWorld(event.clientX, event.clientY);\n mouseRef.current.x = p.x;\n mouseRef.current.y = p.y;\n mouseRef.current.inside = true;\n }\n\n function onPointerLeave() {\n mouseRef.current.inside = false;\n }\n\n resize();\n window.addEventListener(\"resize\", resize);\n window.addEventListener(\"keydown\", onKeyDown, { passive: false });\n window.addEventListener(\"keyup\", onKeyUp);\n canvas.addEventListener(\"pointermove\", onPointerMove);\n canvas.addEventListener(\"pointerleave\", onPointerLeave);\n animationRef.current = requestAnimationFrame(frame);\n\n return () => {\n window.removeEventListener(\"resize\", resize);\n window.removeEventListener(\"keydown\", onKeyDown);\n window.removeEventListener(\"keyup\", onKeyUp);\n canvas.removeEventListener(\"pointermove\", onPointerMove);\n canvas.removeEventListener(\"pointerleave\", onPointerLeave);\n if (animationRef.current) cancelAnimationFrame(animationRef.current);\n };\n }, []);\n\n const hpPct = clamp(ui.hp / ui.maxHp, 0, 1);\n const xpPct = clamp(ui.xp / ui.xpNext, 0, 1);\n\n return (\n

Original no-dependency canvas game

네온 아레나 서바이버

\n 사방에서 몰려오는 적을 피하면서 자동 발사로 버티는 아레나 생존 게임입니다. 경험치를 먹고 레벨업하면 무기를 강화할 수 있습니다.\n React와 Canvas만 사용했습니다.\n

\n\n

Status

Level

{ui.level}

Wave

{ui.wave}

Score

{ui.score}

Enemies

{ui.enemies}

\n\n

\n HP{ui.hp}/{ui.maxHp}\n

\n\n

\n XP{ui.xp}/{ui.xpNext}\n

\n\n

\n {ui.message}\n

\n\n \n

\n\n {ui.pausedForUpgrade && (\n

Choose upgrade

\n {ui.choices.map((choice) => (\n chooseUpgrade(choice)}\n style={{ border: \"1px solid #334155\", background: \"#020617\", color: \"#f8fafc\", borderRadius: 16, padding: 13, cursor: \"pointer\", textAlign: \"left\" }}\n >\n

{choice.title}

{choice.ko}

\n \n ))}\n

\n )}\n\n

Controls

WASD / 방향키 이동

마우스 조준 방향

자동 발사 가장 가까운 적 추적

Space 대시 / 짧은 무적

R 재시작

\n\n

Goal

\n 죽지 않고 오래 버티면서 경험치 조각을 모으세요. 레벨업마다 무기나 생존 능력을 골라 점점 빌드를 키우는 방식입니다.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","8249586521014824812","traceTime",1784608753684]