iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
JavaScript

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

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

參賽天數 4 天 | 共 4 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1|一條線、一隻狗、十秒鐘:我要用 30 天講什麼

模組一|立案與選型(Day 1–4) 先給結果,再講過程。 遊戲在這裡,開了就能玩,不用註冊:https://save-the-dog-web.vercel...

2026-08-06 ‧ 由 harryfan 分享
DAY 2

Day 2|開工前先寫兩千行規格:不是儀式,是給 AI 一份可以違反的合約

模組一|立案與選型(Day 1–4) 昨天講完這 30 天要交付什麼。今天回到開工前的那份文件。 先攤開事實:這個專案動工之前,有一份 2,419 行的 P...

2026-08-07 ‧ 由 harryfan 分享
DAY 3

Day 3|PixiJS 是渲染器,不是遊戲引擎:它不做的每一件事都會變成你的檔案

模組一|立案與選型(Day 1–4) 這個系列在做一款瀏覽器小遊戲:玩家畫一條線,擋住從蜂巢飛出來的蜜蜂,讓狗狗撐過十秒。 打開網頁就能玩,一局十秒可以玩完...

2026-08-08 ‧ 由 harryfan 分享
DAY 4

Day 4|五關、一條線、一張不做清單:範圍是刪出來的,不是排出來的

模組一|立案與選型(Day 1–4) Day 2 講規格能自動擋下什麼,Day 3 講選型換來多少工作量。今天是開工前的第三件事:範圍。 三個數字先攤開,全...

2026-08-09 ‧ 由 harryfan 分享