Mini Projects

小作品

這裡放可以直接操作的小程式與教學工具。每個作品都獨立放在自己的目錄,方便維護、擴充,也適合 GitHub Pages 靜態部署。

Projects

目前收錄

想用這些作品練 Codex,可以先看 Codex 小作品學習路線,照準備、執行、檢查、修正四階段練習。

Game

星際射擊小遊戲

用鍵盤控制飛船左右移動,按空白鍵發射雷射,擊中敵機後累積分數,練習移動、射擊、碰撞與得分。

Game

小精靈迷宮:收集星星

控制小精靈穿過迷宮、收集星星,避開巡邏角色,支援鍵盤與手機觸控。

Simulation

台灣簡易飛行模擬

以台灣地圖為背景,用方向鍵控制轉彎與高度,A 加速、D 減速,練習鍵盤事件與縮放動畫。

Game

777 拉霸遊戲

純娛樂拉霸小遊戲,三個轉輪隨機顯示符號,依照組合計算本次得分與總分。

Tool

抽籤程式

輸入名單後隨機抽出結果,可選擇移除已抽中項目並保留抽籤紀錄。

Tool

小吃店結帳程式

輸入餐點數量後自動計算小計與總金額,練習網頁表單、資料與結帳邏輯。

Travel Tool

野狼 125 遊台灣

從台北出發繞台灣一圈,逐站查看景點、美食、累計里程、時間與花費。

Travel Tool

台南美食一日遊

從早餐吃到宵夜,逐站安排台南市區景點、美食、時間與預算。

Travel Tool

嘉義美食一日遊

從火雞肉飯吃到文化路夜市,逐站安排嘉義市區景點、美食、時段與預算。

Travel Tool

彰化美食一日遊

從爌肉飯吃到鹿港老街與夜市,逐站安排彰化景點、美食、時段與預算。

Animation

水墨畫中的四季流轉

用水墨古樹呈現春夏秋冬變化,練習 SVG、CSS 狀態與 JavaScript 時間軸。

Learning Tool

Office Lady 穿搭學習

選場合、換單品、看搭配理由,練習職場穿搭的正式感、親和感與舒適度。

Tool

電子白板

提供 7 色粉筆、手寫繪圖與打字功能,可清除白板並下載成圖片。

Picture Book

Leo 的學校一天

給 8 歲小朋友看的中英對照插圖童書,介紹孩子在學校的一天。

Picture Book

Mia 在家的一天

Leo 的 4 歲妹妹在家裡的一天,中英對照短句搭配插圖,適合親子共讀。

Game

賓果遊戲

產生 5x5 賓果卡、抽號、自動標記並判斷 Bingo,適合練習基礎遊戲邏輯。

Game

打磚塊雙人左右對戰版

左右玩家各守一邊,用球打掉中間磚塊,球穿過防線時對手得分。

Game

井字遊戲網路版

建立房間代碼、複製邀請連結,讓兩位玩家輪流下 X 與 O,並累積 X、O 與平手分數。

3D Web

3D 摩天輪網頁

用純前端做出旋轉摩天輪場景,包含車廂、支架、速度控制與暫停功能。

Hermes Agent

AI 任務代理產生器

輸入任務目標,產生角色設定、任務拆解、檢查規則與可複製 Prompt,適合練習 AI Agent 工作流。

English CAI

英文單字照打練習

顯示英文單字、中文解釋、使用方法與例句。使用者照著輸入,系統即時標示字母正確或錯誤。

放置規則

  • 一個作品一個資料夾例如 mini-projects/english-cai/
  • 作品可獨立開啟每個作品都有自己的 index.html
  • 優先純靜態使用 HTML、CSS、Vanilla JS,不依賴後端。

適合放什麼

英文照打、單字卡、句型練習、Prompt 練習、iPAS AI 小測驗、Python 概念互動範例,都可以放在這個區域。