(function () { "use strict"; var C = window.GameConfig || {}; var E = window.Entities || {}; var BGM = { tempo: 620, notes: [261.63, 329.63, 392, 329.63, 293.66, 349.23, 440, 349.23] }; function Game(canvas) { // 배포 환경에 따라 스크립트 로딩 순서가 달라질 수 있어서, // 게임을 실제로 시작하는 이 시점에 설정값을 다시 한 번 읽어와요. C = window.GameConfig || C; E = window.Entities || E; this.canvas = canvas; this.ctx = canvas.getContext("2d"); if (!this.ctx) { throw new Error("Canvas 2D context를 생성할 수 없습니다."); } this.w = 1; this.h = 1; this.last = 0; this.time = 0; this.running = false; this.screen = "map"; this.dayIndex = 0; this.focus = 0; this.found = []; this.hitboxes = []; this.particles = []; this.result = null; this.renderError = ""; this.assets = window.ZeroadImages || {}; this.state = this.load(); this.audioContext = null; this.bgmTimer = 0; this.bgmStep = 0; this.lastAudioScreen = this.screen; var self = this; this.assetReadyHandler = function (event) { var detail = event.detail || {}; var images = window.ZeroadImages || {}; if (detail.key && images[detail.key]) { self.assets[detail.key] = images[detail.key]; } if (detail.key === C.mapAsset || detail.key === "img_1") { self.ensureMapAsset(); } }; window.addEventListener("zeroad-asset-ready", this.assetReadyHandler); this.resize(); this.bindAudio(); this.ensureMapAsset(); window.setTimeout(function () { self.ensureMapAsset(true); }, 3500); } Game.prototype.load = function () { var fallback = { unlocked: 0, completed: [] }; try { var saved = JSON.parse(localStorage.getItem(C.storageKey)); if (!saved) return fallback; return { unlocked: Math.max( 0, Math.min((C.days || []).length - 1, Number(saved.unlocked) || 0) ), completed: Array.isArray(saved.completed) ? saved.completed : [] }; } catch (error) { return fallback; } }; Game.prototype.save = function () { try { localStorage.setItem(C.storageKey, JSON.stringify(this.state)); } catch (error) { return; } }; // 설정 화면의 "처음부터 하기" 버튼에서 호출해요. Game.prototype.reset = function () { this.state = { unlocked: 0, completed: [] }; this.save(); this.goMap(); }; Game.prototype.setAssets = function (assets) { this.assets = assets || window.ZeroadImages || {}; }; Game.prototype.createAssets = function (assets) { this.setAssets(assets); this.ensureMapAsset(); return this.assets; }; Game.prototype.ensureMapAsset = function (useFallback) { var images = window.ZeroadImages || {}; var mapKey = C.mapAsset || "img_1"; var loadedMap = images[mapKey] || images.img_1; if (loadedMap && loadedMap.width && loadedMap.height) { this.assets[mapKey] = loadedMap; this.assets.img_1 = loadedMap; return true; } if (!useFallback) return false; var fallback = document.createElement("canvas"); fallback.width = 1200; fallback.height = 720; var context = fallback.getContext("2d"); if (!context) return false; var sky = context.createLinearGradient(0, 0, 0, fallback.height); sky.addColorStop(0, "#dce5df"); sky.addColorStop(0.55, "#b6c5bd"); sky.addColorStop(1, "#73827c"); context.fillStyle = sky; context.fillRect(0, 0, fallback.width, fallback.height); context.fillStyle = "rgba(245, 240, 229, 0.72)"; context.beginPath(); context.moveTo(0, 500); context.quadraticCurveTo(270, 390, 520, 490); context.quadraticCurveTo(820, 600, 1200, 430); context.lineTo(1200, 720); context.lineTo(0, 720); context.closePath(); context.fill(); context.strokeStyle = "rgba(64, 86, 78, 0.48)"; context.lineWidth = 22; context.lineCap = "round"; context.beginPath(); context.moveTo(80, 640); context.bezierCurveTo(320, 510, 440, 560, 610, 410); context.bezierCurveTo(760, 280, 920, 360, 1120, 170); context.stroke(); var places = [ [250, 430, "#69b8ad"], [610, 360, "#dfa064"], [920, 300, "#dfc66e"] ]; for (var i = 0; i < places.length; i++) { context.fillStyle = places[i][2]; context.beginPath(); context.arc(places[i][0], places[i][1], 42, 0, Math.PI * 2); context.fill(); context.strokeStyle = "rgba(255,255,255,0.9)"; context.lineWidth = 7; context.stroke(); } images[mapKey] = fallback; images.img_1 = fallback; window.ZeroadImages = images; this.assets[mapKey] = fallback; this.assets.img_1 = fallback; return true; }; Game.prototype.resize = function () { var rect = this.canvas.getBoundingClientRect(); var dpr = Math.min(2, window.devicePixelRatio || 1); this.w = Math.max(1, rect.width || this.canvas.clientWidth || window.innerWidth); this.h = Math.max(1, rect.height || this.canvas.clientHeight || window.innerHeight); this.canvas.width = Math.round(this.w * dpr); this.canvas.height = Math.round(this.h * dpr); this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; Game.prototype.bindAudio = function () { var self = this; this.canvas.addEventListener("pointerdown", function () { self.enableAudio(); self.playSound("tap"); }); }; Game.prototype.enableAudio = function () { var AudioContextClass = window.AudioContext || window.webkitAudioContext; if (!AudioContextClass) return; try { if (!this.audioContext) { this.audioContext = new AudioContextClass(); } if (this.audioContext.state === "suspended") { this.audioContext.resume(); } this.startBgm(); } catch (error) { this.audioContext = null; } }; Game.prototype.playTone = function (frequency, duration, volume, type) { var audio = this.audioContext; if (!audio || audio.state !== "running") return; var oscillator = audio.createOscillator(); var gain = audio.createGain(); var now = audio.currentTime; oscillator.type = type || "sine"; oscillator.frequency.setValueAtTime(frequency, now); gain.gain.setValueAtTime(0.0001, now); gain.gain.exponentialRampToValueAtTime(volume, now + 0.025); gain.gain.exponentialRampToValueAtTime(0.0001, now + duration); oscillator.connect(gain); gain.connect(audio.destination); oscillator.start(now); oscillator.stop(now + duration + 0.04); }; Game.prototype.playSound = function (kind) { if (kind === "tap") { this.playTone(520, 0.1, 0.025, "triangle"); } else if (kind === "result") { this.playTone(523.25, 0.35, 0.045, "sine"); this.playTone(659.25, 0.48, 0.035, "sine"); } else if (kind === "ending") { this.playTone(783.99, 0.65, 0.045, "sine"); } }; Game.prototype.startBgm = function () { var self = this; if (this.bgmTimer || !this.audioContext) return; this.bgmTimer = window.setInterval(function () { if (!self.running || !self.audioContext || self.audioContext.state !== "running") return; var note = BGM.notes[self.bgmStep % BGM.notes.length]; self.playTone(note, 0.72, 0.012, "sine"); self.playTone(note * 0.5, 0.9, 0.008, "sine"); self.bgmStep += 1; }, BGM.tempo); }; Game.prototype.start = function () { if (this.running) { this.draw(); return; } this.running = true; this.last = performance.now(); this.lastAudioScreen = this.screen; this.startBgm(); var self = this; function frame(now) { if (!self.running) return; var dt = Math.min(0.05, Math.max(0, (now - self.last) / 1000)); self.last = now; self.time += dt; self.update(dt); self.draw(); window.requestAnimationFrame(frame); } this.draw(); window.requestAnimationFrame(frame); }; Game.prototype.stop = function () { this.running = false; }; Game.prototype.update = function (dt) { var i; if (this.screen !== this.lastAudioScreen) { if (this.screen === "result") { this.playSound("result"); } else if (this.screen === "ending") { this.playSound("ending"); } this.lastAudioScreen = this.screen; } for (i = this.particles.length - 1; i >= 0; i--) { var particle = this.particles[i]; particle.life -= dt; particle.x += particle.vx * dt; particle.y += particle.vy * dt; particle.vy += 28 * dt; if (particle.life <= 0) { this.particles.splice(i, 1); } } }; Game.prototype.draw = function () { var ctx = this.ctx; ctx.setTransform( this.canvas.width / this.w, 0, 0, this.canvas.height / this.h, 0, 0 ); ctx.clearRect(0, 0, this.w, this.h); this.hitboxes = []; this.renderError = ""; try { if (this.screen === "map" && typeof E.drawMap === "function") { E.drawMap(this); } else if (this.screen === "day" && typeof E.drawDay === "function") { E.drawDay(this); } else if (this.screen === "result") { this.drawResult(); } else if (this.screen === "ending") { this.drawEnding(); } else { this.drawFallback("마을 지도를 준비하고 있어요."); } } catch (error) { this.renderError = error && error.message ? error.message : String(error); this.hitboxes = []; this.drawFallback("화면을 다시 불러왔어요."); } this.drawParticles(); this.drawFocus(); }; Game.prototype.drawFallback = function (message) { var ctx = this.ctx; var gradient = ctx.createLinearGradient(0, 0, 0, this.h); gradient.addColorStop(0, "#71817d"); gradient.addColorStop(1, "#303837"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, this.w, this.h); ctx.fillStyle = "rgba(243,238,226,0.12)"; ctx.beginPath(); ctx.arc(this.w * 0.5, this.h * 0.42, Math.min(this.w, this.h) * 0.22, 0, Math.PI * 2); ctx.fill(); this.centerText(C.title || "색을 건네는 하루", this.h * 0.38, 30, "#f3eee2", "800"); this.centerText(message, this.h * 0.47, 16, "rgba(243,238,226,0.82)", "500"); if (this.renderError) { this.centerText( "장면을 표시하지 못해 기본 화면으로 전환했어요.", this.h * 0.53, 13, "rgba(243,238,226,0.65)", "500" ); } this.addButton( this.h * 0.64, this.screen === "day" ? "마을 지도로 돌아가기" : "첫 번째 하루 시작하기", this.screen === "day" ? { type: "map" } : { type: "day", index: 0 } ); }; Game.prototype.openDay = function (index) { var days = C.days || []; if (index < 0 || index >= days.length) return; if (index > this.state.unlocked) return; this.dayIndex = index; this.found = []; this.focus = 0; this.result = null; this.screen = "day"; this.sound("open"); }; Game.prototype.goMap = function () { this.screen = "map"; this.focus = 0; this.found = []; this.result = null; this.sound("open"); }; Game.prototype.findClue = function (action) { var index = typeof action.index === "number" ? action.index : action.i; if (typeof index !== "number") return; if (this.found.indexOf(index) >= 0) return; var days = C.days || []; var day = days[this.dayIndex]; var clue = day && day.clues && day.clues[index]; this.found.push(index); this.burst( typeof action.x === "number" ? action.x : this.w * 0.5, typeof action.y === "number" ? action.y : this.h * 0.5, this.getDayColor(), 14 ); this.sound("clue"); if (clue && typeof this.onClue === "function") { this.onClue(clue); } }; Game.prototype.choose = function (index) { var days = C.days || []; var day = days[this.dayIndex]; if (!day || !day.actions || !day.actions[index]) return; var choice = day.actions[index]; var preferred = Array.isArray(day.preferred) && day.preferred.indexOf(choice.id) >= 0; this.result = { preferred: preferred, title: preferred ? day.result : "조금 다른 마음도 분명히 전해졌어요.", text: preferred ? choice.desc : "어떤 선택이든 다음 하루가 열리고 다시 도전할 수 있어요." }; if (this.state.completed.indexOf(this.dayIndex) < 0) { this.state.completed.push(this.dayIndex); } if (this.dayIndex < days.length - 1) { this.state.unlocked = Math.max(this.state.unlocked, this.dayIndex + 1); } this.save(); this.screen = "result"; this.focus = 0; this.burst(this.w * 0.5, this.h * 0.4, this.getDayColor(), 28); this.sound(preferred ? "success" : "choice"); }; Game.prototype.activate = function (action) { if (!action) return; if (action.type === "day") { this.openDay(Number(action.index) || 0); } else if (action.type === "clue") { this.findClue(action); } else if (action.type === "choice") { this.choose(typeof action.index === "number" ? action.index : action.i); } else if (action.type === "map" || action.type === "back") { this.goMap(); } else if (action.type === "retry") { this.openDay(this.dayIndex); } else if (action.type === "next") { if (this.dayIndex < (C.days || []).length - 1) { this.openDay(this.dayIndex + 1); } else { this.screen = "ending"; this.focus = 0; } } else if (action.type === "ending") { this.screen = "ending"; this.focus = 0; } else if (action.type === "restart") { this.state = { unlocked: 0, completed: [] }; this.save(); this.goMap(); } }; Game.prototype.pointer = function (clientX, clientY) { var rect = this.canvas.getBoundingClientRect(); var x = (clientX - rect.left) * this.w / Math.max(1, rect.width); var y = (clientY - rect.top) * this.h / Math.max(1, rect.height); var i; this.clickEffect(x, y); for (i = this.hitboxes.length - 1; i >= 0; i--) { var hit = this.hitboxes[i]; if ( x >= hit.x && x <= hit.x + hit.w && y >= hit.y && y <= hit.y + hit.h ) { this.focus = i; this.activate(hit.action || hit); return; } } }; Game.prototype.key = function (event) { var count = this.hitboxes.length; var key = event.key; if (key === "Escape") { event.preventDefault(); this.goMap(); return; } if (!count) return; if (key === "ArrowRight" || key === "ArrowDown") { event.preventDefault(); this.focus = (this.focus + 1) % count; this.sound("move"); } else if (key === "ArrowLeft" || key === "ArrowUp") { event.preventDefault(); this.focus = (this.focus - 1 + count) % count; this.sound("move"); } else if (key === "Enter" || key === " ") { event.preventDefault(); this.activate(this.hitboxes[this.focus].action || this.hitboxes[this.focus]); } }; Game.prototype.drawResult = function () { var result = this.result || { title: "마음이 전해졌어요.", text: "다음 하루로 이어가 보세요." }; var days = C.days || []; var day = days[this.dayIndex]; var lastDay = this.dayIndex >= days.length - 1; var ctx = this.ctx; var image = day ? (this.assets[day.background] || (window.ZeroadImages || {})[day.background]) : null; if (image && image.width && image.height) { var scale = Math.max(this.w / image.width, this.h / image.height); var drawW = image.width * scale; var drawH = image.height * scale; ctx.drawImage(image, (this.w - drawW) * 0.5, (this.h - drawH) * 0.5, drawW, drawH); ctx.fillStyle = "rgba(24,30,29,0.5)"; ctx.fillRect(0, 0, this.w, this.h); } else { this.drawPanelBackground(); } this.centerText(result.title, this.h * 0.30, 27, "#f3eee2", "800"); this.centerText(result.text, this.h * 0.39, 15, "rgba(243,238,226,0.8)", "500"); this.addButton( this.h * 0.53, lastDay ? "마지막 장면 보기" : "다음 날 만나기", { type: "next" } ); this.addButton(this.h * 0.64, "이 하루 다시 만나기", { type: "retry" }); this.addButton(this.h * 0.75, "마을 지도로 돌아가기", { type: "map" }); }; Game.prototype.drawEnding = function () { var ctx = this.ctx; var image = this.assets[C.endingAsset] || (window.ZeroadImages || {})[C.endingAsset]; if (image && image.width && image.height) { var scale = Math.max(this.w / image.width, this.h / image.height); var drawW = image.width * scale; var drawH = image.height * scale; ctx.drawImage(image, (this.w - drawW) * 0.5, (this.h - drawH) * 0.5, drawW, drawH); ctx.fillStyle = "rgba(28,35,34,0.48)"; ctx.fillRect(0, 0, this.w, this.h); } else { this.drawPanelBackground(); } this.centerText("당신이 건넨 색이 하루를 채웠어요", this.h * 0.30, 28, "#f3eee2", "800"); this.centerText( "완료한 날은 지도에서 언제든 다시 만날 수 있어요.", this.h * 0.39, 15, "rgba(243,238,226,0.82)", "500" ); this.addButton(this.h * 0.68, "다시 마을 둘러보기", { type: "map" }); }; Game.prototype.drawPanelBackground = function () { var ctx = this.ctx; var gradient = ctx.createRadialGradient( this.w * 0.5, this.h * 0.38, 10, this.w * 0.5, this.h * 0.38, Math.max(this.w, this.h) * 0.7 ); gradient.addColorStop(0, this.getDayColor()); gradient.addColorStop(1, "#303837"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, this.w, this.h); ctx.fillStyle = "rgba(24,30,29,0.42)"; ctx.fillRect(0, 0, this.w, this.h); }; Game.prototype.addButton = function (y, label, action) { var width = Math.min(360, this.w - 40); var height = 52; var x = (this.w - width) * 0.5; var ctx = this.ctx; ctx.fillStyle = "rgba(36,44,42,0.9)"; ctx.strokeStyle = this.getDayColor(); ctx.lineWidth = 2; ctx.fillRect(x, y, width, height); ctx.strokeRect(x, y, width, height); this.centerText(label, y + height * 0.5, 15, "#f3eee2", "800"); this.hitboxes.push({ x: x, y: y, w: width, h: height, action: action }); }; Game.prototype.centerText = function (text, y, size, color, weight) { var safeSize = Math.max(12, Math.min(size, this.w * 0.065)); var ctx = this.ctx; ctx.fillStyle = color; ctx.font = weight + " " + safeSize + "px sans-serif"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(String(text || ""), this.w * 0.5, y, Math.max(40, this.w - 36)); }; Game.prototype.getDayColor = function () { var days = C.days || []; var day = days[this.dayIndex]; if (day && day.color) return day.color; if (C.colors && C.colors.yellow) return C.colors.yellow; return "#dfc66e"; }; Game.prototype.drawFocus = function () { if (!this.hitboxes.length) return; if (this.focus < 0 || this.focus >= this.hitboxes.length) { this.focus = 0; } var hit = this.hitboxes[this.focus]; var ctx = this.ctx; ctx.save(); ctx.strokeStyle = "rgba(255,249,226,0.92)"; ctx.lineWidth = 2; ctx.setLineDash([6, 5]); ctx.strokeRect(hit.x - 4, hit.y - 4, hit.w + 8, hit.h + 8); ctx.restore(); }; Game.prototype.clickEffect = function (x, y) { this.burst(x, y, this.getDayColor(), 6); this.sound("tap"); }; Game.prototype.burst = function (x, y, color, count) { var i; for (i = 0; i < count; i++) { var angle = Math.PI * 2 * i / Math.max(1, count); var speed = 24 + Math.random() * 52; this.particles.push({ x: x, y: y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed - 14, life: 0.55 + Math.random() * 0.45, maxLife: 1, color: color }); } }; Game.prototype.drawParticles = function () { var ctx = this.ctx; var i; ctx.save(); for (i = 0; i < this.particles.length; i++) { var particle = this.particles[i]; var alpha = Math.max(0, Math.min(1, particle.life / particle.maxLife)); ctx.globalAlpha = alpha; ctx.fillStyle = particle.color; ctx.beginPath(); ctx.arc(particle.x, particle.y, 2.5 + alpha * 2, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); }; Game.prototype.sound = function () { return; }; Game.prototype.enableAudio = function () { return; }; Game.prototype.startMusic = function () { return; }; window.Game = Game; })();