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 就能用,歡迎試試看。

2026年9月12日 星期六

《紫斑之翼:奇幻大遷徙》 台灣生態 RPG 互動答題遊戲|可完全自訂題庫

 教學 x 遊戲 x 生態

《紫斑之翼:奇幻大遷徙》

台灣生態 RPG 互動答題遊戲|區網離線 · 全班同樂

🦋 Web / Windows 適用 | 🎮 JRPG 冒險風 | 📚 支援自訂題庫

軟體由來:一場「不靠網路」的奇幻冒險

這幾年帶學生上課,我一直在想:能不能讓答題這件事,變得像打電動一樣好玩? 於是前陣子,我趁著空檔用 Google Antigravity 桌面版,從零打造了這款 《紫斑之翼:奇幻大遷徙》——一款以台灣紫斑蝶春季北返大遷徙為主題的 JRPG 答題遊戲。連遊戲中所有的 20 張美術圖片,都全部由 AI 生成並直接整合進程式裡。

學生化身蝶群守護勇者,一路通過茂林幽谷、月世界惡地、濁水溪河谷、國道生態廊道到繁衍聖林 五大關卡,每答對一題就累積能量、打倒關主魔王,抵達繁殖聖地。遊戲融合了鳥山明熱血動漫的 Q 版戰鬥風格, 還把四種紫斑蝶的真實辨識特徵設計成四位勇者的能力原型,玩遊戲的同時也能學到生態知識。

🎯 為什麼要做「區網就能玩」的版本?

教室裡常常不是每台裝置都有網路、或網路卡卡的。這款遊戲完全不需要連外網路, 只要教師主機跟學生裝置在同一區網(同一台 Wi‑Fi / 有線分享器)下,掃 QR Code 就能立刻連進來開戰! 資料全部存本機端,隱私安全、好備份,也不怕臨時遇到網路斷線。

課堂教學應用:把「考試」變成冒險

這套系統的設計核心,就是希望讓每一個孩子都想主動答題。它具備哪些亮點?

👥
全班同時上線對戰
平板、手機、電腦都能玩,伺服器支援多人同時在線,作答紀錄即時回傳。
💾
題庫一鍵匯入、隨機出題
CSV 批次匯入,也可用 Gemini AI 出題小幫手秒生出題,題目順序自動打亂防背答案。
⚔️
倒數機制 提升專注
答題倒數歸零時魔王會立即反擊扣血,緊張感讓學生全神貫注。
💯
錯題分析一把抓
教師後台自動彙整全班作答數據,錯題難度排行榜與誤選人次一目了然。
🖥️
全螢幕簡報檢討模式
投影機大字體投影片,按 H 隱藏/顯示答案,全班一起檢討迷思概念。
🎨
整套遊戲主題換膚
後台可上傳自訂圖片,或一鍵複製 20 張 AI 生圖 Prompt,5 分鐘變身任意主題。

✍️ 最推薦的課堂節奏

  1. 暖身導入:先投影第二關或第三關的題目,全班搶答,製造期待的氛圍。
  2. 個人闖關:每人用自己裝置選勇者、選主題測驗,開始 5 關冒險。教師從後台即時看學生進度。
  3. 錯題檢討:切進「簡報模式」,把全班最常錯的題目放上大螢幕,按 H 先討論再亮答案,順便看看是哪幾位同學選了哪個錯誤選項。
  4. 主題變裝:想加入國語、數學、英文?CSV 匯入題庫後即可改名換姓,瞬間變成一款全新主題冒險。

使用教學:三步驟開始冒險

  1. 下載檔案:到下述 GitHub 頁面,下載最新版 Source code (zip) 並解壓縮到電腦。
  2. 一鍵啟動:雙擊目錄中的 啟動程式.bat,程式會自動偵測 Python、自動安裝所需套件,並開啟伺服器控制面板與瀏覽器視窗,超簡單!
  3. 掃碼開玩:在控制視窗點「顯示 QR Code」,學生用平板/手機掃描,或直接輸入區網網址(例如 http://192.168.1.100:8888),全班立刻連線開戰!
💡 小提醒
  • 預設連接埠為 8888,若被其他程式佔用,可在面板切換 8080 / 8000 / 5000 / 3000 等埠號後重新啟動。
  • 教師後台密碼預設為 admin,主畫面點「⚙️ 教師/管理者題庫後台」即可進入。

🎓 四大守護勇者(也學蝶類辨識口訣)

🦋 小紫 · 幻紫遊俠 —「小紫點一邊」
擅長幻紫瞬光與超高爆發傷害。
🛡️ 阿圓 · 圓翅巨盾戰士 —「圓翅兩邊點」
高體力與全方位堅固護盾。
🧙 阿斯 · 斯氏靈智賢者 —「斯氏有三點」
高魔力與全隊生命滋養回復。
🗡️ 端端 · 端紫幻影刺客 —「端翅亂亂點」
高敏捷與視線幻惑破防打擊。

🗺️ 五大關卡舞台(同時也對應不同 BGM)

  • 茂林幽谷 → 荒漠月世界 → 濁水溪河谷 → 國道生態廊道 → 繁衍聖林
  • 大地圖自由探索:支援 WASD/方向鍵行走,或直接點擊地圖任意地點自動尋路。
  • 五關全破後有四大勇者齊聚的史詩通關動畫,可手動跳轉成果報告書,方便全班合影留念。

取得與佈署說明

本專案開源發布於 GitHub,採用 CC 姓名標示-非商業性-相同方式分享(CC BY-NC-SA 4.0)授權, 歡迎各位老師自由下載、自行會考出題與改造主題。

📍 下載位置:請前往專案 Releases 頁面,下載最新版的 Source code (zip) 後解壓縮即可使用。

🔗 https://github.com/kentxchang-goedutw/RPGgame/releases

來源說明
啟動程式.batWindows 一鍵啟動(自動偵測 Python、安裝依賴套件、啟動伺服器)
server.py輕量 Python HTTP 伺服器與題庫/作答 RESTful API
web_exe2.pyPyQt5 桌面控制面板:Port 切換與 QR Code 產生
Game-data/題庫、主題測驗、學生作答紀錄、全域設定(本機 JSON)
assets/images/custom/教師上傳的自訂圖片存放目錄

需求環境:Windows 10/11(64-bit)+ Python 3.9 以上(啟動程式.bat 會在未安裝時自動協助安裝)。

一起把學習變成冒險吧!🦋

打破「測驗卷很枯燥」的印象,讓孩子在「闖關、打魔王、集結同伴」的過程中 自然地練習與複習。若你也想讓課堂變得不一樣,歡迎下載試玩、自由改造成屬於你的主題冒險!

有任何想法或建議,也歡迎隨時留言交流。🙂

2026年9月9日 星期三

GAS & Firebase 完美提示詞生成器-不再苦惱怎麼寫 Prompt,選好架構、輸入需求,一鍵生成含資料庫後台的完整部署指令碼。

 

GAS & Firebase
完美提示詞生成器

整合三種資料庫後端架構,為你量身打造極致視覺與免綁定設定的 AI 提示詞。
不再苦惱怎麼寫 Prompt,選好架構、輸入需求,一鍵生成完整部署指令碼。

🟢 GAS 一鍵部署🟣 GAS 獨立前端🔥 Firebase NoSQL
立即體驗生成器

💡軟體由來

在教學現場,我經常遇到老師們想用 Google Apps Script 或 Firebase 開發一些小工具——學生請假系統、線上簽到表、器材借用登記——但每次都要從零開始寫提示詞給 AI,反覆修改、來回調整,光是把需求講清楚就花掉大半時間。

後來我發現,與其每次手動撰寫冗長的 Prompt,不如做一個「提示詞生成器」:讓使用者只要選好架構、填入簡單需求,系統就能自動幫你組裝出一份完整、精準、可直接貼給 AI 的提示詞。

更進階的是,我還把 AI 智能優化功能直接內建進去——你只要隨意打幾句話,點一下「AI 智能優化」,Gemini 就會幫你把模糊想法擴寫成清晰的功能規格書。這就像身邊多了一位產品經理,幫你把需求梳理得條理分明。

⚙️核心功能一次看

🧩

三種架構一鍵切換

GAS 一鍵部署、GAS 獨立前端、Firebase NoSQL,點選卡片即時切換技術規格與配色。

AI 智能優化

隨意輸入想法,AI 自動擴寫為完整功能規格書,支援原文與優化版 Tab 切換。

🎨

六種介面風格

粉嫩馬卡龍、校園繽紛、活力藍橘、現代質感綠、日系無印、科技深色,一鍵選用。

📋

完整部署輸出

生成包含 README.md、Code.gs、Index.html 的三段式完整指令碼,附詳盡中文註解。

📁

雲端硬碟自動存檔

GAS 架構自動建立「上傳的資料」子目錄,圖片壓縮後存檔並以縮圖 ID 回傳。

🔗

Base64 分享機制

支援網址參數分享設定,生成短網址與 QR Code,方便團隊協作與快速部署。

🏗️三種架構,各有千秋

根據你的使用場景,選擇最合適的後端架構:

🟢 GAS 一鍵部署(免設定)

  • 前端與後端合一,無跨網域(CORS)問題
  • 直接從試算表建立腳本,免手動設定 ID
  • 可全自動於雲端硬碟建立目錄與存放圖片
💡 適合:校園內部、快速上線、表單登記與小型行政管理工具

🟣 GAS 獨立前端(API)

  • 前後端分離,HTML 可放任何網頁主機或 GitHub
  • 極高擴充性,支援一鍵複製與說明文件彈出
  • 試算表結構清晰,支援雲端硬碟自動分類存圖
💡 適合:需自訂網域名稱、嵌入學校現有網站、有特殊美化與託管需求的專案

🔥 Firebase NoSQL 架構

  • 讀寫效能極高,毫秒級即時資料庫同步更新
  • 原生支援匿名安全登入、LocalStorage 自動緩存
  • 前端單一網頁部署,無需自行管理伺服器
💡 適合:高互動(即時聊天室、搶票)、大用量與需要嚴密安全規則的專案

🎨六種預設介面風格

內建六款精心設計的 UI 風格,從活潑校園到科技深色,滿足不同場景需求:

🍬 粉嫩馬卡龍
🌈 校園繽紛
⚡ 活力藍橘
🌱 現代質感綠
🌾 日系無印風
🌙 科技深色

也可以自由輸入!除了預設風格,你可以在風格欄位中自行描述想要的視覺效果,AI 會根據你的描述生成對應的前端程式碼。

📖使用教學

  1. 選擇後端架構

    在頁面頂部點選你要使用的架構卡片——GAS 一鍵部署、GAS 獨立前端或 Firebase NoSQL。選定後,下方的技術規格區會自動切換對應內容。

  2. 輸入核心功能需求

    在「需求輸入區」中,用自然語言描述你想要開發的網頁應用。例如:「我想要做一個學生請假系統,學生可以填寫請假單並上傳證明照片……」

  3. (選用)AI 智能優化

    點擊輸入框上方的「AI 智能優化」按鈕,系統會自動將你的簡短描述擴寫為完整的功能規格書。優化後可透過 Tab 切換查看原始版本與 AI 優化版本。

  4. 選擇介面風格

    從六款預設風格中點選,或自行輸入描述。選定後輸入框會有短暫的高亮動畫回饋。

  5. 一鍵生成提示詞

    點擊底部的「生成提示詞」按鈕,右側輸出區會立即顯示完整的提示詞內容。確認後點擊「複製提示詞」按鈕,即可貼到任何 AI 對話視窗中使用。

🔬技術亮點

AI 雙模式 API Key 架構:支援「自訂模式」讓使用者輸入自己的 Gemini API Key 並存入 LocalStorage,也支援「預設模式」在 Gemini Canvas 環境中免 Key 直接測試。兩種模式無縫切換,降低使用門檻。

精緻 Glass-Panel UI:採用毛玻璃效果面板(backdrop-filter: blur)、馬卡龍配色架構卡片、流暢的 CSS 過渡動畫,以及自訂模態視窗(嚴格禁用 alert/confirm),整體視覺體驗媲美專業 SaaS 產品。

智慧色彩切換系統:根據使用者選擇的架構,全頁面的按鈕、輸入框 focus ring、右側面板邊框、技術規格區配色會同步切換為對應色系(綠 / 紫 / 橘),打造沉浸式的操作體驗。

// 架構選擇後,全頁色彩同步切換
if (arch === 'gas-embed') {
  btn.className = "...bg-emerald-600 hover:bg-emerald-700";
  rightPanel.style.borderLeftColor = '#10b981';
} else if (arch === 'firebase') {
  btn.className = "...bg-orange-500 hover:bg-orange-600";
  rightPanel.style.borderLeftColor = '#f97316';
}

🚀如何取得與使用

這是一款獨立的網頁工具,無需安裝任何軟體,直接透過瀏覽器即可使用:

  1. 開啟生成器頁面

    點擊下方按鈕或直接造訪連結,即可在瀏覽器中開啟完整工具。

  2. 選擇架構 → 輸入需求 → 生成

    按照頁面引導,選好後端架構、輸入功能描述(可搭配 AI 優化)、選定風格後,一鍵生成提示詞。

  3. 複製提示詞貼到 AI 對話

    將生成的提示詞複製後,貼到 ChatGPT、Gemini、Claude 等任何 AI 對話視窗中,即可開始開發你的網頁應用。

讓 AI 幫你寫出完美的開始

做工具的目的,就是把重複的事情變得簡單。
這款生成器濃縮了我在 GAS 與 Firebase 開發上的經驗,希望能夠幫助更多老師與開發者,
用更少的時間把想法變成真實可用的應用程式。

開始使用 →

2026年9月8日 星期二

(New) 史上最無腦!不需要會畫畫,這招讓你 5 分鐘光速上架 LINE 貼圖

 

(New) 史上最無腦!不需要會畫畫,這招讓你 5 分鐘光速上架 LINE 貼圖

從零開始,用 AI 一鍵生成 24 張貼圖並打包上架

🚀 立即開啟貼圖工具

🎬 完整教學影片

💡 軟體由來

一直以來,很多朋友都跟我說想做 LINE 貼圖賣,但一聽到要畫 24 張圖就卻步了。不會畫畫怎麼辦?找人代畫又太貴?

所以我在新版的「貼圖分割打包工具」中,整合了 AI 生圖功能。你只需要上傳一張大頭照,工具就會自動幫你生成 24 張風格統一的貼圖,再幫你分割、去背、打包成可直接上架的格式。

整個過程大約 5 分鐘,完全不需要任何繪畫技巧。

📋 使用詳細教學

1 開啟工具並設定貼圖風格

點擊下方按鈕開啟工具。在「人物特徵描寫」欄位可以留空(之後會用你上傳的照片生成),也可以輸入你想要的動物或主題人物。接著選擇「頭身比」和「核心風格」(如真人照片風格、插畫風格等)。

2 選擇或自訂提示詞主題

工具有預設的主題詞(如「日常」、「社畜」等),你也可以勾選「自訂主題」自行輸入,例如「搞笑版常用詞語」。工具會自動幫你生成 24 個適合的貼圖詞語。

3 複製提示詞並到 Gemini 生圖

確認生成的 24 個詞語沒問題後,把右邊的提示詞複製起來。開啟 Google Gemini(需要登入 Google 帳號),新增對話後貼上提示詞,再上傳你的大頭照,選擇「建立圖像」後送出。Gemini 就會幫你生成一張包含 24 格的貼圖用圖片。

💡 小提醒:在生圖設定中,如果有「圖片外加黑框」的選項,建議勾起來,這樣後續去背效果會更好。
4 下載圖片並上傳至工具

Gemini 生成完成後,點開圖片下載。回到貼圖工具,點擊上傳區域,把剛下載的圖片貼上來。

5 手動分割與調整分割線

上傳圖片後,點選「手動分割」。工具已經預設好 24 格的分割線,你可以放大圖片檢查,確認分割線沒有切到圖案。如有需要可以自行微調。

6 一鍵智慧去背

新版工具內建去背功能!點擊「智慧魔術棒」,再點擊圖片中灰色背景區域,即可自動去背。如果不滿意,可以調整「容差值」再試一次,直到效果理想為止。

7 執行分割與打包

確認去背效果後,點選「執行分割」,工具會自動將 24 張圖分割好。接著設定「主要圖」與「標籤圖」(任選即可),然後點擊「打包」,下載壓縮檔。

8 上架至 LINE 貼圖小舖

到 LINE 貼圖小舖的後台(工具中有「如何上架」的連結可直接導過去),新增一個貼圖項目。填寫標題(英文 + 中文各一組,中文要 10 個字以上)、創作者版權(@你的英文名)、勾選「使用 AI 生成」。重點:將「開始販售」改為「自動販售」,避免審核通過後還需手動操作。最後上傳剛下載的壓縮檔(不用解壓縮),送出申請等審核即可。

⚠️ 重要提醒:「開始販售」一定要改成「自動販售」!如果選手動販售,審核通過後還要再等 2~3 小時才能上架,非常不方便。

🎉 總結

有了這套工具,製作 LINE 貼圖再也不需要畫圖功底。上傳照片、讓 AI 生圖、一鍵去背分割打包,5 分鐘就能搞定。快來試試看,讓你的創意直接上架吧!