| (() => { |
| 'use strict'; |
|
|
| const canvas = document.querySelector('#game'); |
| const ctx = canvas.getContext('2d', { alpha: false }); |
| const intro = document.querySelector('#intro'); |
| const objectiveEl = document.querySelector('#objective'); |
| const TILE = 48; |
| const MAP_W = 50; |
| const MAP_H = 35; |
| const WORLD_W = MAP_W * TILE; |
| const WORLD_H = MAP_H * TILE; |
| const LAKE = { x: 20.5 * TILE, y: 25 * TILE, rx: 3.25 * TILE, ry: 2.05 * TILE }; |
| const SHRINE_DOOR = { x: 25 * TILE, top: 5 * TILE, width: 2 * TILE }; |
| const view = { w: canvas.width, h: canvas.height }; |
| const keys = new Set(); |
| const image = (src) => { const img = new Image(); img.src = src; return img; }; |
| const sprites = { |
| hero: image('assets/klc/midi-ow.png'), |
| bug: image('assets/klc/pillbug.png'), |
| }; |
| const terrain = document.createElement('canvas'); |
| terrain.width = WORLD_W; |
| terrain.height = WORLD_H; |
| const terrainCtx = terrain.getContext('2d'); |
|
|
| let state; |
| let lastTime = 0; |
| let toast = ''; |
| let toastTimer = 0; |
| let swingTimer = 0; |
| let hurtFlash = 0; |
| let seed = 412907; |
| let terrainReady = false; |
|
|
| function random() { |
| seed = (seed * 1664525 + 1013904223) >>> 0; |
| return seed / 4294967296; |
| } |
|
|
| function noise(x, y) { |
| const n = Math.sin(x * 127.1 + y * 311.7 + 41.73) * 43758.5453; |
| return n - Math.floor(n); |
| } |
|
|
| function fieldNoise(x, y) { |
| const x0 = Math.floor(x), y0 = Math.floor(y); |
| const smoothX = (x - x0) ** 2 * (3 - 2 * (x - x0)); |
| const smoothY = (y - y0) ** 2 * (3 - 2 * (y - y0)); |
| const top = noise(x0, y0) * (1 - smoothX) + noise(x0 + 1, y0) * smoothX; |
| const bottom = noise(x0, y0 + 1) * (1 - smoothX) + noise(x0 + 1, y0 + 1) * smoothX; |
| return top * (1 - smoothY) + bottom * smoothY; |
| } |
|
|
| const TRAIL = [ |
| [[25, 34], [28, 31], [33, 31], [32, 27]], |
| [[32, 27], [30, 22], [35, 19], [34, 15]], |
| [[34, 15], [33, 12], [29, 12], [25, 10]], |
| ]; |
|
|
| function trailNearTile(x, y) { |
| const px = x + .5, py = y + .5, radius = .75; |
| for (const curve of TRAIL) { |
| let lastX = curve[0][0], lastY = curve[0][1]; |
| for (let i = 1; i <= 24; i++) { |
| const t = i / 24, u = 1 - t; |
| const nextX = u ** 3 * curve[0][0] + 3 * u ** 2 * t * curve[1][0] |
| + 3 * u * t ** 2 * curve[2][0] + t ** 3 * curve[3][0]; |
| const nextY = u ** 3 * curve[0][1] + 3 * u ** 2 * t * curve[1][1] |
| + 3 * u * t ** 2 * curve[2][1] + t ** 3 * curve[3][1]; |
| const dx = nextX - lastX, dy = nextY - lastY, length = dx * dx + dy * dy || 1; |
| const nearest = Math.max(0, Math.min(1, ((px - lastX) * dx + (py - lastY) * dy) / length)); |
| if (Math.hypot(px - lastX - dx * nearest, py - lastY - dy * nearest) < radius) return true; |
| lastX = nextX; |
| lastY = nextY; |
| } |
| } |
| return false; |
| } |
|
|
| function makeTerrain() { |
| |
| |
| const texture = document.createElement('canvas'); |
| texture.width = 480; |
| texture.height = 336; |
| const tctx = texture.getContext('2d'); |
| const pixels = tctx.createImageData(texture.width, texture.height); |
| for (let y = 0; y < texture.height; y++) { |
| for (let x = 0; x < texture.width; x++) { |
| |
| |
| |
| const broad = (fieldNoise(x / 62, y / 45) - .5) * 17; |
| const middle = (fieldNoise(x / 24, y / 19) - .5) * 8; |
| const fine = (fieldNoise(x / 9, y / 7) - .5) * 3; |
| const base = broad + middle + fine; |
| const i = (y * texture.width + x) * 4; |
| pixels.data[i] = Math.round(70 + base); |
| pixels.data[i + 1] = Math.round(114 + base); |
| pixels.data[i + 2] = Math.round(68 + base * .58); |
| pixels.data[i + 3] = 255; |
| } |
| } |
| tctx.putImageData(pixels, 0, 0); |
|
|
| const ground = terrainCtx; |
| ground.clearRect(0, 0, WORLD_W, WORLD_H); |
| ground.imageSmoothingEnabled = true; |
| ground.drawImage(texture, 0, 0, WORLD_W, WORLD_H); |
|
|
| |
| |
| |
| ground.save(); |
| ground.lineCap = 'round'; |
| ground.lineJoin = 'round'; |
| ground.beginPath(); |
| ground.moveTo(TRAIL[0][0][0] * TILE, TRAIL[0][0][1] * TILE); |
| for (const curve of TRAIL) { |
| ground.bezierCurveTo(curve[1][0] * TILE, curve[1][1] * TILE, |
| curve[2][0] * TILE, curve[2][1] * TILE, curve[3][0] * TILE, curve[3][1] * TILE); |
| } |
| ground.strokeStyle = '#354a36'; |
| ground.globalAlpha = .23; |
| ground.lineWidth = 52; |
| ground.stroke(); |
| ground.strokeStyle = '#8d8059'; |
| ground.globalAlpha = .48; |
| ground.lineWidth = 42; |
| ground.stroke(); |
| ground.strokeStyle = '#a39569'; |
| ground.globalAlpha = .16; |
| ground.lineWidth = 30; |
| ground.stroke(); |
| ground.restore(); |
|
|
| |
| |
| |
| const shoreline = (rx, ry) => { |
| ground.beginPath(); |
| for (let i = 0; i <= 144; i++) { |
| const angle = (i / 144) * Math.PI * 2; |
| const warp = 1 + Math.sin(angle * 3 + .6) * .009 + Math.sin(angle * 7 + 1.9) * .004; |
| const px = LAKE.x + Math.cos(angle) * rx * warp; |
| const py = LAKE.y + Math.sin(angle) * ry * warp; |
| if (i === 0) ground.moveTo(px, py); else ground.lineTo(px, py); |
| } |
| ground.closePath(); |
| }; |
| shoreline(LAKE.rx + 23, LAKE.ry + 19); |
| ground.fillStyle = '#5c8051'; |
| ground.fill(); |
| shoreline(LAKE.rx + 11, LAKE.ry + 9); |
| ground.fillStyle = '#6d9257'; |
| ground.fill(); |
| shoreline(LAKE.rx, LAKE.ry); |
| const water = ground.createLinearGradient(0, LAKE.y - LAKE.ry, 0, LAKE.y + LAKE.ry); |
| water.addColorStop(0, '#729986'); |
| water.addColorStop(.22, '#5d887b'); |
| water.addColorStop(.75, '#46756f'); |
| water.addColorStop(1, '#385f5e'); |
| ground.fillStyle = water; |
| ground.fill(); |
|
|
| const marsh = [ |
| [-1.25, -.72], [-.68, -1.34], [.53, -1.29], [1.12, -.83], |
| [1.2, -.06], [1.02, .7], [.43, 1.28], [-.72, 1.1], [-1.23, .52], |
| ]; |
| for (const [dx, dy] of marsh) { |
| const reedX = LAKE.x + dx * LAKE.rx; |
| const reedY = LAKE.y + dy * LAKE.ry; |
| if (Math.abs(dx) > 1.16 || Math.abs(dy) > 1.24) continue; |
| ground.fillStyle = '#75854f'; |
| ground.fillRect(Math.round(reedX), Math.round(reedY), 5, 3); |
| ground.fillStyle = '#8c9759'; |
| ground.fillRect(Math.round(reedX - 2), Math.round(reedY - 2), 3, 4); |
| ground.fillRect(Math.round(reedX + 3), Math.round(reedY - 3), 3, 4); |
| } |
|
|
| |
| ground.save(); |
| shoreline(LAKE.rx - 2, LAKE.ry - 2); |
| ground.clip(); |
| for (let i = 0; i < 14; i++) { |
| const x = LAKE.x + (noise(i + 58, 63) - .5) * LAKE.rx * 1.6; |
| const y = LAKE.y + (noise(i + 85, 47) - .5) * LAKE.ry * 1.25; |
| ground.fillStyle = i % 3 === 0 ? '#a0bb8c42' : '#7fac9342'; |
| ground.fillRect(Math.round(x), Math.round(y), 9 + i % 4 * 3, 1); |
| } |
| ground.restore(); |
|
|
| terrainReady = true; |
| } |
|
|
| function makeWorld() { |
| seed = 412907; |
| const obstacles = []; |
| const props = []; |
| const enemies = []; |
| const temple = { x: 21, y: 3, w: 8, h: 5 }; |
|
|
| for (let y = 0; y < MAP_H; y++) { |
| for (let x = 0; x < MAP_W; x++) { |
| if (x < 2 || y < 2 || x > MAP_W - 3 || y > MAP_H - 3) obstacles.push({ x, y, type: 'edge' }); |
| } |
| } |
|
|
| |
| obstacles.push({ x: 24, y: Math.floor(SHRINE_DOOR.top / TILE), type: 'seal' }); |
| obstacles.push({ x: 25, y: Math.floor(SHRINE_DOOR.top / TILE), type: 'seal' }); |
|
|
| const reserved = (x, y) => (x >= 15 && x <= 34 && y >= 2 && y <= 12) |
| || (x >= 21 && x <= 29 && y >= 26 && y <= 33) |
| || ((x + .5 - LAKE.x / TILE) ** 2 / 20 + (y + .5 - LAKE.y / TILE) ** 2 / 11 < 1.35) |
| || trailNearTile(x, y); |
| for (let i = 0; i < 165; i++) { |
| const x = 3 + Math.floor(random() * (MAP_W - 6)); |
| const y = 3 + Math.floor(random() * (MAP_H - 6)); |
| if (reserved(x, y) || obstacles.some((o) => o.x === x && o.y === y)) continue; |
| const kind = random() > 0.57 ? 'tree' : 'rock'; |
| obstacles.push({ x, y, type: kind }); |
| props.push({ x, y, type: kind, variant: Math.floor(random() * 3) }); |
| } |
|
|
| const spawnPoints = [[9, 26], [14, 23], [33, 27], [39, 18], [10, 14], [37, 11], [13, 8]]; |
| for (let i = 0; i < spawnPoints.length; i++) { |
| const [tx, ty] = spawnPoints[i]; |
| enemies.push({ id: i, x: tx * TILE + 23, y: ty * TILE + 25, hp: 2, maxHp: 2, alive: true, cooldown: 0, phase: random() * 6, boss: false }); |
| } |
|
|
| return { obstacles, props, enemies, temple }; |
| } |
|
|
| function reset() { |
| keys.clear(); |
| const world = makeWorld(); |
| state = { |
| ...world, |
| player: { x: 25 * TILE, y: 29 * TILE, facing: 'up', hp: 6, maxHp: 6, invuln: 0, walk: 0 }, |
| shards: 0, |
| boss: null, |
| bossDefeated: false, |
| ending: false, |
| endingTime: 0, |
| endingStage: '', |
| creditsShown: false, |
| chase: [], |
| chaseSparkTimer: 0, |
| started: false, |
| won: false, |
| time: 0, |
| particles: [], |
| projectiles: [], |
| drops: [], |
| }; |
| toast = '沿著林間小徑前進，找到星火碎片。'; |
| toastTimer = 3.5; |
| swingTimer = 0; |
| hurtFlash = 0; |
| updateObjective(); |
| } |
|
|
| function updateObjective() { |
| if (state.creditsShown) objectiveEl.textContent = '謝謝你和我們一起完成這場冒險。'; |
| else if (state.ending) objectiveEl.textContent = '勇者和魔物的最後一場追逐！'; |
| else if (state.bossDefeated) objectiveEl.textContent = '魔王已敗，走進敞開的神殿大門。'; |
| else if (state.boss) objectiveEl.textContent = `擊敗神殿魔王 · ${'♥'.repeat(Math.max(0, state.boss.hp))}${'♡'.repeat(Math.max(0, state.boss.maxHp - state.boss.hp))}`; |
| else objectiveEl.textContent = `找到星火碎片 · ${state.shards} / 5`; |
| } |
|
|
| function start() { |
| if (state.won) reset(); |
| state.started = true; |
| intro.classList.add('hidden'); |
| toast = '森林深處的神殿，正等著最後一場戰鬥。'; |
| toastTimer = 3; |
| } |
|
|
| function showEnd() { |
| if (state.ending) return; |
| state.won = true; |
| state.ending = true; |
| state.endingTime = 0; |
| state.endingStage = 'opening-credits'; |
| state.creditsShown = false; |
| state.chaseSparkTimer = 0; |
| toast = ''; |
| toastTimer = 0; |
| keys.clear(); |
| state.player.x = SHRINE_DOOR.x; |
| state.player.y = SHRINE_DOOR.top - 20; |
| state.player.facing = 'right'; |
| state.chase = [ |
| { id: 1, x: state.player.x - 72, y: state.player.y + 40, phase: 1, alive: true, hp: 1, flash: 0 }, |
| { id: 2, x: state.player.x - 145, y: state.player.y - 29, phase: 2, alive: true, hp: 1, flash: 0 }, |
| { id: 3, x: state.player.x - 218, y: state.player.y + 57, phase: 3, alive: true, hp: 1, flash: 0 }, |
| ]; |
| state.chaseSparkTimer = 0; |
| intro.innerHTML = '<div class="title-card credits-card"><div class="title-eyebrow">THE PEOPLE OF STARFIRE FOREST</div><h1>星火之森</h1><p>古老封印再度閃耀……</p><div class="credits-list"><span>作者</span><strong>HelloSun</strong><span>協作</span><strong>GPT-6_Luna</strong></div><div class="title-hint">神殿深處傳來急促的腳步聲</div></div>'; |
| intro.classList.remove('hidden'); |
| updateObjective(); |
| } |
|
|
| function showCredits() { |
| state.creditsShown = true; |
| state.endingStage = 'done'; |
| intro.innerHTML = '<div class="title-card credits-card"><div class="title-eyebrow">THE PEOPLE OF STARFIRE FOREST</div><h1>星火之森</h1><p>勇者成功逃離魔物追逐，謝謝你完成冒險！</p><div class="credits-list"><span>作者</span><strong>HelloSun</strong><span>協作</span><strong>GPT-6_Luna</strong></div><button id="start" class="start-button" type="button"><span>✦</span> 再玩一次 <span>✦</span></button><div class="title-hint">THANK YOU FOR PLAYING</div></div>'; |
| intro.classList.remove('hidden'); |
| intro.querySelector('#start').addEventListener('click', () => { |
| reset(); |
| showIntro(); |
| intro.classList.remove('hidden'); |
| }); |
| updateObjective(); |
| } |
|
|
| function isSolid(x, y) { |
| const tx = Math.floor(x / TILE); |
| const ty = Math.floor(y / TILE); |
| return state.obstacles.some((o) => { |
| if (o.x !== tx || o.y !== ty) return false; |
| if (o.type !== 'seal') return true; |
| if (state.bossDefeated) return false; |
| |
| |
| return Math.abs(x - SHRINE_DOOR.x) < SHRINE_DOOR.width / 2 |
| && y >= SHRINE_DOOR.top - 4 && y < SHRINE_DOOR.top + 38; |
| }); |
| } |
|
|
| function isLake(x, y) { |
| const dx = (x - LAKE.x) / (LAKE.rx + 2); |
| const dy = (y - LAKE.y) / (LAKE.ry + 2); |
| return dx * dx + dy * dy < 1; |
| } |
|
|
| function canStand(x, y) { |
| const r = 11; |
| if (x < TILE * 2 + r || y < TILE * 2 + r || x > WORLD_W - TILE * 2 - r || y > WORLD_H - TILE * 2 - r) return false; |
| if (isSolid(x - r, y) || isSolid(x + r, y) || isSolid(x, y - r) || isSolid(x, y + r)) return false; |
| if ([[-r,0],[r,0],[0,-r],[0,r]].some(([dx,dy]) => isLake(x + dx, y + dy))) return false; |
| for (const p of state.props) if (p.type === 'tree' && Math.hypot(x - (p.x + .5) * TILE, y - (p.y + .66) * TILE) < 21) return false; |
| return true; |
| } |
|
|
| function say(text, duration = 2.3) { toast = text; toastTimer = duration; } |
|
|
| function burst(x, y, color, count = 10) { |
| for (let i = 0; i < count; i++) { |
| const a = random() * Math.PI * 2; |
| const speed = 35 + random() * 110; |
| state.particles.push({ x, y, vx: Math.cos(a) * speed, vy: Math.sin(a) * speed - 20, life: .35 + random() * .55, maxLife: .9, color, size: 2 + Math.floor(random() * 4) }); |
| } |
| } |
|
|
| function sword() { |
| if (!state.started || state.won || state.ending || swingTimer > .1) return; |
| swingTimer = .32; |
| const p = state.player; |
| const diagonal = Math.SQRT1_2; |
| const vector = { |
| up: [0, -1], 'up-right': [diagonal, -diagonal], right: [1, 0], |
| 'down-right': [diagonal, diagonal], down: [0, 1], |
| 'down-left': [-diagonal, diagonal], left: [-1, 0], |
| 'up-left': [-diagonal, -diagonal], |
| }[p.facing]; |
| const cx = p.x + vector[0] * 39; |
| const cy = p.y + vector[1] * 39; |
| for (const enemy of [...state.enemies, ...(state.boss ? [state.boss] : [])]) { |
| if (!enemy.alive && !enemy.boss) continue; |
| if (enemy.boss && enemy.flash > .1) continue; |
| const dx = enemy.x - cx; |
| const dy = enemy.y - cy; |
| const front = dx * vector[0] + dy * vector[1]; |
| const side = Math.abs(dx * vector[1] - dy * vector[0]); |
| if ((enemy.boss ? front > -14 && side < 58 && Math.hypot(dx, dy) < 92 : front > -18 && side < 36 && Math.abs(front) < 83)) { |
| enemy.hp -= enemy.boss ? 1 : 1; |
| enemy.flash = .19; |
| burst(enemy.x, enemy.y - 5, enemy.boss ? '#ffd676' : '#f6eaa8', enemy.boss ? 13 : 7); |
| if (enemy.hp <= 0) { |
| if (enemy.boss) { |
| state.bossDefeated = true; |
| state.boss = null; |
| burst(enemy.x, enemy.y, '#ffd879', 46); |
| say('魔王化作星塵！只有大門封印解除了，走進神殿看看吧。', 4.2); |
| updateObjective(); |
| } else { |
| enemy.alive = false; |
| state.drops.push({ x: enemy.x, y: enemy.y, life: 18, kind: 'shard' }); |
| say('魔物被打倒了！撿起掉落的星火碎片。', 2.4); |
| } |
| } |
| } |
| } |
| } |
|
|
| function hurt(amount, x, y) { |
| const p = state.player; |
| if (p.invuln > 0 || state.won) return; |
| p.hp = Math.max(0, p.hp - amount); |
| p.invuln = 1; |
| hurtFlash = .25; |
| burst(p.x, p.y, '#f08b78', 9); |
| say(p.hp === 0 ? '勇者倒下了！星火碎片還在，站起來再試一次。' : '被魔物擊中了！小心閃避。'); |
| if (p.hp === 0) { |
| window.setTimeout(() => { if (state.started && !state.won) { p.hp = p.maxHp; p.x = 25 * TILE; p.y = 29 * TILE; p.invuln = 1; say('在森林入口醒來了，繼續前進吧！'); } }, 950); |
| } |
| } |
|
|
| function summonBoss() { |
| state.boss = { x: SHRINE_DOOR.x, y: 7.15 * TILE, hp: 12, maxHp: 12, boss: true, alive: true, flash: 0, attackTimer: 1.4, phase: 0, radius: 35 }; |
| say('古老的封印裂開了……熔岩之王甦醒！', 3.2); |
| updateObjective(); |
| } |
|
|
| function tickEnding(seconds) { |
| const duration = Math.max(.001, seconds); |
| for (let i = 0; i < 1000; i++) update(duration / 1000); |
| } |
|
|
| function moveEnemy(enemy, dt) { |
| if (!enemy.alive || enemy.boss) return; |
| enemy.flash = Math.max(0, (enemy.flash || 0) - dt); |
| enemy.phase += dt * 4; |
| enemy.cooldown = Math.max(0, enemy.cooldown - dt); |
| const p = state.player; |
| const dx = p.x - enemy.x; |
| const dy = p.y - enemy.y; |
| const distance = Math.hypot(dx, dy); |
| if (distance < 380 && distance > 29) { |
| const step = Math.min(distance - 25, 52 * dt); |
| const nx = enemy.x + dx / distance * step; |
| const ny = enemy.y + dy / distance * step; |
| if (canStand(nx, enemy.y)) enemy.x = nx; |
| if (canStand(enemy.x, ny)) enemy.y = ny; |
| } |
| if (distance < 34 && enemy.cooldown <= 0) { |
| enemy.cooldown = 1.05; |
| hurt(1, enemy.x, enemy.y); |
| } |
| } |
|
|
| function showIntro() { |
| intro.innerHTML = '<div class="title-card"><div class="title-eyebrow">A LITTLE PIXEL ADVENTURE</div><h1>星火之森</h1><p>古老的神殿裡，沉睡著最後的火焰。</p><button id="start" class="start-button" type="button"><span>✦</span> 開始冒險 <span>✦</span></button><div class="title-hint">方向鍵移動 <span>·</span> Z 揮劍</div></div>'; |
| intro.querySelector('#start').addEventListener('click', start); |
| } |
|
|
| function updateBoss(dt) { |
| const boss = state.boss; |
| if (!boss) return; |
| boss.phase += dt; |
| boss.flash = Math.max(0, boss.flash - dt); |
| boss.attackTimer -= dt; |
| const p = state.player; |
| const dx = p.x - boss.x; |
| const dy = p.y - boss.y; |
| const distance = Math.hypot(dx, dy); |
| const speed = boss.hp < 6 ? 49 : 34; |
| if (distance > 86) { |
| boss.x += dx / Math.max(1, distance) * speed * dt; |
| boss.y += dy / Math.max(1, distance) * speed * dt; |
| } |
| if (distance < 72 && boss.attackTimer <= 0) { |
| boss.attackTimer = boss.hp < 6 ? 1.2 : 1.75; |
| const a = Math.atan2(dy, dx); |
| for (const offset of (boss.hp < 6 ? [-.32, 0, .32] : [-.17, .17])) { |
| const angle = a + offset; |
| state.projectiles.push({ x: boss.x, y: boss.y - 6, vx: Math.cos(angle) * 178, vy: Math.sin(angle) * 178, life: 3, size: 8 }); |
| } |
| burst(boss.x, boss.y, '#ff8149', 7); |
| } |
| if (distance < 53 && boss.attackTimer < .9) hurt(1, boss.x, boss.y); |
| } |
|
|
| function update(dt) { |
| if (state.ending) { |
| state.endingTime += dt; |
| if (state.endingStage === 'opening-credits') { |
| if (state.endingTime >= 2.4) { |
| state.endingStage = 'chase'; |
| state.endingTime = 0; |
| state.player.x = SHRINE_DOOR.x; |
| state.player.y = SHRINE_DOOR.top - 24; |
| intro.classList.add('hidden'); |
| updateObjective(); |
| } |
| return; |
| } |
| if (state.endingStage === 'done') return; |
| const time = state.endingTime; |
| const p = state.player; |
| const centerX = SHRINE_DOOR.x; |
| |
| const centerY = SHRINE_DOOR.top - 31; |
| const lap = time * .84; |
| const previousX = p.x, previousY = p.y; |
| p.x = centerX + Math.cos(lap) * 63; |
| p.y = centerY + Math.sin(lap * 2) * 10; |
| const dxWalk = p.x - previousX, dyWalk = p.y - previousY; |
| p.walk += dt * 18; |
| if (Math.abs(dxWalk) > Math.abs(dyWalk) * 1.7) p.facing = dxWalk > 0 ? 'right' : 'left'; |
| else if (Math.abs(dyWalk) > Math.abs(dxWalk) * 1.7) p.facing = dyWalk > 0 ? 'down' : 'up'; |
| else p.facing = dyWalk > 0 ? (dxWalk > 0 ? 'down-right' : 'down-left') : (dxWalk > 0 ? 'up-right' : 'up-left'); |
| const pace = Math.hypot(dxWalk, dyWalk); |
| if (pace > 1) state.chaseSparkTimer -= dt; |
| if (state.chaseSparkTimer <= 0 && pace > 1) { |
| state.chaseSparkTimer = .13; |
| state.particles.push({ x: previousX, y: previousY + 8, vx: (random() - .5) * 12, vy: -14, life: .3, maxLife: .3, color: '#f1d98a', size: 2 }); |
| } |
| for (const enemy of state.chase) { |
| enemy.phase += dt * 11; |
| const dx = p.x - enemy.x, dy = p.y - enemy.y; |
| const length = Math.max(1, Math.hypot(dx, dy)); |
| const speed = (31 + enemy.id * 4) * dt; |
| const curl = enemy.id % 2 ? -12 : 12; |
| enemy.x += dx / length * speed - dy / length * curl * dt; |
| enemy.y += dy / length * speed + dx / length * curl * dt + Math.sin(enemy.phase) * 9 * dt; |
| } |
| for (const particle of state.particles) { |
| particle.x += particle.vx * dt; |
| particle.y += particle.vy * dt; |
| particle.life -= dt; |
| } |
| state.particles = state.particles.filter((particle) => particle.life > 0); |
| if (time >= 7.2 && !state.creditsShown) { |
| showCredits(); |
| state.endingStage = 'done'; |
| } |
| return; |
| } |
| if (!state.started || state.won) return; |
| state.time += dt; |
| const p = state.player; |
| p.invuln = Math.max(0, p.invuln - dt); |
| swingTimer = Math.max(0, swingTimer - dt); |
| hurtFlash = Math.max(0, hurtFlash - dt); |
| toastTimer = Math.max(0, toastTimer - dt); |
|
|
| let dx = 0, dy = 0; |
| if (keys.has('ArrowLeft') || keys.has('KeyA')) dx--; |
| if (keys.has('ArrowRight') || keys.has('KeyD')) dx++; |
| if (keys.has('ArrowUp') || keys.has('KeyW')) dy--; |
| if (keys.has('ArrowDown') || keys.has('KeyS')) dy++; |
| if (dx || dy) { |
| const length = Math.hypot(dx, dy); |
| dx = dx / length * 156 * dt; |
| dy = dy / length * 156 * dt; |
| p.facing = dy < 0 ? (dx < 0 ? 'up-left' : dx > 0 ? 'up-right' : 'up') |
| : dy > 0 ? (dx < 0 ? 'down-left' : dx > 0 ? 'down-right' : 'down') |
| : dx < 0 ? 'left' : 'right'; |
| if (canStand(p.x + dx, p.y)) p.x += dx; |
| if (canStand(p.x, p.y + dy)) p.y += dy; |
| p.walk += dt * 11; |
| } |
|
|
| for (const enemy of state.enemies) moveEnemy(enemy, dt); |
| updateBoss(dt); |
|
|
| for (const projectile of state.projectiles) { |
| projectile.x += projectile.vx * dt; |
| projectile.y += projectile.vy * dt; |
| projectile.life -= dt; |
| if (Math.hypot(projectile.x - p.x, projectile.y - p.y) < 22) { |
| hurt(1, projectile.x, projectile.y); |
| projectile.life = -1; |
| } |
| } |
| state.projectiles = state.projectiles.filter((p) => p.life > 0); |
|
|
| for (const drop of state.drops) { |
| drop.life -= dt; |
| if (Math.hypot(drop.x - p.x, drop.y - p.y) < 35) { |
| drop.life = 0; |
| state.shards = Math.min(5, state.shards + 1); |
| const healed = p.hp < p.maxHp; |
| if (healed) p.hp = Math.min(p.maxHp, p.hp + 1); |
| say(state.shards < 5 ? `撿起星火碎片 ${state.shards} / 5${healed ? ' · 恢復一顆愛心' : ''}` : `五枚星火碎片已收齊！${healed ? ' · 恢復一顆愛心 ' : ''}前往北方神殿。`, 2.6); |
| updateObjective(); |
| } |
| } |
| state.drops = state.drops.filter((d) => d.life > 0); |
|
|
| for (const particle of state.particles) { |
| particle.x += particle.vx * dt; |
| particle.y += particle.vy * dt; |
| particle.vy += 130 * dt; |
| particle.life -= dt; |
| } |
| state.particles = state.particles.filter((p) => p.life > 0); |
|
|
| const centeredOnDoor = Math.abs(p.x - SHRINE_DOOR.x) < SHRINE_DOOR.width * .5; |
| const insideShrine = centeredOnDoor && p.y < SHRINE_DOOR.top - 28 && p.y > SHRINE_DOOR.top - 190; |
| |
| const atDoorThreshold = centeredOnDoor && p.y >= SHRINE_DOOR.top + 24 && p.y <= SHRINE_DOOR.top + 84; |
| if (state.bossDefeated && !state.ending && insideShrine) { |
| showEnd(); |
| tickEnding(.24); |
| } else if (atDoorThreshold && !state.bossDefeated && !state.boss) { |
| if (state.shards >= 5) summonBoss(); |
| else if (toastTimer <= 0) say(`只有神殿入口有封印，需要星火碎片 ${state.shards} / 5`, 2.5); |
| } |
| updateObjective(); |
| } |
|
|
| function drawGround(camX, camY) { |
| if (terrainReady) { |
| ctx.drawImage(terrain, camX, camY, view.w, view.h, 0, 0, view.w, view.h); |
| return; |
| } |
| ctx.fillStyle = '#477248'; |
| ctx.fillRect(0, 0, view.w, view.h); |
| const lake = { x: LAKE.x - camX, y: LAKE.y - camY }; |
| ctx.fillStyle = '#587b4d'; |
| ctx.beginPath(); ctx.ellipse(lake.x, lake.y, LAKE.rx + 13, LAKE.ry + 11, 0, 0, Math.PI * 2); ctx.fill(); |
| ctx.fillStyle = '#557e75'; |
| ctx.beginPath(); ctx.ellipse(lake.x, lake.y, LAKE.rx, LAKE.ry, 0, 0, Math.PI * 2); ctx.fill(); |
| } |
|
|
| function drawTree(x, y, variant, camX, camY) { |
| const px = x * TILE - camX; |
| const py = y * TILE - camY; |
| const sway = Math.sin(state.time * .65 + x * 2) * 1.7; |
| ctx.fillStyle = '#24342a'; ctx.fillRect(px + 13, py + 23, 23, 24); |
| ctx.fillStyle = '#604f36'; ctx.fillRect(px + 19, py + 23, 10, 23); |
| ctx.fillStyle = '#344a32'; |
| ctx.beginPath(); ctx.ellipse(px + 25, py + 24, 23, 13, 0, 0, Math.PI * 2); ctx.fill(); |
| const palettes = variant === 0 ? ['#315c3c', '#44784a', '#71a05c'] : ['#386447', '#50824e', '#84a967']; |
| ctx.fillStyle = '#253a2b'; ctx.beginPath(); ctx.moveTo(px + 25 + sway, py - 7); ctx.lineTo(px + 2, py + 29); ctx.lineTo(px + 47, py + 29); ctx.closePath(); ctx.fill(); |
| ctx.fillStyle = palettes[0]; ctx.beginPath(); ctx.moveTo(px + 25 + sway, py - 11); ctx.lineTo(px + 5, py + 20); ctx.lineTo(px + 44, py + 20); ctx.closePath(); ctx.fill(); |
| ctx.fillStyle = palettes[1]; ctx.beginPath(); ctx.moveTo(px + 23 + sway, py - 9); ctx.lineTo(px + 11, py + 16); ctx.lineTo(px + 35, py + 16); ctx.closePath(); ctx.fill(); |
| ctx.fillStyle = palettes[2]; ctx.fillRect(px + 20 + sway, py + 2, 4, 3); ctx.fillRect(px + 30 + sway, py + 10, 3, 3); |
| ctx.fillStyle = '#ffffff13'; ctx.fillRect(px + 5, py + 22, 2, 5); |
| } |
|
|
| function drawRock(x, y, camX, camY) { |
| const px = x * TILE - camX, py = y * TILE - camY; |
| ctx.fillStyle = '#304331'; ctx.fillRect(px + 6, py + 32, 38, 11); |
| ctx.fillStyle = '#7d866c'; ctx.fillRect(px + 9, py + 18, 29, 19); |
| ctx.fillStyle = '#9fa183'; ctx.fillRect(px + 15, py + 11, 19, 12); |
| ctx.fillStyle = '#b8b493'; ctx.fillRect(px + 20, py + 9, 11, 5); |
| ctx.fillStyle = '#5c6b56'; ctx.fillRect(px + 9, py + 31, 22, 4); |
| } |
|
|
| function drawTemple(camX, camY) { |
| const tx = state.temple; |
| const x = tx.x * TILE - camX, y = tx.y * TILE - camY; |
| ctx.fillStyle = '#30382f'; ctx.fillRect(x - 12, y + 133, tx.w * TILE + 24, 14); |
| ctx.fillStyle = '#665f4b'; ctx.fillRect(x + 4, y + 55, tx.w * TILE - 8, 82); |
| ctx.fillStyle = '#94876a'; ctx.fillRect(x, y + 43, tx.w * TILE, 17); |
| ctx.fillStyle = '#c1ad7d'; ctx.fillRect(x + 6, y + 38, tx.w * TILE - 12, 7); |
| for (let i = 0; i < 6; i++) { |
| ctx.fillStyle = i % 2 ? '#a39876' : '#83795f'; |
| ctx.fillRect(x + 8 + i * 63, y + 59, 49, 71); |
| ctx.fillStyle = '#c0b18a'; ctx.fillRect(x + 12 + i * 63, y + 60, 5, 67); |
| } |
| ctx.fillStyle = '#413d32'; ctx.fillRect(x + 5, y + 125, tx.w * TILE - 10, 12); |
| const doorX = SHRINE_DOOR.x - camX; |
| const doorTop = SHRINE_DOOR.top - camY; |
| const doorLeft = doorX - SHRINE_DOOR.width / 2; |
| ctx.fillStyle = '#413d32'; ctx.fillRect(doorLeft - 8, doorTop - 15, SHRINE_DOOR.width + 16, 59); |
| ctx.fillStyle = '#b8a57b'; ctx.fillRect(doorLeft - 6, doorTop - 11, 4, 54); |
| ctx.fillStyle = '#4b4937'; ctx.fillRect(doorLeft + SHRINE_DOOR.width + 2, doorTop - 11, 4, 54); |
| ctx.fillStyle = '#d0bb89'; ctx.fillRect(doorLeft - 9, doorTop - 15, SHRINE_DOOR.width + 18, 5); |
| if (!state.bossDefeated) { |
| |
| |
| ctx.fillStyle = '#191c19'; ctx.fillRect(doorLeft, doorTop, SHRINE_DOOR.width, 40); |
| ctx.fillStyle = state.shards >= 5 ? '#e3bd70' : '#89513b'; |
| ctx.fillRect(doorLeft + 20, doorTop + 9, 10, 25); |
| ctx.fillStyle = state.shards >= 5 ? '#ffe6a0' : '#d2a363'; |
| ctx.fillRect(doorLeft + 16, doorTop + 15, 18, 15); |
| ctx.fillStyle = '#382c24'; ctx.fillRect(doorLeft + 22, doorTop + 17, 6, 6); |
| if (state.shards >= 5) { |
| ctx.strokeStyle = '#ffe39b'; ctx.globalAlpha = .4 + Math.sin(state.time * 3) * .2; |
| ctx.lineWidth = 2; ctx.strokeRect(doorLeft - 3, doorTop - 3, SHRINE_DOOR.width + 6, 45); ctx.globalAlpha = 1; |
| } |
| } else { |
| const welcome = ctx.createRadialGradient(doorX, doorTop + 20, 2, doorX, doorTop + 20, 54); |
| welcome.addColorStop(0, '#ffe7a8e8'); welcome.addColorStop(.4, '#d4ab687a'); welcome.addColorStop(1, '#d4ab6800'); |
| ctx.fillStyle = welcome; ctx.fillRect(doorLeft - 28, doorTop - 28, SHRINE_DOOR.width + 56, 96); |
| ctx.fillStyle = '#101815'; ctx.fillRect(doorLeft, doorTop, SHRINE_DOOR.width, 40); |
| ctx.fillStyle = '#beab7d'; ctx.fillRect(doorLeft - 4, doorTop - 6, 5, 49); ctx.fillRect(doorLeft + SHRINE_DOOR.width - 1, doorTop - 6, 5, 49); |
| ctx.fillStyle = '#dfcb99'; ctx.fillRect(doorLeft - 5, doorTop - 7, SHRINE_DOOR.width + 10, 4); |
| } |
| ctx.fillStyle = '#ddd0a7'; ctx.fillRect(x - 13, y + 134, tx.w * TILE + 26, 5); |
| } |
|
|
| function drawBug(enemy, camX, camY) { |
| const x = Math.round(enemy.x - camX); |
| const y = Math.round(enemy.y - camY + Math.sin(enemy.phase) * 2); |
| ctx.fillStyle = '#1c2c20a8'; ctx.beginPath(); ctx.ellipse(x, y + 12, 17, 6, 0, 0, Math.PI * 2); ctx.fill(); |
| if (sprites.bug.complete && sprites.bug.naturalWidth) { |
| const frame = Math.floor(state.time * 8 + enemy.id) % 6; |
| ctx.drawImage(sprites.bug, frame * 32, 0, 32, 32, x - 20, y - 19, 40, 38); |
| } else { |
| ctx.fillStyle = '#bdd777'; ctx.beginPath(); ctx.ellipse(x, y, 15, 12, 0, 0, 7); ctx.fill(); |
| } |
| if (enemy.flash > 0) { ctx.fillStyle = '#fff9d6aa'; ctx.fillRect(x - 14, y - 13, 28, 24); } |
| } |
|
|
| function drawBoss(boss, camX, camY) { |
| const x = Math.round(boss.x - camX), y = Math.round(boss.y - camY); |
| const bob = Math.sin(boss.phase * 3) * 4; |
| ctx.fillStyle = '#13190fb3'; ctx.beginPath(); ctx.ellipse(x, y + 26, 44, 16, 0, 0, 7); ctx.fill(); |
| ctx.save(); ctx.translate(x, y + bob); |
| ctx.fillStyle = boss.flash ? '#fff5c8' : '#521d1d'; ctx.beginPath(); ctx.ellipse(0, 3, 36, 33, 0, 0, 7); ctx.fill(); |
| ctx.fillStyle = '#873329'; ctx.beginPath(); ctx.ellipse(-3, -3, 29, 26, 0, 0, 7); ctx.fill(); |
| ctx.fillStyle = '#d44d32'; ctx.beginPath(); ctx.moveTo(-24,-14);ctx.lineTo(-33,-42);ctx.lineTo(-8,-26);ctx.lineTo(4,-47);ctx.lineTo(13,-25);ctx.lineTo(34,-37);ctx.lineTo(23,-8);ctx.closePath();ctx.fill(); |
| ctx.fillStyle = '#f3c66e'; ctx.beginPath(); ctx.ellipse(-12, -5, 5, 7, 0, 0, 7); ctx.ellipse(12,-5,5,7,0,0,7);ctx.fill(); |
| ctx.fillStyle = '#55211d'; ctx.fillRect(-12, 11, 24, 6); ctx.fillStyle = '#f3c66e'; ctx.fillRect(-8, 12, 4, 5); ctx.fillRect(4,12,4,5); |
| ctx.fillStyle = '#e88943'; ctx.fillRect(-39, 5, 7, 20); ctx.fillRect(32, 5, 7, 20); |
| ctx.restore(); |
| ctx.fillStyle = '#30251e'; ctx.fillRect(x - 36, y - 58, 72, 9); |
| ctx.fillStyle = '#ce5541'; ctx.fillRect(x - 34, y - 56, 68 * boss.hp / boss.maxHp, 5); |
| } |
|
|
| function drawHero(camX, camY) { |
| const p = state.player; |
| const x = Math.round(p.x - camX); |
| const y = Math.round(p.y - camY + (keys.size ? Math.sin(p.walk) * 1.5 : 0)); |
| if (p.invuln > 0 && Math.floor(state.time * 12) % 2 === 0) return; |
| ctx.fillStyle = '#1a251a99'; ctx.beginPath(); ctx.ellipse(x, y + 10, 14, 5, 0, 0, 7); ctx.fill(); |
| if (sprites.hero.complete && sprites.hero.naturalWidth) { |
| |
| |
| |
| const row = { down: 0, 'down-right': 1, right: 2, 'up-right': 3, up: 4, 'up-left': 5, left: 6, 'down-left': 7 }[p.facing]; |
| const col = keys.size ? Math.floor(p.walk) % 13 : 0; |
| ctx.drawImage(sprites.hero, col * 22, row * 22, 22, 22, x - 22, y - 32, 44, 44); |
| } else { |
| ctx.fillStyle = '#e9ca77'; ctx.fillRect(x - 7, y - 20, 14, 22); ctx.fillStyle = '#558656'; ctx.fillRect(x - 8, y - 10, 16, 10); |
| } |
| if (swingTimer > 0) { |
| const offset = { |
| up:[0,-34], 'up-right':[25,-25], right:[35,0], 'down-right':[25,25], |
| down:[0,34], 'down-left':[-25,25], left:[-35,0], 'up-left':[-25,-25], |
| }[p.facing]; |
| ctx.save(); ctx.translate(x + offset[0], y + offset[1]); ctx.rotate(Math.sin((swingTimer / .32) * Math.PI) * .35); |
| ctx.fillStyle = '#fff2bc'; ctx.fillRect(-2, -22, 4, 31); ctx.fillStyle = '#d1ac64'; ctx.fillRect(-2, 4, 4, 9); ctx.fillRect(-7, 3, 14, 3); ctx.restore(); |
| } |
| } |
|
|
| function drawChaseBug(enemy, camX, camY) { |
| const x = Math.round(enemy.x - camX); |
| const y = Math.round(enemy.y - camY + Math.sin(enemy.phase) * 2.5); |
| ctx.fillStyle = '#15201685'; |
| ctx.beginPath(); ctx.ellipse(x, y + 12, 15, 5, 0, 0, Math.PI * 2); ctx.fill(); |
| if (sprites.bug.complete && sprites.bug.naturalWidth) { |
| const frame = Math.floor(state.endingTime * 11 + enemy.id) % 6; |
| ctx.drawImage(sprites.bug, frame * 32, 0, 32, 32, x - 19, y - 19, 38, 38); |
| } else { |
| ctx.fillStyle = '#b8c978'; |
| ctx.beginPath(); ctx.ellipse(x, y, 14, 10, 0, 0, Math.PI * 2); ctx.fill(); |
| } |
| ctx.fillStyle = '#f4d37c'; ctx.globalAlpha = Math.min(1, Math.max(0, enemy.phase % 1)); |
| ctx.fillRect(x - 2, y - 2, 3, 3); ctx.globalAlpha = 1; |
| } |
|
|
| function draw(camX, camY) { |
| drawGround(camX, camY); |
| if (state.ending) { |
| const titleX = view.w / 2, titleY = view.h * .32; |
| const float = Math.sin(state.endingTime * 2.4) * 4; |
| ctx.fillStyle = '#18251ce8'; ctx.beginPath(); ctx.roundRect(titleX - 205, titleY - 34, 410, 69, 14); ctx.fill(); |
| ctx.strokeStyle = '#e9d59362'; ctx.lineWidth = 1; ctx.stroke(); |
| ctx.textAlign = 'center'; ctx.fillStyle = '#e6cf93'; ctx.font = '11px "DM Mono", monospace'; |
| ctx.fillText('THE LAST CHASE', titleX, titleY - 8 + float); |
| ctx.fillStyle = '#f5e6ba'; ctx.font = '15px "Noto Sans TC", sans-serif'; |
| ctx.fillText(state.creditsShown ? '神殿製作名單' : '勇者與魔物的森林大追逐！', titleX, titleY + 18 + float); |
| ctx.textAlign = 'start'; |
| if (!state.creditsShown) { |
| for (const bug of state.chase) drawChaseBug(bug, camX, camY); |
| drawHero(camX, camY); |
| } |
| for (const particle of state.creditsShown ? [] : state.particles) { |
| ctx.globalAlpha = Math.max(0, particle.life / particle.maxLife); |
| ctx.fillStyle = particle.color; |
| ctx.fillRect(Math.round(particle.x - camX), Math.round(particle.y - camY), particle.size, particle.size); |
| } |
| ctx.globalAlpha = 1; |
| if (state.creditsShown) { |
| const fade = Math.min(1, (state.endingTime - 8) * .8); |
| ctx.globalAlpha = fade; |
| const panelX = view.w / 2 - 185, panelY = titleY + 54; |
| ctx.fillStyle = '#17241df2'; ctx.beginPath(); ctx.roundRect(panelX, panelY, 370, 134, 12); ctx.fill(); |
| ctx.strokeStyle = '#e9ddb34d'; ctx.stroke(); |
| ctx.textAlign = 'center'; ctx.fillStyle = '#aeb99e'; ctx.font = '11px "DM Mono", monospace'; |
| ctx.fillText('PRODUCTION CREDITS', view.w / 2, panelY + 25); |
| ctx.fillStyle = '#d3d5c1'; ctx.font = '12px "Noto Sans TC", sans-serif'; ctx.fillText('作者', view.w / 2, panelY + 53); |
| ctx.fillStyle = '#f4dfa0'; ctx.font = 'bold 20px "DM Mono", monospace'; ctx.fillText('HelloSun', view.w / 2, panelY + 78); |
| ctx.fillStyle = '#d3d5c1'; ctx.font = '12px "Noto Sans TC", sans-serif'; ctx.fillText('協作', view.w / 2, panelY + 105); |
| ctx.fillStyle = '#f4dfa0'; ctx.font = 'bold 18px "DM Mono", monospace'; ctx.fillText('GPT-6_Luna', view.w / 2, panelY + 128); |
| ctx.textAlign = 'start'; ctx.globalAlpha = 1; |
| const restartX = view.w / 2 - 64, restartY = panelY + 151; |
| ctx.fillStyle = '#17241df2'; ctx.beginPath(); ctx.roundRect(restartX, restartY, 128, 34, 7); ctx.fill(); |
| ctx.strokeStyle = '#e9ddb34d'; ctx.stroke(); ctx.fillStyle = '#e6cf93'; ctx.font = '12px "Noto Sans TC", sans-serif'; |
| ctx.textAlign = 'center'; ctx.fillText('重新開始 ↺', view.w / 2, restartY + 22); ctx.textAlign = 'start'; |
| state.restartBounds = { x: restartX, y: restartY, w: 128, h: 34 }; |
| } else if (state.endingTime > 6.1) { |
| const fade = Math.min(1, (state.endingTime - 6.1) * .48); |
| ctx.globalAlpha = fade; |
| ctx.fillStyle = '#17241dd9'; ctx.beginPath(); ctx.roundRect(view.w / 2 - 112, view.h - 77, 224, 35, 8); ctx.fill(); |
| ctx.fillStyle = '#f2e5bd'; ctx.font = '13px "Noto Sans TC", sans-serif'; |
| ctx.textAlign = 'center'; ctx.fillText('進入神殿查看製作名單', view.w / 2, view.h - 55); ctx.textAlign = 'start'; |
| ctx.globalAlpha = 1; |
| } |
| drawHud(camX, camY); |
| return; |
| } |
| const objects = []; |
| for (const prop of state.props) objects.push({ y: (prop.y + .8) * TILE, draw: () => prop.type === 'tree' ? drawTree(prop.x, prop.y, prop.variant, camX, camY) : drawRock(prop.x, prop.y, camX, camY) }); |
| const tx = state.temple; |
| objects.push({ y: (tx.y + tx.h) * TILE, draw: () => drawTemple(camX, camY) }); |
| for (const enemy of state.enemies) if (enemy.alive) objects.push({ y: enemy.y + 12, draw: () => drawBug(enemy, camX, camY) }); |
| if (state.boss) objects.push({ y: state.boss.y + 25, draw: () => drawBoss(state.boss, camX, camY) }); |
| for (const drop of state.drops) objects.push({ y: drop.y + 5, draw: () => { |
| const pulse = 1 + Math.sin(state.time * 6 + drop.x) * .16; |
| ctx.fillStyle = '#f3d26b24'; ctx.beginPath(); ctx.arc(drop.x - camX, drop.y - camY, 19 * pulse, 0, 7); ctx.fill(); |
| ctx.fillStyle = '#f9db75'; ctx.beginPath(); ctx.moveTo(drop.x-camX,drop.y-camY-10);ctx.lineTo(drop.x-camX+7,drop.y-camY);ctx.lineTo(drop.x-camX,drop.y-camY+9);ctx.lineTo(drop.x-camX-7,drop.y-camY);ctx.closePath();ctx.fill(); |
| } }); |
| objects.push({ y: state.player.y + 10, draw: () => drawHero(camX, camY) }); |
| objects.sort((a,b) => a.y - b.y); |
| for (const object of objects) object.draw(); |
|
|
| for (const projectile of state.projectiles) { |
| ctx.fillStyle = '#f1482d56'; ctx.beginPath(); ctx.arc(projectile.x - camX, projectile.y - camY, 15, 0, 7); ctx.fill(); |
| ctx.fillStyle = '#ffc35b'; ctx.beginPath(); ctx.arc(projectile.x - camX, projectile.y - camY, projectile.size, 0, 7); ctx.fill(); |
| } |
| for (const particle of state.particles) { |
| ctx.globalAlpha = Math.max(0, particle.life / particle.maxLife); |
| ctx.fillStyle = particle.color; ctx.fillRect(Math.round(particle.x - camX), Math.round(particle.y - camY), particle.size, particle.size); |
| } |
| ctx.globalAlpha = 1; |
| drawHud(camX, camY); |
| } |
|
|
| function drawHud(camX, camY) { |
| const p = state.player; |
| ctx.fillStyle = '#17241fde'; |
| ctx.beginPath(); ctx.roundRect(17, 15, 214, 58, 8); ctx.fill(); |
| ctx.strokeStyle = '#e9ddb33a'; ctx.lineWidth = 1; ctx.stroke(); |
| for (let i = 0; i < p.maxHp; i++) { |
| const x = 30 + i * 25, y = 28; |
| ctx.fillStyle = i < p.hp ? '#e88570' : '#758072'; |
| ctx.font = '20px serif'; ctx.fillText(i < p.hp ? '♥' : '♡', x, y + 1); |
| } |
| ctx.fillStyle = '#eed47f'; ctx.font = 'bold 12px "DM Mono", monospace'; ctx.fillText('✦', 31, 57); |
| ctx.fillStyle = '#eee4c8'; ctx.font = '12px "DM Mono", monospace'; ctx.fillText(`${state.shards} / 5`, 50, 57); |
|
|
| |
| ctx.fillStyle = '#17241dd9'; ctx.beginPath(); ctx.roundRect(view.w - 60, 16, 43, 43, 22); ctx.fill(); |
| ctx.strokeStyle = '#dfd29a65'; ctx.stroke(); |
| ctx.fillStyle = '#d8ddcb'; ctx.font = '10px "DM Mono", monospace'; ctx.fillText('N', view.w - 44, 29); |
| const mx = view.w - 39 + ((25 * TILE - p.x) / WORLD_W) * 11; |
| const my = 39 + ((7 * TILE - p.y) / WORLD_H) * 11; |
| ctx.fillStyle = '#efd37c'; ctx.beginPath(); ctx.arc(mx, my, 3, 0, 7); ctx.fill(); |
|
|
| if (toastTimer > 0 && toast) { |
| ctx.font = '13px "Noto Sans TC", sans-serif'; |
| const width = Math.min(view.w - 60, ctx.measureText(toast).width + 38); |
| const x = (view.w - width) / 2; |
| ctx.fillStyle = '#142019e8'; ctx.beginPath(); ctx.roundRect(x, view.h - 54, width, 34, 7); ctx.fill(); |
| ctx.strokeStyle = '#e1ce8a38'; ctx.stroke(); |
| ctx.fillStyle = '#eee5ce'; ctx.textAlign = 'center'; ctx.fillText(toast, view.w / 2, view.h - 32, width - 24); ctx.textAlign = 'start'; |
| } |
| if (hurtFlash > 0) { ctx.fillStyle = `rgba(205,67,58,${hurtFlash * .25})`; ctx.fillRect(0, 0, view.w, view.h); } |
| |
| void camX; void camY; |
| } |
|
|
| function loop(now) { |
| const dt = Math.min(.035, (now - lastTime) / 1000 || 0); |
| lastTime = now; |
| update(dt); |
| const targetX = state.player.x - view.w / 2; |
| const targetY = state.player.y - view.h / 2; |
| const camX = Math.max(0, Math.min(WORLD_W - view.w, targetX)); |
| const camY = Math.max(0, Math.min(WORLD_H - view.h, targetY)); |
| draw(camX, camY); |
| requestAnimationFrame(loop); |
| } |
|
|
| window.addEventListener('keydown', (event) => { |
| if (state.creditsShown && ['Enter', 'Space', 'KeyZ'].includes(event.code)) { |
| event.preventDefault(); |
| reset(); |
| showIntro(); |
| intro.classList.remove('hidden'); |
| return; |
| } |
| if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(event.code)) event.preventDefault(); |
| keys.add(event.code); |
| if (event.code === 'KeyZ' || event.code === 'Space' || event.code === 'Enter') sword(); |
| if (!state.started && ['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','KeyW','KeyA','KeyS','KeyD','Enter','Space'].includes(event.code)) start(); |
| }); |
| window.addEventListener('keyup', (event) => keys.delete(event.code)); |
| window.addEventListener('blur', () => keys.clear()); |
| canvas.addEventListener('pointerdown', (event) => { |
| if (!state.creditsShown || !state.restartBounds) return; |
| const rect = canvas.getBoundingClientRect(); |
| const x = (event.clientX - rect.left) * canvas.width / rect.width; |
| const y = (event.clientY - rect.top) * canvas.height / rect.height; |
| const button = state.restartBounds; |
| if (x >= button.x && x <= button.x + button.w && y >= button.y && y <= button.y + button.h) { |
| reset(); |
| showIntro(); |
| intro.classList.remove('hidden'); |
| } |
| }); |
| document.querySelector('#start').addEventListener('click', start); |
| document.querySelector('#restart').addEventListener('click', () => { |
| reset(); |
| showIntro(); |
| intro.classList.remove('hidden'); |
| }); |
| document.querySelectorAll('[data-key]').forEach((button) => { |
| const key = button.dataset.key; |
| const up = (event) => { event.preventDefault(); keys.delete(key); button.classList.remove('pressed'); }; |
| button.addEventListener('pointerdown', (event) => { |
| event.preventDefault(); |
| button.setPointerCapture(event.pointerId); |
| button.classList.add('pressed'); |
| if (key === 'KeyZ') sword(); else { keys.add(key); if (!state.started) start(); } |
| }); |
| button.addEventListener('pointerup', up); |
| button.addEventListener('pointercancel', up); |
| button.addEventListener('lostpointercapture', up); |
| }); |
|
|
| makeTerrain(); |
| reset(); |
| requestAnimationFrame(loop); |
| })(); |
|
|
