/* * 비활성 레거시 구현이에요. * 실제 게임은 /js/config.js → entities.js → game.js → main.js에서 실행해요. * 기존 본문은 안전한 부분 패치를 위해 보존하지만 런타임에는 실행하지 않아요. */ (function legacyFamiliarRoadStub() { return; const root = document.getElementById("app") || document.body; const gameCanvas = document.createElement("canvas"); gameCanvas.setAttribute("aria-label", "익숙한 길 게임"); gameCanvas.style.position = "fixed"; gameCanvas.style.inset = "0"; gameCanvas.style.zIndex = "10"; gameCanvas.style.width = "100%"; gameCanvas.style.height = "100%"; gameCanvas.style.touchAction = "none"; gameCanvas.style.background = "#071018"; root.appendChild(gameCanvas); let gameCtx = gameCanvas.getContext("2d"); if (!gameCtx) return; let gameW = 1; let gameH = 1; let scene = 0; let settingsOpen = false; let masterOn = true; let bgmVolume = 0.42; let sfxVolume = 0.65; let currentBgm = null; let currentBgmKey = ""; let lastTime = performance.now(); let cleared = false; let gameOver = false; let restartAt = 0; let reachedGoal = false; let npcTouched = false; let message = ""; let messageUntil = 0; let shake = 0; const keys = {}; const images = {}; const sceneImages = [ "asset", "img_2d", "asset_2", "img_1920_1080", "asset_3", "asset_4", "asset_5" ]; const musicKeys = [ "main_scene", "stage_1", "stage_2", "stage_3", "stage_4", "stage_5", "ending" ]; const lessons = [ "", "익숙한 시작도 한 걸음씩 확인하면 길이 됩니다.", "도착은 끝이 아닙니다. 돌아보아야 비로소 이해할 수 있습니다.", "익숙한 길에도 위험은 있습니다. 주의는 두려움과 다릅니다.", "겉모습만으로 상대를 판단하지 마세요. 이해가 새로운 길을 엽니다.", "배운 것을 기억하고 적용하는 힘이 진정한 성장입니다." ]; const player = { x: 80, y: 0, vx: 0, vy: 0, w: 28, h: 38, grounded: false }; let platforms = []; let memories = []; let pits = []; let enemy = null; let spawn = { x: 80, y: 0 }; let goal = { x: 0, y: 0, w: 38, h: 76 }; let startGate = { x: 38, y: 0, w: 32, h: 72 }; function fitGame() { const rect = root.getBoundingClientRect(); gameW = Math.max(1, rect.width || window.innerWidth); gameH = Math.max(1, rect.height || window.innerHeight); const dpr = Math.min(window.devicePixelRatio || 1, 2); gameCanvas.width = Math.floor(gameW * dpr); gameCanvas.height = Math.floor(gameH * dpr); gameCanvas.style.width = gameW + "px"; gameCanvas.style.height = gameH + "px"; gameCtx = gameCanvas.getContext("2d"); if (gameCtx) gameCtx.setTransform(dpr, 0, 0, dpr, 0, 0); if (scene > 0 && scene < 6) buildStage(scene); } function loadImages() { sceneImages.forEach(function (key) { loadZeroadImage(key).then(function (image) { images[key] = image; }).catch(function () { images[key] = null; }); }); } function createAudio(key, loop) { try { const audio = new Audio(getZeroadAsset(key)); audio.loop = loop; audio.preload = "auto"; return audio; } catch (error) { return null; } } const beep = createAudio("ui_beep", false); function playSfx() { if (!masterOn || !beep) return; beep.volume = sfxVolume; beep.currentTime = 0; const promise = beep.play(); if (promise && promise.catch) promise.catch(function () {}); } function playMusic(key) { if (currentBgmKey === key && currentBgm) { currentBgm.volume = masterOn ? bgmVolume : 0; return; } if (currentBgm) { currentBgm.pause(); currentBgm.currentTime = 0; } currentBgmKey = key; currentBgm = createAudio(key, true); if (!currentBgm) return; currentBgm.volume = masterOn ? bgmVolume : 0; const promise = currentBgm.play(); if (promise && promise.catch) promise.catch(function () {}); } function resumeMusic() { if (!currentBgm || !masterOn) return; currentBgm.volume = bgmVolume; const promise = currentBgm.play(); if (promise && promise.catch) promise.catch(function () {}); } function rectHit(a, b) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; } function buildStage(stage) { const floorY = gameH - Math.max(74, gameH * 0.12); const ledgeY = floorY - Math.min(145, gameH * 0.2); const highY = floorY - Math.min(260, gameH * 0.34); platforms = [ { x: 0, y: floorY, w: gameW * 0.22, h: gameH - floorY }, { x: gameW * 0.27, y: ledgeY, w: gameW * 0.17, h: 24 }, { x: gameW * 0.48, y: highY, w: gameW * 0.16, h: 24 }, { x: gameW * 0.68, y: ledgeY, w: gameW * 0.14, h: 24 }, { x: gameW * 0.86, y: floorY, w: gameW * 0.14, h: gameH - floorY } ]; if (stage === 1 || stage === 4) { platforms.push({ x: gameW * 0.20, y: floorY, w: gameW * 0.68, h: gameH - floorY }); } pits = stage === 3 || stage === 5 ? [ { x: gameW * 0.22, y: floorY, w: gameW * 0.05, h: gameH - floorY }, { x: gameW * 0.82, y: floorY, w: gameW * 0.04, h: gameH - floorY } ] : []; spawn = { x: Math.max(26, gameW * 0.055), y: floorY - player.h - 4 }; player.x = spawn.x; player.y = spawn.y; player.vx = 0; player.vy = 0; startGate = { x: Math.max(12, gameW * 0.018), y: floorY - 70, w: 34, h: 70 }; goal = { x: gameW - 58, y: floorY - 76, w: 38, h: 76 }; const safeSpots = []; platforms.forEach(function (platform) { if (platform.w > 52) { safeSpots.push({ x: platform.x + 20 + Math.random() * Math.max(1, platform.w - 40), y: platform.y - 20 }); } }); memories = []; for (let i = 0; i < 5; i += 1) { const spot = safeSpots[(i + Math.floor(Math.random() * safeSpots.length)) % safeSpots.length]; memories.push({ x: Math.max(18, Math.min(gameW - 18, spot.x)), y: spot.y, r: 9, got: false, phase: Math.random() * Math.PI * 2 }); } enemy = null; if (stage === 4 || stage === 5) { enemy = { x: gameW * 0.52, y: highY - 34, w: 30, h: 34, vx: 45, minX: gameW * 0.49, maxX: gameW * 0.62, hostile: stage === 5 }; } } function enterScene(next) { scene = next; settingsOpen = false; cleared = false; gameOver = false; reachedGoal = false; npcTouched = false; message = ""; playMusic(musicKeys[scene]); if (scene > 0 && scene < 6) buildStage(scene); } function memoryCount() { let count = 0; memories.forEach(function (memory) { if (memory.got) count += 1; }); return count; } function failStage(text) { if (gameOver || cleared) return; gameOver = true; message = text; restartAt = performance.now() + 1100; shake = 14; playSfx(); } function completeStage() { if (cleared || gameOver) return; cleared = true; player.vx = 0; playSfx(); } function tryGoal() { if (memoryCount() < 5) { message = "흩어진 기억 포인트 5개를 모두 모아야 합니다."; messageUntil = performance.now() + 1600; return; } if (scene === 2 || scene === 5) { if (!reachedGoal) { reachedGoal = true; message = "도착했습니다. 이제 출발 지점으로 돌아가세요."; messageUntil = performance.now() + 2200; } return; } if (scene === 4 && !npcTouched) { message = "낯선 상대와 먼저 마주해야 길이 열립니다."; messageUntil = performance.now() + 1800; return; } completeStage(); } function jump() { if (scene < 1 || scene > 5 || settingsOpen || cleared || gameOver) return; if (player.grounded) { player.vy = -Math.max(430, gameH * 0.65); player.grounded = false; playSfx(); } } function update(dt, now) { if (scene < 1 || scene > 5 || settingsOpen || cleared) return; if (gameOver) { if (now >= restartAt) buildStage(scene); if (now >= restartAt) { gameOver = false; reachedGoal = false; npcTouched = false; message = ""; } return; } const speed = Math.max(190, gameW * 0.28); player.vx = 0; if (keys.ArrowLeft || keys.KeyA) player.vx = -speed; if (keys.ArrowRight || keys.KeyD) player.vx = speed; player.x += player.vx * dt; player.x = Math.max(0, Math.min(gameW - player.w, player.x)); const oldBottom = player.y + player.h; player.vy += Math.max(1050, gameH * 1.6) * dt; player.y += player.vy * dt; player.grounded = false; platforms.forEach(function (platform) { const newBottom = player.y + player.h; if (player.vy >= 0 && oldBottom <= platform.y + 8 && newBottom >= platform.y && player.x + player.w > platform.x && player.x < platform.x + platform.w) { player.y = platform.y - player.h; player.vy = 0; player.grounded = true; } }); pits.forEach(function (pit) { if (rectHit(player, pit)) failStage("발밑의 익숙함을 의심하지 않아 추락했습니다."); }); if (player.y > gameH + 40) failStage("길 아래로 추락했습니다."); memories.forEach(function (memory) { const hitbox = { x: memory.x - 13, y: memory.y - 13, w: 26, h: 26 }; if (!memory.got && rectHit(player, hitbox)) { memory.got = true; message = "기억 포인트를 되찾았습니다. " + memoryCount() + " / 5"; messageUntil = now + 900; shake = 5; playSfx(); } }); if (enemy) { enemy.x += enemy.vx * dt; if (enemy.x < enemy.minX || enemy.x > enemy.maxX) { enemy.vx *= -1; enemy.x = Math.max(enemy.minX, Math.min(enemy.maxX, enemy.x)); } if (rectHit(player, enemy)) { if (enemy.hostile) { failStage("이번 상대는 실제 위험이었습니다. 관찰하고 다시 시도하세요."); } else if (!npcTouched) { npcTouched = true; message = "적처럼 보였던 존재는 길을 열어 주는 안내자였습니다."; messageUntil = now + 2300; playSfx(); } } } if (rectHit(player, goal)) tryGoal(); if ((scene === 2 || scene === 5) && reachedGoal && rectHit(player, startGate)) { if (memoryCount() === 5) completeStage(); } if (shake > 0) shake *= 0.86; } function drawCover(image) { if (!image) { const gradient = gameCtx.createLinearGradient(0, 0, 0, gameH); gradient.addColorStop(0, "#142638"); gradient.addColorStop(1, "#071018"); gameCtx.fillStyle = gradient; gameCtx.fillRect(0, 0, gameW, gameH); return; } const scale = Math.max(gameW / image.width, gameH / image.height); const width = image.width * scale; const height = image.height * scale; gameCtx.drawImage(image, (gameW - width) / 2, (gameH - height) / 2, width, height); gameCtx.fillStyle = "rgba(4,10,18,0.34)"; gameCtx.fillRect(0, 0, gameW, gameH); } function panel(x, y, w, h, alpha) { gameCtx.fillStyle = "rgba(5,12,20," + alpha + ")"; gameCtx.fillRect(x, y, w, h); gameCtx.strokeStyle = "rgba(255,225,125,0.78)"; gameCtx.lineWidth = 2; gameCtx.strokeRect(x, y, w, h); } function centered(text, y, size, color) { gameCtx.textAlign = "center"; gameCtx.fillStyle = color; gameCtx.font = "700 " + size + "px system-ui"; gameCtx.fillText(text, gameW / 2, y); } function drawSoundButton() { panel(gameW - 64, 14, 48, 48, 0.84); centered(masterOn ? "♫" : "×", 47, 24, masterOn ? "#fff0a8" : "#ef9a9a"); } function drawWorld(now) { gameCtx.save(); if (shake > 0) { gameCtx.translate((Math.random() - 0.5) * shake, (Math.random() - 0.5) * shake); } platforms.forEach(function (platform) { gameCtx.fillStyle = "#263b3a"; gameCtx.fillRect(platform.x, platform.y, platform.w, platform.h); gameCtx.fillStyle = "#7c9b65"; gameCtx.fillRect(platform.x, platform.y, platform.w, 7); }); pits.forEach(function (pit) { const glow = gameCtx.createLinearGradient(0, pit.y, 0, gameH); glow.addColorStop(0, "#e04f3d"); glow.addColorStop(1, "#210508"); gameCtx.fillStyle = glow; gameCtx.fillRect(pit.x, pit.y, pit.w, pit.h); }); gameCtx.fillStyle = "rgba(112,196,255,0.3)"; gameCtx.fillRect(startGate.x, startGate.y, startGate.w, startGate.h); gameCtx.strokeStyle = "#8ed8ff"; gameCtx.strokeRect(startGate.x, startGate.y, startGate.w, startGate.h); const goalActive = memoryCount() === 5 && (scene !== 4 || npcTouched); gameCtx.fillStyle = goalActive ? "rgba(255,221,91,0.55)" : "rgba(120,130,140,0.42)"; gameCtx.fillRect(goal.x, goal.y, goal.w, goal.h); gameCtx.strokeStyle = goalActive ? "#fff0a8" : "#89939d"; gameCtx.lineWidth = 3; gameCtx.strokeRect(goal.x, goal.y, goal.w, goal.h); memories.forEach(function (memory) { if (memory.got) return; const bob = Math.sin(now * 0.004 + memory.phase) * 4; gameCtx.beginPath(); gameCtx.arc(memory.x, memory.y + bob, memory.r + 5, 0, Math.PI * 2); gameCtx.fillStyle = "rgba(255,224,105,0.2)"; gameCtx.fill(); gameCtx.beginPath(); gameCtx.arc(memory.x, memory.y + bob, memory.r, 0, Math.PI * 2); gameCtx.fillStyle = "#ffe069"; gameCtx.fill(); }); if (enemy) { gameCtx.fillStyle = enemy.hostile ? "#c23c49" : "#543f67"; gameCtx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h); gameCtx.fillStyle = "#fff"; gameCtx.fillRect(enemy.x + 5, enemy.y + 8, 6, 6); gameCtx.fillRect(enemy.x + 19, enemy.y + 8, 6, 6); } gameCtx.fillStyle = "#d8eef1"; gameCtx.fillRect(player.x, player.y, player.w, player.h); gameCtx.fillStyle = "#35495a"; gameCtx.fillRect(player.x + 5, player.y + 9, 5, 5); gameCtx.fillRect(player.x + 18, player.y + 9, 5, 5); gameCtx.restore(); } function drawHud(now) { panel(14, 14, Math.min(285, gameW - 92), 76, 0.8); gameCtx.textAlign = "left"; gameCtx.fillStyle = "#fff1b8"; gameCtx.font = "700 20px system-ui"; gameCtx.fillText(scene === 5 ? "FINAL STAGE" : "STAGE " + scene, 28, 43); gameCtx.fillStyle = "#fff"; gameCtx.font = "600 15px system-ui"; gameCtx.fillText("기억 포인트 " + memoryCount() + " / 5", 28, 70); if (scene === 1 && now < 9000) { panel(gameW * 0.1, gameH * 0.13, gameW * 0.8, 96, 0.82); centered("기억을 잃은 당신은 흩어진 기억을 따라 길을 나섭니다.", gameH * 0.13 + 33, 15, "#fff"); centered("← → 이동 · ↑ / SPACE 점프 · 기억 5개를 모아 빛나는 문으로 가세요.", gameH * 0.13 + 66, 14, "#ffe69a"); } if (message && (messageUntil === 0 || now < messageUntil || gameOver)) { panel(gameW * 0.12, gameH - 142, gameW * 0.76, 54, 0.88); centered(message, gameH - 108, Math.max(12, Math.min(16, gameW / 38)), "#fff"); } if (gameOver) { gameCtx.fillStyle = "rgba(70,0,8,0.58)"; gameCtx.fillRect(0, 0, gameW, gameH); centered("GAME OVER", gameH * 0.46, Math.min(46, gameW * 0.1), "#ff9f9f"); centered("현재 스테이지를 다시 시작합니다.", gameH * 0.46 + 40, 16, "#fff"); } } function drawMenu() { const boxW = Math.min(760, gameW * 0.9); panel((gameW - boxW) / 2, gameH * 0.14, boxW, Math.min(390, gameH * 0.68), 0.8); centered("익숙한 길", gameH * 0.14 + 80, Math.min(58, gameW * 0.1), "#fff0a8"); centered("잃어버린 기억을 모으며 익숙함을 새롭게 바라보는 여행", gameH * 0.14 + 125, Math.max(13, Math.min(19, gameW / 35)), "#fff"); centered("조작방법: 오른쪽: ←, 왼쪽: →, 점프: ↑/SPACE, 재시도: R", gameH * 0.14 + 195, Math.max(12, Math.min(17, gameW / 38)), "#d7e8ef"); centered("사운드 설정: 화면 오른쪽 위 ♫ 또는 S 키", gameH * 0.14 + 230, 14, "#b9cbd2"); centered("ENTER 키를 눌러서 시작", gameH * 0.14 + 305, Math.max(17, Math.min(25, gameW / 28)), "#ffe069"); } function drawClear() { gameCtx.fillStyle = "rgba(3,8,14,0.7)"; gameCtx.fillRect(0, 0, gameW, gameH); const boxW = Math.min(650, gameW * 0.86); panel((gameW - boxW) / 2, gameH * 0.27, boxW, 210, 0.94); centered("STAGE CLEAR", gameH * 0.27 + 52, 30, "#ffe069"); centered("익숙함의 재해석", gameH * 0.27 + 92, 18, "#9fdbff"); centered(lessons[scene], gameH * 0.27 + 130, Math.max(12, Math.min(16, gameW / 42)), "#fff"); centered("ENTER 키를 눌러 다음 길로 이동하세요.", gameH * 0.27 + 177, 15, "#ffe9a4"); } function drawEnding() { gameCtx.fillStyle = "rgba(3,8,14,0.54)"; gameCtx.fillRect(0, 0, gameW, gameH); centered("THE END.", gameH * 0.45, Math.min(66, gameW * 0.12), "#fff0b0"); centered("익숙함은 정답이 아니라 다시 바라보고 이해해야 할 출발점입니다.", gameH * 0.45 + 52, Math.max(14, Math.min(20, gameW / 36)), "#fff"); centered("기억을 되찾는 것보다 중요한 것은 경험을 통해 성장하는 일입니다.", gameH * 0.45 + 84, Math.max(13, Math.min(18, gameW / 40)), "#d7e8ef"); centered("메인 화면으로 돌아가려면 ENTER 키를 누르세요.", gameH * 0.45 + 145, 16, "#ffe069"); } function drawSettings() { gameCtx.fillStyle = "rgba(0,0,0,0.68)"; gameCtx.fillRect(0, 0, gameW, gameH); const boxW = Math.min(520, gameW * 0.88); const boxX = (gameW - boxW) / 2; const boxY = Math.max(70, gameH * 0.18); panel(boxX, boxY, boxW, 310, 0.97); centered("사운드 설정", boxY + 46, 27, "#fff0ac"); gameCtx.textAlign = "left"; gameCtx.fillStyle = "#fff"; gameCtx.font = "600 16px system-ui"; gameCtx.fillText("BGM 볼륨", boxX + 40, boxY + 105); gameCtx.fillText("효과음 볼륨", boxX + 40, boxY + 168); gameCtx.fillText("전체 소리", boxX + 40, boxY + 228); function slider(y, value) { const start = boxX + 165; const width = boxW - 210; gameCtx.fillStyle = "#384753"; gameCtx.fillRect(start, y, width, 8); gameCtx.fillStyle = "#ffe069"; gameCtx.fillRect(start, y, width * value, 8); gameCtx.beginPath(); gameCtx.arc(start + width * value, y + 4, 10, 0, Math.PI * 2); gameCtx.fill(); } slider(boxY + 99, bgmVolume); slider(boxY + 162, sfxVolume); gameCtx.fillStyle = masterOn ? "#5dbb82" : "#8b4b54"; gameCtx.fillRect(boxX + 165, boxY + 207, 82, 32); gameCtx.textAlign = "center"; gameCtx.fillStyle = "#fff"; gameCtx.font = "700 15px system-ui"; gameCtx.fillText(masterOn ? "ON" : "OFF", boxX + 206, boxY + 229); gameCtx.fillStyle = "#453d36"; gameCtx.fillRect(boxX + boxW - 120, boxY + 258, 80, 32); gameCtx.fillStyle = "#fff"; gameCtx.fillText("닫기", boxX + boxW - 80, boxY + 280); } function settingPointer(x, y) { const boxW = Math.min(520, gameW * 0.88); const boxX = (gameW - boxW) / 2; const boxY = Math.max(70, gameH * 0.18); const sliderX = boxX + 165; const sliderW = boxW - 210; if (y > boxY + 82 && y < boxY + 122) { bgmVolume = Math.max(0, Math.min(1, (x - sliderX) / sliderW)); if (currentBgm) currentBgm.volume = masterOn ? bgmVolume : 0; playSfx(); } else if (y > boxY + 145 && y < boxY + 185) { sfxVolume = Math.max(0, Math.min(1, (x - sliderX) / sliderW)); playSfx(); } else if (x > boxX + 155 && x < boxX + 260 && y > boxY + 198 && y < boxY + 248) { masterOn = !masterOn; if (currentBgm) currentBgm.volume = masterOn ? bgmVolume : 0; if (masterOn) resumeMusic(); playSfx(); } else if (x > boxX + boxW - 135 && x < boxX + boxW - 25 && y > boxY + 245 && y < boxY + 302) { settingsOpen = false; playSfx(); } } function pointerPosition(event) { const rect = gameCanvas.getBoundingClientRect(); return { x: (event.clientX - rect.left) * gameW / rect.width, y: (event.clientY - rect.top) * gameH / rect.height }; } gameCanvas.addEventListener("pointerdown", function (event) { resumeMusic(); const point = pointerPosition(event); if (settingsOpen) { settingPointer(point.x, point.y); return; } if (point.x > gameW - 78 && point.y < 76) { settingsOpen = true; playSfx(); return; } if (scene > 0 && scene < 6) jump(); }); addEventListener("keydown", function (event) { keys[event.code] = true; resumeMusic(); if (event.code === "ArrowUp" || event.code === "Space") { event.preventDefault(); if (!event.repeat) jump(); } if (event.code === "KeyS" && !event.repeat) { settingsOpen = !settingsOpen; playSfx(); } if (event.code === "Escape" && settingsOpen) { settingsOpen = false; playSfx(); } if (event.code === "KeyR" && scene > 0 && scene < 6) { buildStage(scene); gameOver = false; cleared = false; reachedGoal = false; npcTouched = false; playSfx(); } if (event.code === "Enter" && !event.repeat && !settingsOpen) { playSfx(); if (scene === 0) enterScene(1); else if (scene === 6) enterScene(0); else if (cleared) enterScene(scene === 5 ? 6 : scene + 1); } }); addEventListener("keyup", function (event) { keys[event.code] = false; }); function frame(now) { const dt = Math.min(0.033, (now - lastTime) / 1000); lastTime = now; update(dt, now); drawCover(images[sceneImages[scene]]); if (scene === 0) { drawMenu(); } else if (scene === 6) { drawEnding(); } else { drawWorld(now); drawHud(now); if (cleared) drawClear(); } drawSoundButton(); if (settingsOpen) drawSettings(); requestAnimationFrame(frame); } loadImages(); fitGame(); addEventListener("resize", fitGame); addEventListener("orientationchange", fitGame); playMusic(musicKeys[0]); requestAnimationFrame(frame); })(); // 순수 Canvas 2D 스타터 — 클릭 리플 + 별 배경. AI에게 "이 위에 OO 게임 만들어줘"라고 요청하세요. const canvas = document.getElementById("stage"); let W = 480; let H = 720; let ctx = canvas.getContext("2d"); function resize() { const fitted = fitStageCanvas(canvas); W = fitted.w; H = fitted.h; ctx = fitted.ctx || canvas.getContext("2d"); } resize(); addEventListener("resize", resize); const stars = []; for (let i = 0; i < 48; i += 1) { stars.push({ x: Math.random(), y: Math.random(), s: 0.4 + Math.random() * 1.6, tw: Math.random() * Math.PI * 2 }); } const ripples = []; canvas.addEventListener("pointerdown", (e) => { const rect = canvas.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * W; const y = ((e.clientY - rect.top) / rect.height) * H; ripples.push({ x, y, r: 4, a: 1 }); }); let t = 0; function draw() { t += 0.016; const g = ctx.createLinearGradient(0, 0, 0, H); g.addColorStop(0, "#12122a"); g.addColorStop(1, "#05060d"); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H); for (const s of stars) { const a = 0.35 + 0.65 * Math.abs(Math.sin(t * 1.4 + s.tw)); ctx.fillStyle = "rgba(196,181,253," + a + ")"; ctx.fillRect(s.x * W, s.y * H, s.s, s.s); } ctx.fillStyle = "#c4b5fd"; ctx.font = "bold 26px system-ui"; ctx.textAlign = "center"; ctx.fillText("빈 캔버스", W / 2, H / 2 - 28); ctx.fillStyle = "#9ca3af"; ctx.font = "15px system-ui"; ctx.fillText("클릭해 리플을 만들고", W / 2, H / 2 + 6); ctx.fillText("AI에게 원하는 게임을 요청하세요", W / 2, H / 2 + 28); ctx.textAlign = "left"; for (let i = ripples.length - 1; i >= 0; i--) { const r = ripples[i]; r.r += 2.2; r.a -= 0.025; if (r.a <= 0) { ripples.splice(i, 1); continue; } ctx.beginPath(); ctx.arc(r.x, r.y, r.r, 0, Math.PI * 2); ctx.strokeStyle = "rgba(167,139,250," + r.a + ")"; ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.arc(r.x, r.y, 6, 0, Math.PI * 2); ctx.fillStyle = "rgba(217,70,239," + r.a + ")"; ctx.fill(); } requestAnimationFrame(draw); } draw();