2026年10月3日 星期六

Line動態貼圖生成工具(結合google flow)

 免安裝・免帳號・純電腦本機處理

4×2 八格圖 → 動態影片
→ LINE 官方動態貼圖

用 Google Flow 讓 AI 生成的四格圖真的「動起來」,
再一鍵切成 8 張會動的 LINE 貼圖,直接打包成可送審的 ZIP

這次為什麼要整個重做?

先前我分享過一個用 AI 產生圖片、再做成 LINE 貼圖的工具,流程是「AI 生一張四格圖 → 切四格 → 打包上傳」。對老師來說確實夠用,但四格圖是四張靜態畫面,要變成動態貼圖,就只能靠一張一張輪播、加上縮放或位移撐出動感。老實說,那比較像是「會動的圖片」,而不是「一段動作」——動作是拼湊出來的,銜接自然就不順。

📌 換個思路:讓 AI 直接「動」起來

既然動作不順,那就不要硬湊。我的做法是把中間多插一個「影片」關卡:把同一組 4×2 的八格角色圖丟進 Google Flow,讓它生成一段真正的動態影片;影片本身就是連續動作,之後再交給這次新做的工具,去背、切 8 格、變成 LINE 動態貼圖。

這樣一來,前半段交給 AI 決定動作、後半段交給工具處理規格,分工乾淨,貼圖也順多了。

💡 簡單說,這次的流程變成三段:AI 生圖(Gemini)→ AI 生成影片(Google Flow)→ 切格去背打包(這個網頁工具)。工具裡就把三個入口按鈕直接排在最上方,不用另外找。

和新舊兩種做法差在哪?

比較項目舊做法(靜態四格圖輪播)新做法(先成影片再切格)
動作來源靜態畫面輪播+縮放位移AI 生成的連續影片動作
流暢度動作跳接、較不自然動作連貫、接近原生動畫
畫面一致性各格風格差異較大時會很明顯同一段影片切出,八格動作自然對得上
可用的畫格數固定 4 格或 8 格影片任一秒都能切,張數更自由
學 VIDEO→貼圖的人不熟悉影片剪輯不用剪輯,工具自動均分 12 幀

完整流程:三個按鈕就完成

第一次使用,建議就照著下面三顆按鈕的順序走一次,之後熟悉了就能跳著用。

💡 還沒有影片也沒關係:工具右上角有一顆「✨ 載入示範影片」按鈕,會即時在你的瀏覽器裡合成一段 4×2 的示範動畫,可以先拿來練手、熟悉每個步驟。

使用詳細教學(四個步驟精靈)

工具介面分成四個步驟,最上方就是進度條,走到哪一步點一下就能跳回去改。只要上傳影片後,四步驟全部在本機完成。

1
步驟 1:上傳影片、決定要用哪一段

把 Google Flow 下載的影片拖曳進畫面上方的大方塊(或點一下選檔案)。支援 MP4/MOV/WebM,包含 9:16 直式在內的各種長寬比都沒問題。

接著最重要的是「設定影格擷取時間區間」:

  • 開始/結束時間:可用滑桿拉,也可用數字框直接輸入秒數,或按「📍 設為目前位置」抓影片當下的時間點。
  • ⚡ 快捷選取長度:一鍵取 1/2/3/4 秒。其中 2 秒最推薦,因為 LINE 動態貼圖總長上限 4 秒,2 秒剛好可以播兩輪。
  • 🔁 循環播放此區間:先反覆看過這一段再決定要不要用,選得好再往下走。
  • 時間一改,系統會自動重新擷取 12 幀並同步到後面所有步驟。

接著選擇工作模式:「A 直接分割為正方形 MP4」(不去背、給社群短影音用),或「B 製作 LINE 官方動態貼圖」(會依序跑第 2、3、4 步)。

2
步驟 2:智慧吸管去背

LINE 動態貼圖必須是去背透明背景,這一步就是處理這件事。按「🎯 畫面吸色管」後,直接點一下畫面上要去掉的底色(例如白底或淡桃紅底),預覽就會即時變透明。

底色不乾淨時,靠兩個滑桿微調:

  • 色彩容差(Tolerance):抓「多接近的顏色算底色」,底色有漸層或雜訊時可以加大。
  • 邊緣羽化平滑(Smooth):讓角色邊緣不要出現硬鋸齒、毛邊或一圈白框。

另外還有幾個貼心細節:

  • 🔍 沉浸大圖檢視去背:切到全螢幕模式,畫面可放大到 200%,細節看得清清楚楚,還能直接點大圖取色。
  • 🎨 去背預覽底色:預設是「淡桃紅+白方塊」,另有經典灰白、薄荷綠、純黑、純白與自訂色。建議先切「純黑」檢查一遍,最容易看出有沒有殘留白邊。
  • 隨時可下載去背後的完整透明 GIF,先留著當備份。
3
步驟 3:網格分割線拖曳微調

影片上會疊出橘黃色(水平)與藍色(垂直)分割線,每一格就是未來的一張貼圖。

常用規格有四種快捷選擇:4 欄 × 2 列(8 格)、4 欄 × 6 列(24 格)、3 欄 × 3 列(9 格)、2 欄 × 2 列(4 格);也可以直接輸入自訂行列(1~10)。

如果 AI 切的格線沒有剛好對齊角色:

  • 直接用滑鼠/手指拖曳分割線,位置即時更新,每條線還會顯示目前百分比。
  • 精準微調:下拉選一條線,按「◀ −1%/+1% ▶」一格一格修。
  • 🔍 超大視窗沉浸微調:全螢幕+放大操作,專為 9:16 直式影片設計;直式影片上傳後系統會自動切到 150% 放大,因為直式在一般視窗裡實在太窄不好點。
  • 改壞了不用怕,按「還原等分」一下就回到標準位置。
4
步驟 4:設定規格並一鍵輸出審核包

最後確認四個設定,再按右上角「開始分割導出」:

  • 輸出格式:LINE 動態貼圖(APNG+ZIP)/僅正方形影片(MP4+ZIP)/雙格式同時產出。
  • 單元規格尺寸:LINE 貼圖選 320 × 270 px(上限) 或 270 × 270 px;要輸出 MP4 則有 360/512/640/720 px 可選。
  • 排版模式:等比留白(Contain)保留原比例、填滿裁切(Cover)填滿不留白框。
  • 播放時間:選擇「單次秒數 × 循環次數」,例如 2 秒 × 2 次 = 4 秒(官方推薦)。

產出後畫面上會列出每一格,隨時能單獨下載;也可以到「👑 main.png 封面來源」與「🏷️ tab.png 標籤來源」指定要用第幾格當封面與聊天室標籤,最後按「📦 一鍵打包 LINE 官方 ZIP」即可。

打包好的 ZIP,後台怎麼上傳?

工具產生的 ZIP 已經是根目錄平鋪結構(沒有子資料夾),上傳後台的流程只要四步:

1

登入 LINE Creators Market,點左上角「新增」。

2

項目選擇「貼圖」,並在貼圖類型勾選「動態貼圖」。

3

切到「貼圖圖片」分頁,把販售張數設成你的實際張數(例如 8 張或 24 張)。

4

直接上傳工具下載的 .zip,送出審核即可。

工具已經幫你對齊官方規格

LINE 動態貼圖的審核最容易卡在「規格不符」,這也是我把規則直接寫進工具的原因。以下是本工具的預設值與官方規範的對照:

項目工具設定說明
動態貼圖張數8/16/24 張官方僅接受這三種數量
貼圖尺寸320 × 270 px(上限)寬高其中一邊需達 270px 以上
每張畫格數12 幀官方規範 5~20 幀
播放時間1/2/3/4 秒(單次)官方不允許 1.5 秒這類小數
循環次數1~4 次單次時間 × 次數 ≤ 4 秒
主圖 main.png240 × 240 APNG貼圖小舖封面,可自選來源格
聊天室標籤 tab.png96 × 74 靜態 PNG自動等比置中,不要加播放符號
背景透明去背官方要求去背透明處理
檔案結構根目錄平鋪 ZIP不必先解壓縮即可上傳

🔧 這裡有個很細的地方:APNG 的「播放秒數」與「循環次數」其實是寫在檔案內部的標記裡,一般工具算出來常常會變成 2.03 秒這種數字,送出審核就會被退件。這支工具會把每一幀的延遲精準分配,加總後剛好等於你選的整數秒,再直接改寫 APNG 的循環標記並重算校驗值,所以能對上官方要求。

兩個貼圖合輯一起用

很多老師會做不只一組貼圖(例如「開學系列」「期末系列」各一組 8 張)。這支工具內建了ZIP 多合一合併功能,不用自己去解壓縮再改檔名。

  • 上傳 2 或 3 個已經打包好的 8 張貼圖 ZIP,系統會自動攤平、依序重新編號為 01.png ~ 16.png(或 24.png)。
  • 每個 ZIP 卡片都能用 ▲▼ 調整先後順序,或用 ✕ 移除。
  • 封面與標籤可以沿用原 ZIP 裡的 main.png/tab.png(與你原本輸出的 100% 相同,最保險),也可以改指定任意一張貼圖。
  • 合併後張數不是 16 或 24 時,工具會主動提醒,避免白忙一場。

不想做貼圖,只想要 8 段短影片?

把第 1 步的模式選成 「A 直接分割為正方形 MP4」就好:不去背、不綁 LINE 規格,可以自選 512/640/720 px 與留白背景色,輸出適合IG reels、短影音或簡報播放的 1:1 影片 ZIP。不用去背的好處是畫面完整、邊緣不會糊。

✅ 純本機處理 ✅ 免安裝免帳號 ✅ 12 幀精準取樣 ✅ 吸管一鍵去背 ✅ 4×2/4×6/3×3/2×2 網格 ✅ 9:16 直式強化 ✅ 分割線拖曳+±1% 微調 ✅ APNG/MP4 雙輸出 ✅ 官方審核 ZIP 一鍵打包 ✅ 16/24 張合輯合併 ✅ 內建示範影片試玩 ✅ CC BY-NC-SA 4.0

為什麼可以「不上傳」就完成轉檔?

因為所有運算都在你的瀏覽器裡做完:

⚙️ 動態貼圖(APNG)怎麼來的?

上傳影片後,程式會依設定的時間區間平均抓取 12 幀存在記憶體裡。每一幀依序做色彩去背 → 依分割線裁切 → 等比縮放成指定尺寸 → 交給 UPNG.js 編碼成 APNG。接著直接改寫 APNG 內部的循環標記並重算校驗值,讓它精準符合你選的播放時間與次數。

⚙️ MP4 影片怎麼來的?

使用瀏覽器內建的 WebCodecs 影片編碼 API搭配 mp4-muxer,在你的電腦上直接編成 H.264 的 MP4;不支援的瀏覽器會自動改用 MediaRecorder。同樣不需要把影片送到任何伺服器。

🔒 關於資料與隱私

  • 影片不會離開你的電腦,整個流程純前端運算,沒有上傳、沒有轉檔伺服器。
  • 檔案只在你按下「下載」或「打包」時才寫成檔案,並由瀏覽器直接存到你的下載資料夾。
  • 要測試功能但不想上傳自己的影片,可以先按「✨ 載入示範影片」試跑。
  • 工具採 CC BY-NC-SA 4.0 授權,可自由使用與教學分享,非商業為限。

常見問題

狀況怎麼處理
吸色管按了沒反應改用 Chrome 或 Edge;或直接點擊下方面板的預覽畫面取色,一樣有效
去背後還有一圈白邊把「色彩容差」降低、「邊緣羽化平滑」提高,並切到「純黑」預覽底色檢查
角色被切掉一半到第 3 步拖曳分割線,或用「精準微調 ±1%」;直式影片記得按「🔍 超大視窗」操作
貼圖動起來有卡頓感把時間區間縮短(1 秒或 2 秒)通常會更順;也可能是 Google Flow 生成的影片本身動作太猛
審核被退件先確認張數是 8/16/24、尺寸有在 320×270 內、背景已去背透明,再用工具產生的 ZIP 上傳
影片太長不想全部用第 1 步把「結束時間」往後拉,或用「📍 設為目前位置」精準抓段落

讓 AI 動起來,貼圖就不再是「會動的圖片」

這次改版最大的差別,只是中間多了一個「影片」關卡,動作就自然多了。
工具免費、不用註冊、影片也不會外傳。
如果對你有幫助,歡迎分享給身邊想自己做貼圖的同事一起用。

2026年9月27日 星期日

螢幕畫筆區網互動工具-老師在觸控大屏上畫記、截圖出題,學生掃 QR Code 就能即時作答

 🖍️ 免費 · 免雲端 · 免帳號

螢幕畫筆 × iPad
把課堂變成「人人都在寫」的現場

老師在觸控大屏上畫記、截圖出題,學生掃 QR Code 就能即時作答
完全在區域網路運作,不需要網際網路、不需要註冊

📥 下載方式小提醒點進專案頁後,請往頁面右方(Releases 區塊)找到最新版,點擊下方的「Source code (zip)」即可下載整包程式。下載完記得先解壓縮,再執行資料夾裡的啟動程式.bat。

這套工具為什麼會出現?

一切的起點很單純:我是用 AI 幫自己做了一個大屏用的螢幕畫筆工具,讓我可以直接在觸控大屏上畫重點、圈關鍵字、遮住答案,那堂課就順很多。

但用了一陣子後,我發現一個問題——我畫好的畫面,學生只能「看」,不能「回應」。傳統的課堂提問,往往是幾個志願者舉手,其餘的孩子就開始發呆;我根本不知道誰會了、誰沒會。於是接著第二個念頭冒出來:如果能把畫面上的畫記直接派送給 iPad,讓學生當場寫下答案就好了。

📌 中間的轉折:Firebase 資料庫版

所以我做了第二版,把畫記、截圖和作答資料都丟到 Firebase 資料庫,讓老師和學生透過雲端連線。功能做出來了,但回頭問其他老師「你會用 Firebase 嗎」,答案讓我愣住——大家都要自己去申請帳戶、建立專案、串接 API 金鑰、調整權限規則,光是設定關就卡住一大半人。

工具本身沒問題,問題出在安裝門檻。對不熟程式的老師來說,光是申請 Firebase 資料庫就足以讓他把工具關掉。於是我換了一個方向。

💡 這個轉折讓我體會很深:對老師來說,「免設定」比「功能多」更重要。所以這兩天我把它整個改寫成純區網版——不需要 Firebase、不需要註冊、不需要網際網路,只要老師和學生在同一個 Wi-Fi 下,掃個 QR Code 就能用。

順便也把這兩天累積的互動功能與整體 UI 介面一起重做了一輪:介面改成馬卡龍淡色系、按鈕加大好點、面板可拖曳收合、4K 觸控大屏自動放大;互動上多了題庫預先備課、多頁計算紙、繪圖重播、抽人、暫停作答、並排比較等功能。

每一個功能都是我在課堂上真的卡住過的地方。分享給各位老師,希望也能幫上忙。

它能解決哪些教學痛點?

🎯 痛點一:只有前幾個學生會回答

改用塗鴉題、選擇題,每個人都要動手。儀表板會即時顯示在線人數與已作答人數,哪幾個孩子還沒寫,一目了然,巡堂時可以直接走過去點名輔導。

🎯 痛點二:數學課看不到思考過程

計算題可以讓學生在多頁計算紙上一步步寫算式,寫完一筆,總覽縮圖立刻同步。老師按開任一位學生的作品,就能看到完整過程,而不是只有一個「答案是 42」。

🎯 痛點三:講解時版面看不清

內建螢幕畫筆,可以直接在投影畫面上畫記、重點、遮住答案,10 色 × 5 種粗細,還能存成圖檔隔天繼續用。也可以用「繪圖重播」一筆一筆重現學生的作答過程全班一起看。

🎯 痛點四:備課重複做白工

課前把題目截好、設定題型、存進題庫,上課時一鍵派送,不用每次都在眾目睽睽下拖曳框選。題庫還能匯出成 ZIP,備份或分享給其他老師都很方便。

支援的題型一覽

🎨 塗鴉題 🧮 計算題(多頁計算紙) 🔤 選擇題 📝 簡答題 🎲 抽人點名 ⏸ 暫停作答 🔁 重新作答 🎬 繪圖重播 ⬇️ 一鍵下載作答

安裝與啟動:三步驟就完成

1
下載並解壓縮

從 GitHub Releases 最新版 下載 Source code (zip),解壓縮後保持資料夾結構完整(templates 資料夾一定要跟主程式放在一起)。

2
雙擊「啟動程式.bat」

不需要會安裝 Python,也不需要管理員權限。啟動程式會自動尋找電腦上的 Python、缺少時自動安裝、接著補上 PyQt5 與 qrcode,最後安靜地開啟主程式(不會跳出黑色視窗)。

3
放行 Windows 防火牆

第一次啟動時 Windows 會跳出防火牆提示,請勾選 「私人網路」 並按「允許存取」。沒放行的話,學生的 iPad 會連不進來。

💡 小提醒:只有第一次自動安裝 Python 和套件時需要網際網路,之後每次上課只需要區域網路就好。若顯示安裝完成但程式沒開,關掉視窗再雙擊一次即可(讓 Windows 讀到新的 PATH)。

老師端:開始上課

  • 按 「🖊️ 開始繪圖」:凍結目前畫面,進入畫記模式,可直接在投影上畫重點、圈關鍵字、用方塊遮答案。
  • 按 「✂️ 截圖出題」:不用先進繪圖模式,直接框選畫面任一區域出題,出完自動回到主面板。
  • 選好題型後二選一:「🚀 發送任務」讓全班 iPad 立刻收到,或 「💾 存入題庫」留到下次用。
  • 按 「📱 連線」:顯示 QR Code 與網址,學生掃碼加入。
  • 按 「📊 儀表板」:即時看誰交、誰沒交,還能抽人、暫停作答、下載作答結果。
  • A-/A+ 可縮放整體介面(80%~160%),4K 觸控大屏會自動放大,設定會記住。

學生端:三行指令就完成作答

  • 用 iPad 相機掃 QR Code,Safari 開啟網頁後輸入名字或座號,按「加入課堂」。
  • 等老師發題,畫面會自動切換到題目,不用一直重整。
  • 作答完按「送出 ✓」;送出後還能按「✏️ 修改答案」重寫,老師端只會保留最新的一份。
  • 在 Safari 按「分享 → 加入主畫面」,之後點一下就能開,還會記住名字自動加入。

老師端儀表板能做什麼

按鈕用途
🎲 抽人從已回應的學生中隨機抽一位,直接把他的作答秀出來;預設不重複
⏸ 暫停作答討論時間凍結送出,學生端會看到「老師暫停作答中」
🔁 重新作答同一張截圖、同一題型重考一次,清空原紀錄
☆ 選取 → 🔍 比較最多選 4 份作品並排比較,找差異超好用
🎬 繪圖重播在截圖背景上一筆一筆重現學生的畫畫過程,1X/2X/3X 速度可調
⬇️ 下載作答塗鴉/計算題打包成 ZIP,選擇題/簡答題輸出 CSV 可直接開 Excel

計算題:多頁計算紙特別實用

數學課最怕學生只寫答案,所以計算題我特別設計成多頁格線計算紙:

  • 預設四張計算紙(2×2),頁數最多 20 頁,寫到最後一頁才會出現「+ 新增一頁」。
  • 點一格就放大成滿版書寫板,空間大 4 倍;左上角的「⊞ 回全覽 · 第 N / 總頁數 頁」或兩指捏合可以退回。
  • 寫到第 2~4 頁時,上方會出現「👁 看第 N 頁」,可以叫出前一頁的浮動預覽,邊看邊接著算。
  • 每寫完一筆,總覽縮圖即時同步,不用送出才看得到。
  • 自動下載時會把所有頁合併成一張 PNG,在 iPad 上可以直接「儲存影像」到相簿。

✍️ Apple Pencil 自動支援:iPad 偵測到 Apple Pencil 會自動切成「觸控筆模式」,手掌和手指都不會畫出東西,再點一下頂列的按鈕可切回「☝️ 手寫模式」。手寫時會暫時忽略手掌誤觸,轉動 iPad 也不會讓畫好的內容跑掉。

技術上怎麼做到離線也能用?

老師端是 Python + PyQt5,啟動時在老師電腦上開一個內建的 HTTP 伺服器(0.0.0.0:8000),學生裝置連進來就取得網頁;學生端是單一 HTML 檔,純 HTML/CSS/JavaScript,不依賴任何外部 CDN,所以沒有網際網路也能正常運作。QR Code 則由 qrcode 套件產生矩陣後用 Qt 直接繪製,不需要額外的圖片套件。

🔒 關於資料與隱私

  • 所有資料只在老師電腦的記憶體處理,不會上傳到任何雲端服務。
  • 關閉程式、結束繪圖或發送新題目時,目前作答就會清除。
  • 只有老師主動按「⬇️ 下載作答」或「💾 存檔」時,資料才會寫成檔案。
  • 學生端網頁不載入任何外部資源,學生裝置連出去也不會留下紀錄。

常見問題

狀況怎麼處理
掃了 QR Code 卻打不開確認 iPad 與老師電腦在同一個 Wi-Fi/網段;再到「允許應用程式通過防火牆」把 Python 的「私人網路」勾起來
多張網卡時找不到網址在「📱 連線」視窗的網路介面選單切換其他網址試試
校園 Wi-Fi 互相看不到部分校園 AP 會隔離用戶端,可改用一台獨立無線分享器
連接埠被占用程式預設 8000,被占用時會自動往後找(最多到 8019),實際網址以主面板顯示為準
iPad 偶爾斷線回到頁面會自動重連;若畫不出來,先在 iPad 重新整理,確認載入的是最新版

工具免費、資料不外流,課堂直接升級

這套工具沒有任何廣告、沒有帳號系統、也不會把孩子的作答送到任何伺服器。
如果你覺得有用,歡迎分享給身邊的同事一起用。

⬇️ 前往下載(Releases 最新版 Source code zip)

2026年9月19日 星期六

🎲 寶島大富翁 V5 教室大屏專用・AI 一鍵自訂主題遊戲

 

🎲 寶島大富翁 V5
教室大屏專用・AI 一鍵自訂主題遊戲

以 V5 版本為主|地圖・題庫・機會命運卡,全部用 AI 生成,再匯出帶著走
V5.0 ・ 2026-09-18 更新 ・ 以教室大屏遊玩設計

一、軟體由來

我原本只是想在課堂上玩一場「有台灣味」的大富翁,讓學生在擲骰子、買地、付租金的過程中,順便把觀光、歷史、時事都複習一遍。

做到 V4 的時候,地圖、題庫、卡片都已經可以 AI 生成、可以手改、可以匯入 XLSX,功能其實很完整了。但我在教室大屏上實際帶了幾次,發現幾個痛點:2D 骰子不夠嗨、訊息彈窗一直擋住流程、玩家欄看不到總資產、下課要收尾很難交代錢怎麼花的。

所以我把整個程式重新整理,推出了這個 V5。V5 的目標很單純:同一套玩法,但更適合站在全班前面、用大屏帶著玩。

二、課堂教學應用

🏫 我的課堂用法(給老師參考)
  • 任何科目都能套主題:台灣歷史、自然生態、英語單字、數學應用題,只要換地圖名+換題庫,就是一堂複習課。
  • 答對才能行動:踩到無主地、機會、命運都要先答題,答錯就跳過。這讓強勢組不能只靠運氣,弱勢組也有逆轉機會。
  • 收支歷程當檢討素材:V5 點玩家卡就能看到「租金都是跟誰收的、錢花去哪」,下課前 3 分鐘直接投影檢討,金流一目了然。
  • 大屏+分組對抗:2~4 組,每組派代表擲骰,全班一起喊答案,氣氛比單純搶答好很多。

因為遊戲是為教室大屏設計的,標題、計時器都收進棋盤中央,玩家欄和棋盤等高,坐在後排也看得清楚。功能按鈕收在棋盤角落,不會擋到投影邊緣。

三、V5 比 V4 多了哪些功能? 重點

以下是我自己對照程式碼整理出來的差異,V4 有的 V5 全部保留,V5 是加法升級:

項目V4V5 新增/改進
🎲 3D 骰子2D 數字骰+旋轉動畫three.js 真 3D 骰子,在棋盤中央翻滾再停在正確點數,一進遊戲畫面就看得到,課堂歡呼聲差很多
🎨 整體美術傳統灰白棋盤馬卡龍+普普風:漫畫貼紙格、粗黑描邊+硬式陰影,已購買的土地會「浮起來」,一眼看出戰況
🖥️ 大屏版面標題在棋盤外,地圖+玩家欄簡單並排標題+計時器移入棋盤中央;地圖 75%+玩家欄 25%,中間有可拖曳把手即時調比例,右欄高度自動同步棋盤,手機自動改上下堆疊
💰 資產與歷程只顯示現金與土地名即時顯示總資產(現金+土地現值);點擊玩家卡彈出歷程:持有土地、租金收入來源排行、完整收支時間軸,每筆錢都有理由可查
🔔 訊息提示全部用彈窗,要一直按確定一般通知改用右下角 Toast 浮動提示(經過起點、匯出成功等),不中斷流程;租金、監獄、破產等關鍵事件才用彈窗
📍 格子回饋只有底部色條已購土地左下角顯示地主 emoji 徽章,目前所在格有金色發光脈動外框,大屏遠看也清楚
⚙️ 設定畫面單欄很長,要捲動雙欄精簡一頁完成+版本徽章;新增 XLSX 格式說明弹窗;初始畫面直接有「載入進度」,不用先進遊戲
🔘 功能按鈕固定在視窗四角收進棋盤內部:匯出/載入在左上,結束/重置在右上,投影不怕被裁掉
💡 一句話總結:V4 是「功能齊全的單機大富翁」,V5 是「站在全班前面也好帶的大富翁」。如果你用過 V4,直接換 V5 不用重新學。

四、使用詳細教學(建議流程)

我最建議的流程就是:先用 AI 生內容、匯出進度,再用主程式載入來玩。這樣老師在家備課 10 分鐘,到教室 1 分鐘就能開玩。

步驟 1:用 AI 生成地圖、題庫、卡片

1
點擊最上方 🤖 第一步大按鈕 開啟我的 Gemini 分享連結(share.gemini.google/MbDhf94i4XfY)。照著裡面的指示輸入主題,例如「台灣夜市」「自然生態」「英文單字」。
2
在 AI 設計區依序按 生成地圖 → 生成題庫 → 生成卡片。地圖主題會自動帶入卡片欄,也可以手動改。不滿意可以按 🗺️ 手動修改地圖、✏️ 編輯卡片/題庫(👁️)微調。
3
完成後按棋盤左上角 匯出進度,會下載一個 台灣大富翁_儲存_日期.json。這個檔案就是你的「自訂關卡」,請收好。

步驟 2:下載 V5 主程式

4
點擊 🎮 第二步大按鈕(filedn 的 V5 html 連結),在連結上按 右鍵 → 另存 HTML,存到你的電腦或隨身碟。檔名是 大富翁V5-1150919.html。
5
用 Chrome 或 Edge 直接雙擊開啟那個 html,不需安裝、不需網路(有網路時 3D 與字體會更漂亮)。

步驟 3:到教室載入、開玩

6
在設定畫面按 📂 載入進度(或進遊戲後左上角的載入進度),選擇步驟 3 的 json 檔,你的自訂地圖+題庫就回來了。
7
設定玩家人數、名稱、emoji、初始資金、遊戲時間,勾選要用的題庫,按 開始新遊戲。把瀏覽器按 F11 全螢幕投影到大屏,點擊 擲骰子開玩!
8
下課前想留紀錄再按一次 匯出進度,下節課繼續玩。時間到會自動結算總資產排名。
⚠️ 小提醒
  • 題庫 XLSX:每個工作表就是一個題庫,第一列是標題列,從第二列開始每列一題,欄位依序是 題目、答案(1~4或A~D)、選項1~4,六格都要填。
  • 監獄規則:探訪沒事,被送監要等 3 回合、擲雙倍提早出來,也可用免費出獄卡或 $500 保釋。
  • 租金:一般地產看租金表,車站看擁有數量加倍,公用事業看骰子點數×倍數,賣地以 9 折計入總資產。

五、佈署說明(免安裝・單一檔案)

這個遊戲是純前端單一 HTML 檔,沒有後端、不需 GAS 佈署、不需伺服器:

  • 取得方式:上方 🎮 大按鈕右鍵另存 HTML 即可,放到電腦、隨身碟、雲端硬碟都能用。
  • 執行方式:雙擊用瀏覽器開啟,建議 Chrome/Edge+F11 全螢幕投影。
  • 存檔方式:遊戲進度存在 JSON+瀏覽器 localStorage,換電腦就帶著 json 檔+html 檔走。
  • 離線:核心玩法離線可玩;CDN(Tailwind、xlsx、three.js、字體)有網路時效果完整。

六、結語

V5 對我來說不是炫技,而是一次「把教室現場放在心上」的修改:骰子更大聲、錢流更透明、按鈕不再擋畫面、備課 10 分鐘就能帶走一堂課。

如果你手上有 V4 的題庫和地圖,直接匯入 V5 就能用,歡迎試試看。