[{"_1":2,"_36":-5,"_37":-5},"loaderData",{"_3":4,"_21":22},"root",{"_5":6,"_11":12,"_13":14,"_15":14,"_16":14,"_17":14,"_18":14,"_19":20},"dd",{"_7":8,"_9":10},"traceId","17903688044114384262","traceTime",1766629017898,"disablePrefetch",true,"shouldPrefetchAccount",false,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","statsigGateEvaluationsPromise",["P",20],"routes/canvas.shared.$sharedTextdocId",{"_23":24,"_25":-7,"_26":27,"_28":29,"_30":31,"_32":33,"_34":14,"_35":14},"sharedTextdocId","6896f1720f2881918b7453f6f6764123","versionInt","title","Breakout Game (react)","type","code/react","content","import React, { useEffect, useRef, useState } from \"react\";\n\n// Breakout / Block Breaker — single-file React component (fixed)\n// ✅ \"Space\" starts the game if not running; otherwise toggles pause\n// ✅ No mixed prose — this file is pure JavaScript/React\n// ✅ Adds lightweight self-tests for core helpers\n// Controls: ←/→ (or A/D), mouse/touch, Space = Start/Pause/Resume\n\nexport default function Breakout() {\n const canvasRef = useRef(null);\n const rafRef = useRef(0);\n\n const [running, setRunning] = useState(false);\n const [paused, setPaused] = useState(false);\n const [score, setScore] = useState(0);\n const [lives, setLives] = useState(3);\n const [level, setLevel] = useState(1);\n const [message, setMessage] = useState(\"Press Start or Space\");\n const [hi, setHi] = useState(() => {\n if (typeof window === \"undefined\") return 0;\n const v = Number(localStorage.getItem(\"breakout_hi\") || 0);\n return Number.isFinite(v) ? v : 0;\n });\n\n // Mutable game state (avoids rerenders each frame)\n const state = useRef({\n w: 800,\n h: 600,\n paddle: { x: 400, y: 560, w: 110, h: 14, speed: 520 },\n ball: { x: 400, y: 300, r: 8, vx: 260, vy: -260, speedCap: 720 },\n keys: { left: false, right: false },\n bricks: [],\n powerUps: [],\n lastTime: 0,\n });\n\n // ---------- Resize canvas to container ----------\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const parent = canvas.parentElement || document.body;\n const handleResize = () => {\n const pr = window.devicePixelRatio || 1;\n const maxW = Math.min(parent.clientWidth || 800, 900);\n const width = maxW; // keep 4:3 aspect\n const height = Math.round((3 / 4) * width);\n canvas.style.width = width + \"px\";\n canvas.style.height = height + \"px\";\n canvas.width = Math.floor(width * pr);\n canvas.height = Math.floor(height * pr);\n state.current.w = canvas.width / pr;\n state.current.h = canvas.height / pr;\n };\n handleResize();\n const ro = new ResizeObserver(handleResize);\n ro.observe(parent);\n return () => ro.disconnect();\n }, []);\n\n // ---------- Build level ----------\n const buildLevel = (lvl) => {\n const s = state.current;\n const rows = Math.min(4 + (lvl - 1), 10);\n const cols = Math.min(8 + Math.floor((lvl - 1) / 2), 14);\n const pad = 8;\n const marginTop = 80;\n const marginSide = 24;\n const brickW = (s.w - marginSide * 2 - pad * (cols - 1)) / cols;\n const brickH = 22;\n const bricks = [];\n for (let r = 0; r < rows; r++) {\n for (let c = 0; c < cols; c++) {\n const hp = 1 + Math.floor((lvl - 1) / 3) + (r === 0 ? 1 : 0);\n bricks.push({\n x: marginSide + c * (brickW + pad),\n y: marginTop + r * (brickH + pad),\n w: brickW,\n h: brickH,\n hp,\n color: colorForHP(hp),\n });\n }\n }\n s.bricks = bricks;\n s.powerUps = [];\n // Reset paddle & ball\n s.paddle.w = 110 * Math.max(0.7, 1 - (lvl - 1) * 0.06);\n s.paddle.x = s.w / 2;\n s.paddle.y = Math.max(s.h - 40, 300);\n s.ball.x = s.w / 2;\n s.ball.y = s.paddle.y - 20;\n const sp = 240 + lvl * 30;\n const angle = -Math.PI / 3 + (Math.random() * Math.PI) / 6;\n s.ball.vx = sp * Math.cos(angle);\n s.ball.vy = sp * Math.sin(angle);\n };\n\n function colorForHP(hp) {\n const colors = [\"#00bcd4\", \"#4caf50\", \"#ff9800\", \"#ef4444\", \"#7c3aed\"]; // cyan, green, orange, red, violet\n return colors[Math.min(hp - 1, colors.length - 1)];\n }\n\n // ---------- Input handlers ----------\n useEffect(() => {\n const onKey = (e) => {\n if (e.code === \"ArrowLeft\" || e.code === \"KeyA\") state.current.keys.left = e.type === \"keydown\";\n if (e.code === \"ArrowRight\" || e.code === \"KeyD\") state.current.keys.right = e.type === \"keydown\";\n if (e.code === \"Space\" && e.type === \"keydown\") {\n if (!running) startGame();\n else togglePause();\n }\n };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"keyup\", onKey);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"keyup\", onKey);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [running, paused]);\n\n // Mouse / touch move\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const move = (clientX) => {\n const rect = canvas.getBoundingClientRect();\n const x = ((clientX - rect.left) / rect.width) * state.current.w;\n state.current.paddle.x = clamp(\n x,\n state.current.paddle.w / 2,\n state.current.w - state.current.paddle.w / 2\n );\n };\n const onMouseMove = (e) => move(e.clientX);\n const onTouchMove = (e) => { if (e.touches[0]) move(e.touches[0].clientX); };\n canvas.addEventListener(\"mousemove\", onMouseMove);\n canvas.addEventListener(\"touchmove\", onTouchMove, { passive: true });\n return () => {\n canvas.removeEventListener(\"mousemove\", onMouseMove);\n canvas.removeEventListener(\"touchmove\", onTouchMove);\n };\n }, []);\n\n // ---------- Lifecycle ----------\n useEffect(() => { buildLevel(level); }, [level]);\n\n // Main loop\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n\n const step = (t) => {\n const s = state.current;\n if (!s.lastTime) s.lastTime = t;\n const dt = Math.min(0.033, (t - s.lastTime) / 1000);\n s.lastTime = t;\n\n if (running && !paused) update(dt);\n render(ctx);\n rafRef.current = requestAnimationFrame(step);\n };\n rafRef.current = requestAnimationFrame(step);\n return () => cancelAnimationFrame(rafRef.current);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [running, paused]);\n\n // ---------- Update & collisions ----------\n function update(dt) {\n const s = state.current;\n // Paddle movement\n if (s.keys.left) s.paddle.x -= s.paddle.speed * dt;\n if (s.keys.right) s.paddle.x += s.paddle.speed * dt;\n s.paddle.x = clamp(s.paddle.x, s.paddle.w / 2, s.w - s.paddle.w / 2);\n\n // Ball movement\n s.ball.x += s.ball.vx * dt;\n s.ball.y += s.ball.vy * dt;\n\n // Walls\n if (s.ball.x < s.ball.r) { s.ball.x = s.ball.r; s.ball.vx *= -1; }\n if (s.ball.x > s.w - s.ball.r) { s.ball.x = s.w - s.ball.r; s.ball.vx *= -1; }\n if (s.ball.y < s.ball.r) { s.ball.y = s.ball.r; s.ball.vy *= -1; }\n\n // Paddle collision\n const pTop = s.paddle.y - s.paddle.h / 2;\n const pLeft = s.paddle.x - s.paddle.w / 2;\n const pRight = s.paddle.x + s.paddle.w / 2;\n const pBottom = s.paddle.y + s.paddle.h / 2;\n if (\n s.ball.y + s.ball.r >= pTop &&\n s.ball.y - s.ball.r <= pBottom &&\n s.ball.x >= pLeft && s.ball.x <= pRight &&\n s.ball.vy > 0\n ) {\n s.ball.y = pTop - s.ball.r;\n const hitPos = (s.ball.x - s.paddle.x) / (s.paddle.w / 2); // -1..1\n const angle = hitPos * (Math.PI / 3);\n const speed = Math.min(Math.hypot(s.ball.vx, s.ball.vy) * 1.03, s.ball.speedCap);\n s.ball.vx = speed * Math.sin(angle);\n s.ball.vy = -Math.abs(speed * Math.cos(angle));\n }\n\n // Bricks\n for (let i = s.bricks.length - 1; i >= 0; i--) {\n const b = s.bricks[i];\n if (circleRectCollide(s.ball.x, s.ball.y, s.ball.r, b.x, b.y, b.w, b.h)) {\n const cx = clamp(s.ball.x, b.x, b.x + b.w);\n const cy = clamp(s.ball.y, b.y, b.y + b.h);\n const dx = s.ball.x - cx;\n const dy = s.ball.y - cy;\n if (Math.abs(dx) > Math.abs(dy)) s.ball.vx *= -1; else s.ball.vy *= -1;\n b.hp -= 1;\n if (b.hp <= 0) {\n s.bricks.splice(i, 1);\n setScore((sc) => sc + 50);\n if (Math.random() < 0.12) {\n s.powerUps.push({ x: b.x + b.w / 2, y: b.y + b.h / 2, vy: 120, type: randPower() });\n }\n } else {\n b.color = colorForHP(b.hp);\n setScore((sc) => sc + 10);\n }\n }\n }\n\n // Power-ups\n for (let i = s.powerUps.length - 1; i >= 0; i--) {\n const pu = s.powerUps[i];\n pu.y += pu.vy * dt;\n if (pu.y > s.h + 30) { s.powerUps.splice(i, 1); continue; }\n if (pu.y >= pTop && pu.y <= pTop + s.paddle.h && pu.x >= pLeft && pu.x <= pRight) {\n applyPower(pu.type);\n s.powerUps.splice(i, 1);\n }\n }\n\n // Out of bounds\n if (s.ball.y - s.ball.r > s.h) {\n setLives((lv) => lv - 1);\n s.paddle.x = s.w / 2;\n s.ball.x = s.w / 2;\n s.ball.y = s.paddle.y - 20;\n s.ball.vx = 200 * (Math.random() > 0.5 ? 1 : -1);\n s.ball.vy = -260;\n setMessage(\"Miss!\");\n setPaused(true);\n }\n\n // Level clear\n if (state.current.bricks.length === 0) {\n setLevel((lv) => lv + 1);\n setMessage(\"Level Up!\");\n setPaused(true);\n }\n }\n\n function randPower() {\n const types = [\"WIDE\", \"MULTI\", \"SLOW\", \"LIFE\"];\n return types[Math.floor(Math.random() * types.length)];\n }\n\n function applyPower(type) {\n const s = state.current;\n if (type === \"WIDE\") s.paddle.w = Math.min(s.paddle.w * 1.25, 220);\n if (type === \"SLOW\") { s.ball.vx *= 0.8; s.ball.vy *= 0.8; }\n if (type === \"LIFE\") setLives((lv) => Math.min(5, lv + 1));\n if (type === \"MULTI\") { setScore((sc) => sc + 200); s.ball.vx *= 1.08; s.ball.vy *= 1.08; }\n }\n\n // ---------- Render ----------\n function render(ctx) {\n const s = state.current;\n const pr = (typeof window !== \"undefined\" ? window.devicePixelRatio : 1) || 1;\n ctx.save();\n ctx.scale(pr, pr);\n // Background\n ctx.fillStyle = \"#0b1220\";\n ctx.fillRect(0, 0, s.w, s.h);\n // Grid\n ctx.globalAlpha = 0.15;\n ctx.strokeStyle = \"#1f2a44\";\n for (let x = 0; x < s.w; x += 24) { line(ctx, x, 0, x, s.h); }\n for (let y = 0; y < s.h; y += 24) { line(ctx, 0, y, s.w, y); }\n ctx.globalAlpha = 1;\n\n // Bricks\n s.bricks.forEach((b) => roundedRect(ctx, b.x, b.y, b.w, b.h, 6, b.color));\n\n // Paddle\n roundedRect(ctx, s.paddle.x - s.paddle.w / 2, s.paddle.y - s.paddle.h / 2, s.paddle.w, s.paddle.h, 8, \"#e5e7eb\");\n\n // Ball\n circle(ctx, s.ball.x, s.ball.y, s.ball.r, \"#f59e0b\");\n\n // Power-ups\n s.powerUps.forEach((pu) => {\n ctx.fillStyle = \"#22d3ee\";\n ctx.beginPath();\n ctx.arc(pu.x, pu.y, 7, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = \"#0b1220\";\n ctx.font = \"10px ui-sans-serif\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(pu.type[0], pu.x, pu.y + 0.5);\n });\n\n // HUD\n ctx.fillStyle = \"#e5e7eb\";\n ctx.font = \"14px ui-sans-serif\";\n ctx.textAlign = \"left\";\n ctx.fillText(`Score: ${score}`, 16, 22);\n ctx.fillText(`Lives: ${lives}`, 16, 42);\n ctx.fillText(`Level: ${level}`, 16, 62);\n ctx.textAlign = \"right\";\n ctx.fillText(`Best: ${hi}`, s.w - 16, 22);\n\n if (!running || paused) {\n ctx.fillStyle = \"#e5e7eb\";\n ctx.font = \"bold 26px ui-sans-serif\";\n ctx.textAlign = \"center\";\n ctx.fillText(message || (running ? \"Paused\" : \"Press Start or Space\"), s.w / 2, s.h / 2 - 8);\n ctx.font = \"14px ui-sans-serif\";\n ctx.fillText(\"←/A and →/D to move. Mouse/Touch supported.\", s.w / 2, s.h / 2 + 20);\n ctx.fillText(\"Space: Start/Pause/Resume\", s.w / 2, s.h / 2 + 40);\n }\n\n ctx.restore();\n }\n\n // ---------- Effects: hi-score & game over ----------\n useEffect(() => {\n if (score > hi) {\n setHi(score);\n try { localStorage.setItem(\"breakout_hi\", String(score)); } catch {}\n }\n }, [score]);\n\n useEffect(() => {\n if (lives <= 0) {\n setMessage(\"Game Over\");\n setRunning(false);\n setPaused(true);\n } else if (paused && message === \"Miss!\") {\n const id = setTimeout(() => { setPaused(false); setMessage(\"\"); }, 600);\n return () => clearTimeout(id);\n }\n }, [lives, paused, message]);\n\n // ---------- Helpers ----------\n function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }\n function circleRectCollide(cx, cy, r, rx, ry, rw, rh) {\n const closestX = clamp(cx, rx, rx + rw);\n const closestY = clamp(cy, ry, ry + rh);\n const dx = cx - closestX;\n const dy = cy - closestY;\n return dx * dx + dy * dy <= r * r;\n }\n function line(ctx, x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }\n function roundedRect(ctx, x, y, w, h, r, fill = \"#fff\") {\n ctx.beginPath();\n ctx.moveTo(x + r, y);\n ctx.arcTo(x + w, y, x + w, y + h, r);\n ctx.arcTo(x + w, y + h, x, y + h, r);\n ctx.arcTo(x, y + h, x, y, r);\n ctx.arcTo(x, y, x + w, y, r);\n ctx.closePath();\n ctx.fillStyle = fill;\n ctx.fill();\n }\n function circle(ctx, x, y, r, fill = \"#fff\") { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = fill; ctx.fill(); }\n\n // ---------- UI Controls ----------\n const startGame = () => {\n if (lives <= 0) resetAll();\n setRunning(true);\n setPaused(false);\n setMessage(\"\");\n };\n const togglePause = () => { if (!running) return; setPaused((p) => !p); setMessage((m) => (paused ? \"\" : \"Paused\")); };\n const pauseGame = () => { if (running) { setPaused(true); setMessage(\"Paused\"); } };\n const resumeGame = () => { if (running) { setPaused(false); setMessage(\"\"); } };\n const resetAll = () => {\n setScore(0);\n setLives(3);\n setLevel(1);\n buildLevel(1);\n setMessage(\"Press Start or Space\");\n setPaused(false);\n setRunning(false);\n };\n const resetGame = () => resetAll();\n\n // ---------- Self-tests (run once in dev) ----------\n useEffect(() => {\n // \"Test cases\" for helpers — visible in console\n console.groupCollapsed(\"Breakout self-tests\");\n console.assert(clamp(5, 0, 10) === 5, \"clamp mid\");\n console.assert(clamp(-1, 0, 10) === 0, \"clamp low\");\n console.assert(clamp(99, 0, 10) === 10, \"clamp high\");\n // circle-rect collision: circle at (5,5) r=3 collides with rect (7,4,w=4,h=4)? → closest (7,5), dist=2 <= r\n console.assert(circleRectCollide(5, 5, 3, 7, 4, 4, 4) === true, \"circleRect collide T\");\n // far apart → false\n console.assert(circleRectCollide(0, 0, 2, 10, 10, 3, 3) === false, \"circleRect collide F\");\n console.groupEnd();\n }, []);\n\n return (\n

🧱 Breakout

\n {!running && (\n \n )}\n {running && !paused && (\n \n )}\n {running && paused && (\n \n )}\n \n

\n\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","actionData","errors"]