2026.04.03 / 北海道・函館機場

爸爸和女兒
在等飛機時,
一起做出來的
節奏遊戲!

虎航班機延誤,爸爸兌現承諾。Celia 畫角色、爸爸寫程式,不到三小時完成一款有投幣、選歌、打節拍的完整街機遊戲。

請先關閉手機靜音,才能聽到音樂

虎斑喵 橘喵
虎斑喵 & 橘喵
遊戲進度 65%
繼續遊玩
5
首歌曲
2
手繪角色
3hr
完成時間
48
動畫幀數

創作故事

在函館機場等飛機的午後。原本要搭的虎航班機,因為來的飛機上有旅客身體不適、折返台灣,航班整個延誤了。Celia 最近迷上了吉伊卡哇(ちいかわ),走到哪唱到哪。她也很愛玩湯姆熊那種節奏遊戲機台,爸爸之前就答應過她,找一天做一款節奏遊戲給她。班機延誤,剛好是最好的時機。 「爸爸,我們來做一個節奏遊戲好不好?」 於是,一張紙、一支筆、一台筆電,父女倆的即興創作就這樣開始了。Celia 負責畫角色 — 原本是一隻貓和一隻狗,但用 AI(Nano Banana)生成狗的動作序列時,細節怎麼都修不好,索性把狗也改成貓:虎斑喵和橘喵。後來想想,搭的是虎航,角色叫虎斑喵,還蠻巧的。爸爸負責用 Claude Code 寫出整個遊戲。不到一個下午,一款完整節奏遊戲就誕生了。
Celia 玩街機節奏遊戲
靈感來源 — Celia 平常最愛玩的節奏遊戲機台
Celia 在機場試玩喵狗節奏大師
成果 — Celia 在函館機場試玩喵狗節奏大師

Celia 的手繪原稿

Celia 用鉛筆在紙上畫了一隻貓和一隻狗。後來狗的 AI 序列修不好,才把狗改成橘喵,貓改成虎斑喵 — 但原稿是最初的版本。

Celia 手繪的虎斑喵
虎斑喵 — Celia 的手繪原稿
Celia 手繪的橘喵
橘喵 — Celia 的手繪原稿

從手繪到遊戲角色

用 Nano Banana 把手繪轉成遊戲角色,生成搖擺、點頭、比讚三組動作,每組 8 幀。

虎斑喵動作序列圖
虎斑喵 — 3 組動作序列
橘喵動作序列圖
橘喵 — 3 組動作序列
虎斑喵 — 搖擺動畫
F1
01
F2
02
F3
03
F4
04
F5
05
F6
06
F7
07
F8
08
橘喵 — 搖擺動畫
F1
01
F2
02
F3
03
F4
04
F5
05
F6
06
F7
07
F8
08

遊戲玩法

模擬湯姆熊街機的節奏遊戲體驗。投幣、選歌、跟著節拍按鍵。

投幣開始

按空白鍵投幣,像真的街機一樣

5 首歌曲

小星星、小蜜蜂、兩隻老虎,還有吉伊卡哇兩首歌

雙軌操作

左鍵控制虎斑喵、右鍵控制橘喵

豐富回饋

Perfect / Great / Good 判定、Combo、粒子特效


試玩遊戲

直接在這裡體驗。投個幣、選首歌、跟著虎斑喵和橘喵一起打節奏。

可以直接在上面玩 — 用鍵盤 ← → 操作


創作時間線

2026 年 4 月 3 日,虎航班機因旅客身體不適折返,在函館機場意外展開的三小時創作之旅。

13:00
班機延誤,爸爸兌現承諾,Celia 提議「我們來做遊戲!」
13:10
Celia 拿起鉛筆畫了一隻貓和一隻狗作為遊戲主角
13:30
用 Nano Banana 把手繪轉成遊戲角色,但狗的序列細節修不好,改成兩隻貓:虎斑喵和橘喵
13:50
用 Claude Code 建立遊戲框架:投幣、選歌、遊戲、結算四頁流程
14:20
音符下落、判定系統、Combo 連擊、5 首歌曲合成器旋律完成
14:40
角色序列圖放進遊戲,打擊時觸發反應動畫和粒子特效
15:00
視覺打磨 — 螢幕震動、軌道閃光、判定線脈衝
15:20
導入吉伊卡哇 MP3,用 Web Audio API 自動分析節拍生成 beatmap
15:40
每首歌獨立排行榜上線,localStorage 儲存前 10 名
16:00
完成!Celia 試玩,玩得超開心

技術細節

純前端實作,不依賴任何框架,用瀏覽器就能玩。

HTML / CSS / JS Web Audio API requestAnimationFrame CSS Animations MP3 節拍偵測 Sprite 序列動畫 Claude Code Nano Banana

未來待辦

🎮 遊戲優化

  • 改善節奏提示
  • 角色全新造型
  • 加入更多歌曲

🔧 硬體升級

  • ESP32 + 感測器
  • 實體按鍵 & LED

📱 App 上架

  • 打包 iOS / Android
  • 上架 App Store

來玩吧

投個幣,選首歌,跟著虎斑喵和橘喵一起打節奏。

開始遊戲 →

請先關閉手機靜音,才能聽到音樂