ArcadePin — 霓虹街機彈珠台

專案簡介

ArcadePin 是一款復古街機風格的網頁彈珠台，主打「純前端、免伺服器後端、零營運成本」。
物理、視覺、音效、儲存與排行榜全在瀏覽器端完成，並部署於 GitHub Pages，永久免費運作。

我做了什麼

• 自製物理引擎：以固定時間步長（1/300s）的遊戲迴圈處理重力、剛體反彈與連續碰撞，
  避免高速穿牆；彈片以旋轉角速度把動量傳遞給球，手感接近真實彈珠台。
• 關卡與機關：600×1000 檯面配置 12 個霓虹彈撞器、彈弓，以及 2 個「黑洞」——
  球被吸入後短暫停留再朝隨機上方強力彈射；發射軌入口加上「單向閘門」防止球彈回出生點。
• 視覺與音效：以 Canvas shadowBlur 打造霓虹發光，搭配 Web Audio API 即時合成
  打擊／發射／落球音效，全程不使用任何外部素材。
• 雙軌排行榜架構：
  • 本機：IndexedDB 永久保存該裝置的完整遊玩歷史，不限筆數、離線可用。
  • 全球：GitHub 託管的 top_100_leaderboard.json（秒載渲染）與 append-only 歷史檔
    （超過 5MB 由 GitHub Actions 自動分檔歸檔）。
• 免後端的雲端寫入：純前端無法安全保存 Token，因此以 Cloudflare Worker 作為
  Serverless 代理保管金鑰：前端送分數給代理 → 觸發 repository_dispatch →
  GitHub Actions 驗證簽章後寫回 JSON 並自動 commit，Pages 隨即更新。
• 工程細節：FNV-1a 分數簽章防止簡易竄改、PWA manifest 可加到主畫面、
  支援鍵盤與觸控、響應式縮放維持檯面比例。

技術挑戰

• 物理穩定性：固定步長＋速度上限確保高速球不穿牆；以 Node 無頭模擬跑數十局，
  驗證「不會 NaN、不逸出檯面、必定落袋、黑洞不會無限迴圈」。
• 無伺服器的全球排行：在不架後端資料庫的前提下，用「GitHub 當資料庫 ＋
  Actions 當寫入器 ＋ Worker 當金鑰保管」湊出一條安全可行的寫入鏈路。

技術棧

HTML5 Canvas、原生 JavaScript（ES6 Modules，無框架）、IndexedDB、Web Audio API、
GitHub Actions、GitHub Pages、Cloudflare Workers、PWA。