想學寫 iPhone App，卻卡在第一堂課就看不懂？「雨夜懷錶案」是一款免費的 SwiftUI 教學遊戲，把程式課變成一樁咖啡館失竊案。每一章只學一個 SwiftUI 概念，寫對了，手機畫面立刻出現，你也拿到一條破案線索。完全沒寫過程式也能從第 0 章開始。
雨夜懷錶案是什麼遊戲？
晚上九點四十七分，大稻埕的霧港咖啡停電三十秒。燈亮時，老闆鎖在保險箱裡的祖傳懷錶不見了。你扮演新來的偵探，手上只有一支還沒寫完的辦案 App。
遊戲畫面分成兩半：左邊是 Swift 程式碼，右邊是一支模擬 iPhone。你在左邊改程式，右邊的畫面就跟著變。每修好一個畫面，證物板上就多一條線索，最後要用所有線索指認犯人。
用遊戲學 SwiftUI 有什麼不一樣？
- 一次只學一件事：每章只有一個新概念，任務通常只要改幾行。
- 馬上看到結果：不用安裝 Xcode，打開網頁就能寫，右邊的手機即時預覽。
- 錯誤訊息看得懂：寫錯時會標出第幾行，並用中文補充怎麼修，錯誤格式和 Xcode 一致。
- 有故事推著走：想知道懷錶去哪了，就會想把下一章寫完。
八個章節會學到哪些 SwiftUI 概念？
| 章節 | 劇情 | SwiftUI 概念 | 你會寫出的程式 |
|---|---|---|---|
| 第 0 章 | 領取偵探證 | 認識編輯器與預覽 | 把 Text 裡的名字改成自己的 |
| 第 1 章 | 證物卡 | Text 顯示文字 | Text("林若琴") |
| 第 2 章 | 監視器最後一格 | Modifier 調整樣式 | .font(.largeTitle) |
| 第 3 章 | 三份證詞 | VStack 垂直排版 | VStack(alignment: .leading) |
| 第 4 章 | 窗台上的鞋印 | HStack 與 SF Symbols 圖示 | Image(systemName: "magnifyingglass") |
| 第 5 章 | 老闆的信封 | @State、Button、if | isOpen.toggle() |
| 第 6 章 | 嫌疑人名單 | List 與 ForEach 清單 | ForEach(suspects, id: \.self) |
| 第 7 章 | 保險箱 | TextField 與 Binding | TextField("密碼", text: $code) |
手機上可以左右滑動表格。
這八個概念是大多數 SwiftUI 畫面的骨架：顯示文字、調整樣式、排版、放圖示、處理按鈕、列出清單、接收輸入。
完全沒寫過程式，要怎麼開始玩？
- 用電腦打開雨夜懷錶案遊戲頁面。手機也能玩，但打程式碼比較不方便。
- 從第 0 章開始：只要把引號裡的「新人偵探」改成你的名字。
- 按黃色的「執行並檢查」，通過後會拿到線索，並出現「下一章」按鈕。
- 每章左邊的「SwiftUI 筆記」會用白話說明這一章的概念，先讀再寫。
卡關了怎麼辦？
- 看紅色錯誤列：它會告訴你第幾行出錯。最常見的是少了引號、括號，或大小寫打錯。
- 按「給我提示」：會告訴你要寫在哪裡、寫什麼。
- 按「看解答」：參考解答不會直接覆蓋你的程式，想用時再按「套用」。
- 按「重設程式碼」：改亂了可以回到這一章的起點。
雨夜懷錶案適合誰？
- 想學寫 iPhone App，但從沒碰過程式的人
- 看過 Swift 教學影片，卻還沒真正動手寫過的人
- 想用比較輕鬆的方式複習 SwiftUI 基礎的學生
- 喜歡推理、解謎遊戲的人
玩完之後，下一步可以學什麼？
遊戲裡的程式碼是標準的 SwiftUI 語法，可以直接貼進 Xcode 的預覽畫面執行。想從遊戲接到完整的課程，推薦跟著 Paul Hudson 的免費課程「100 Days of SwiftUI」一天一天學。我把每天的內容整理成中文筆記，從開始前的準備講起：
100 Days of SwiftUI 開始之前，要先學什麼、又不該做什麼？
其他可以接著做的事：
- 在 Mac 上安裝 Xcode，把遊戲裡的畫面貼進去，看它在真正的模擬器裡長什麼樣子。
- 用 iPad 或 Mac 上的 Swift Playgrounds，繼續用小專案練習。
- 挑一個遊戲沒教到的主題往下學，例如畫面切換（NavigationStack）和把資料傳給子畫面（@Binding）。
常見問題
玩這個遊戲需要 Mac 或安裝 Xcode 嗎？
不需要。遊戲直接在瀏覽器裡執行，Windows 電腦也能玩。之後想把 App 裝到自己的 iPhone 上，才需要 Mac 和 Xcode。
雨夜懷錶案要付費嗎？
完全免費，不用註冊。
我的進度會被保存嗎？
會。進度存在你目前使用的瀏覽器裡，同一台裝置、同一個瀏覽器回來可以接著玩。換裝置或清除瀏覽資料後會從頭開始。
遊戲裡的預覽和真正的 iPhone 一樣嗎？
預覽是在網頁裡模擬 SwiftUI 的一部分功能，外觀接近 iPhone，但只支援遊戲用到的元件。程式碼本身的寫法和 Xcode 相同。
之後會有更多章節嗎？
會依照玩家的回饋繼續擴充新的案件，教更多 SwiftUI 功能。
破案之後，去真實的大稻埕走走？
遊戲裡的霧港咖啡是虛構的，但故事舞台大稻埕是真實存在的台北老街區。玩完之後，可以去看看案件發生的地方：
- 迪化街的老街屋、南北貨與中藥行
- 老茶行、永樂布市和各種手作體驗
- 傍晚到大稻埕碼頭看夕陽
大稻埕的導覽行程和在地體驗，可以在 Klook 一次比較場次與價格：
喜歡推理解謎？下一步可以玩真人密室逃脫
在遊戲裡，你靠線索、證詞和密碼破案；真人密室逃脫把同一套推理搬到現實，要你和隊友在時間內找出機關、解開謎題。適合 2–6 人組隊，朋友聚會或公司團康都很適合。
各種主題的密室逃脫和實境解謎，可以在 Klook 比較場次與價格：
以上兩段含聯盟連結：透過連結預訂，我會獲得少量分潤，你付的價格不變。
懷錶到底被誰拿走了？答案就在第七章的保險箱後面。
發佈留言