[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"seo":3,"site":24,"contact":28,"portfolio:arcadepin":36},{"titleTemplate":4,"description":5,"keywords":6,"organizationName":7,"personName":7,"personJobTitle":8,"bingVerification":9,"customMeta":10,"googleVerification":15,"headInjections":16},"%s | 全端系統開發 | 網頁設計 | 伺服器託管","全端系統開發、網頁設計、伺服器託管一站式服務 — 韓滷 ozakboy","全端開發,網頁設計,伺服器託管,韓滷,ozakboy,C#,Vue,Nuxt,微服務","韓滷","全端系統工程師","4928B4223346F74DB53D9754C37164AB",[11],{"kind":12,"key":13,"content":14},"name","google-adsense-account","ca-pub-5488118663607574","npSud3_qj3nhajB0DeUEYYZbdflOR4vLDaLWnXD2liU",[17,21],{"label":18,"content":19,"enabled":20},"GA Google tag","\u003C!-- Google tag (gtag.js) -->\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-L0QNGPN253\">\u003C\u002Fscript>\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-L0QNGPN253');\n\u003C\u002Fscript>",true,{"label":22,"content":23,"enabled":20},"Google Syndication","\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-5488118663607574\"\n     crossorigin=\"anonymous\">\u003C\u002Fscript>",{"siteTitle":7,"subtitle":25,"copyright":26,"favicon":27},"全端系統開發 \u002F 網頁設計 \u002F 伺服器託管","© 2026 韓滷 ozakboy. All rights reserved.","\u002Fdata\u002Fimages\u002Fsite\u002F33752408-36e1e0da1af5.ico",{"name":7,"title":8,"tagline":25,"email":29,"telegram":30,"line":31,"github":32,"intro":33,"website":34,"threads":35},"ozakboy@ozakboy.life","https:\u002F\u002Ftelegram.me\u002Fminksaki64","https:\u002F\u002Fline.me\u002Fti\u002Fp\u002FllWJZ4iuiJ","https:\u002F\u002Fgithub.com\u002Fozakboy","## 關於我\n\n我是韓滷,全端系統工程師。\n\n具備紮實的軟體開發基礎,擅長專案開發規劃、流程設計、各種 Bot 開發、網頁前後端開發、高頻交易系統、微服務架構等。主要開發語言為 C# .NET,擁有豐富的系統架構設計與實作經驗。\n\n## 聯絡方式\n\n歡迎透過 Email 或 Telegram 聯繫,討論您的專案需求。","https:\u002F\u002Fwww.ozakboy.life","https:\u002F\u002Fwww.threads.com\u002F@ozakboy",{"title":37,"description":38,"category":39,"status":40,"date":41,"gallery":42,"duration":55,"teamSize":56,"github":57,"demo":58,"technologies":59,"features":68,"seoTitle":75,"seoDescription":76,"ogImage":77,"slug":78,"body":79},"ArcadePin — 霓虹街機彈珠台","純前端、免後端資料庫的霓虹街機風彈珠台。自製 HTML5 Canvas 物理引擎，結合 IndexedDB 個人紀錄與 GitHub 託管的全球排行榜，部署於 GitHub Pages。","網頁遊戲","production","2026-05-26",[43,46,49,52],{"path":44,"alt":45},"\u002Fdata\u002Fimages\u002Fportfolio\u002Ficon-512-906f94be3ea9.png","遊戲圖標",{"path":47,"alt":48},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-a64d4cdee310.png","開始畫面",{"path":50,"alt":51},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-bd202f43f5ec.png","遊戲畫面",{"path":53,"alt":54},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-09e292c0d287.png","遊戲排行榜","約 1 週","個人","https:\u002F\u002Fgithub.com\u002Fozakboy\u002FArcadePin","https:\u002F\u002Farcadepin.ozakboy.life\u002F",[60,61,62,63,64,65,66,67],"HTML5 Canvas","JavaScript (ES6 Modules)","IndexedDB","Web Audio API","GitHub Actions","GitHub Pages","Cloudflare Workers","PWA",[69,70,71,72,73,74],"自製 2D 剛體物理引擎：固定步長迴圈、彈片角速度動量傳遞、防穿牆連續碰撞","600×1000 大檯面：12 個霓虹彈撞器、雙黑洞（吸入後強力彈射）、單向發射閘門","霓虹視覺（Canvas 發光）＋ Web Audio 即時合成音效，連擊 Combo 倍率計分","雙軌排行榜：本機 IndexedDB 永久個人紀錄 ＋ GitHub 託管全球前 100 名","免後端雲端上傳：Cloudflare Worker 代理 → GitHub Actions 驗證並寫回 JSON（超過 5MB 自動分檔）","防作弊簽章、PWA 可安裝、支援鍵盤與觸控、響應式縮放","ArcadePin — 純前端霓虹街機彈珠台 | HTML5 Canvas","用 HTML5 Canvas 自製物理引擎打造的霓虹街機彈珠台，免後端、部署於 GitHub Pages，結合 IndexedDB 個人紀錄與 GitHub 全球排行榜、Cloudflare Worker 上傳。","https:\u002F\u002Fraw.githubusercontent.com\u002Fozakboy\u002FArcadePin\u002Frefs\u002Fheads\u002Fmain\u002Ficons\u002Ficon-512.png","arcadepin","## 專案簡介\nArcadePin 是一款復古街機風格的網頁彈珠台，主打「純前端、免伺服器後端、零營運成本」。\n物理、視覺、音效、儲存與排行榜全在瀏覽器端完成，並部署於 GitHub Pages，永久免費運作。\n\n## 我做了什麼\n- **自製物理引擎**：以固定時間步長（1\u002F300s）的遊戲迴圈處理重力、剛體反彈與連續碰撞，\n  避免高速穿牆；彈片以旋轉角速度把動量傳遞給球，手感接近真實彈珠台。\n- **關卡與機關**：600×1000 檯面配置 12 個霓虹彈撞器、彈弓，以及 2 個「黑洞」——\n  球被吸入後短暫停留再朝隨機上方強力彈射；發射軌入口加上「單向閘門」防止球彈回出生點。\n- **視覺與音效**：以 Canvas shadowBlur 打造霓虹發光，搭配 Web Audio API 即時合成\n  打擊／發射／落球音效，全程不使用任何外部素材。\n- **雙軌排行榜架構**：\n  - 本機：IndexedDB 永久保存該裝置的完整遊玩歷史，不限筆數、離線可用。\n  - 全球：GitHub 託管的 `top_100_leaderboard.json`（秒載渲染）與 append-only 歷史檔\n    （超過 5MB 由 GitHub Actions 自動分檔歸檔）。\n- **免後端的雲端寫入**：純前端無法安全保存 Token，因此以 Cloudflare Worker 作為\n  Serverless 代理保管金鑰：前端送分數給代理 → 觸發 `repository_dispatch` →\n  GitHub Actions 驗證簽章後寫回 JSON 並自動 commit，Pages 隨即更新。\n- **工程細節**：FNV-1a 分數簽章防止簡易竄改、PWA manifest 可加到主畫面、\n  支援鍵盤與觸控、響應式縮放維持檯面比例。\n\n## 技術挑戰\n- **物理穩定性**：固定步長＋速度上限確保高速球不穿牆；以 Node 無頭模擬跑數十局，\n  驗證「不會 NaN、不逸出檯面、必定落袋、黑洞不會無限迴圈」。\n- **無伺服器的全球排行**：在不架後端資料庫的前提下，用「GitHub 當資料庫 ＋\n  Actions 當寫入器 ＋ Worker 當金鑰保管」湊出一條安全可行的寫入鏈路。\n\n## 技術棧\nHTML5 Canvas、原生 JavaScript（ES6 Modules，無框架）、IndexedDB、Web Audio API、\nGitHub Actions、GitHub Pages、Cloudflare Workers、PWA。\n"]