iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
JavaScript

一條線救一隻狗:我用 PixiJS、Matter.js 和一條有閘門的 AI 產線做完一款網頁小遊戲 系列

一款畫線物理小遊戲:畫一條線擋住蜜蜂,讓狗狗撐過十秒。這 30 天兩條線同時跑。技術那條寫實作:PixiJS 只負責畫、Matter.js 只負責算,中間那層怎麼對齊;玩家滑一下,從 pointer 事件、座標轉換、幾何抽稀到變成剛體,中間發生八件事,每件都可能出錯。AI 那條寫閘門:合約寫在哪、驗證器擋什麼、母版制怎麼讓三十幾張 SVG 像同一個人畫的、哪幾個點我刻意不自動化。主張只有一句:AI 產出的品質,取決於你設得出幾道它過不去的自動檢查。我是前端工程師不是遊戲開發者,第一次寫遊戲迴圈、第一次用物理引擎,踩到的坑照實寫。遊戲已公開可玩。

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21|關卡是資料——但資料化的好處不會自己發生

模組五|關卡、UI 與資料(Day 21–25) 前面二十天講的是一條線怎麼從手指變成剛體、蜜蜂怎麼追人、同一幀裡贏跟輸並存時算誰的。從今天開始換一層問題:...

2026-08-26 ‧ 由 harryfan 分享
DAY 22

Day 22|五關的教學曲線:難度不是把蜜蜂調快

模組五|關卡、UI 與資料(Day 21–25) 《Save the Dog》是一款畫線解謎小遊戲:蜜蜂會從洞穴的開口衝進來,玩家只能畫一筆線把牠們擋在外面...

2026-08-27 ‧ 由 harryfan 分享
DAY 23

Day 23|場景切換:沒清的 listener 就是記憶體洩漏

模組五|關卡、UI 與資料(Day 21–25) 《Save the Dog》是一款畫線解謎小遊戲:蜜蜂會從洞穴的開口衝進來,玩家只能畫一筆線把牠們擋在外面...

2026-08-28 ‧ 由 harryfan 分享
DAY 24

Day 24|素材載入:SVG 變成 Texture 之後,就不是向量了

模組五|關卡、UI 與資料(Day 21–25) 昨天講場景切換要清乾淨自己配置的東西。今天往前推一步:這些東西是怎麼進到記憶體裡的。 先攤開數字。這個專案...

2026-08-29 ‧ 由 harryfan 分享
DAY 25

Day 25|版本號我第一天就加了,它只買到偵測,沒買到遷移

模組五|關卡、UI 與資料(Day 21–25) 昨天的素材是我準備好放進 repo 的。今天這份資料不是——它是玩家自己產生的,存在他的瀏覽器裡,我改不到...

2026-08-30 ‧ 由 harryfan 分享
DAY 26

Day 26|測什麼、不測什麼:我規劃了三層測試,中間那層一個檔案都沒有

模組六|測試、效能與上線(Day 26–30) 昨天講完存檔:九條通往「當作全新存檔」的路徑,每一條都有測試。今天把鏡頭拉遠,看整個專案的測試長什麼樣。 先...

2026-08-31 ‧ 由 harryfan 分享
DAY 27

Day 27|效能預算:我訂了十二列,一列都沒量過

模組六|測試、效能與上線(Day 26–30) 昨天講完測試的分工,也講了 CI 只跑四個命令。今天講一張比測試更早存在的東西:效能預算表。 這個專案在寫任...

2026-09-01 ‧ 由 harryfan 分享
DAY 28

Day 28|同一份 build、兩個部署目標、三種 404

模組六|測試、效能與上線(Day 26–30) 昨天講完效能預算訂了沒量。今天講部署,而且要先撤回一個標題。 這一天原本要叫「GitHub Pages 的...

2026-09-02 ‧ 由 harryfan 分享
DAY 29

Day 29|合約寫了 27 條規則,只有 21 條有程式在執行

模組六|測試、效能與上線(Day 26–30) 昨天那三個 404 裡,第二個藏在 index.html 第 5 行——一條寫死的 favicon 路徑。同...

2026-09-03 ‧ 由 harryfan 分享
DAY 30

Day 30|三十天後:一款能玩的小遊戲,和幾件我會重做的事

模組六|測試、效能與上線(Day 26–30) 昨天列了一張「有檢查/沒檢查」的四格表。今天把整個專案的數字重跑一次收在一張表上,然後花更長的篇幅講另一張表...

2026-09-04 ‧ 由 harryfan 分享