小作品
這裡放可以直接操作的小程式與教學工具。每個作品都獨立放在自己的目錄,方便維護、擴充,也適合 GitHub Pages 靜態部署。
目前收錄
想用這些作品練 Codex,可以先看 Codex 小作品學習路線,照準備、執行、檢查、修正四階段練習。
星際射擊小遊戲
用鍵盤控制飛船左右移動,按空白鍵發射雷射,擊中敵機後累積分數,練習移動、射擊、碰撞與得分。
Game小精靈迷宮:收集星星
控制小精靈穿過迷宮、收集星星,避開巡邏角色,支援鍵盤與手機觸控。
Simulation台灣簡易飛行模擬
以台灣地圖為背景,用方向鍵控制轉彎與高度,A 加速、D 減速,練習鍵盤事件與縮放動畫。
Game777 拉霸遊戲
純娛樂拉霸小遊戲,三個轉輪隨機顯示符號,依照組合計算本次得分與總分。
Tool抽籤程式
輸入名單後隨機抽出結果,可選擇移除已抽中項目並保留抽籤紀錄。
Tool小吃店結帳程式
輸入餐點數量後自動計算小計與總金額,練習網頁表單、資料與結帳邏輯。
Travel Tool野狼 125 遊台灣
從台北出發繞台灣一圈,逐站查看景點、美食、累計里程、時間與花費。
Travel Tool台南美食一日遊
從早餐吃到宵夜,逐站安排台南市區景點、美食、時間與預算。
Travel Tool嘉義美食一日遊
從火雞肉飯吃到文化路夜市,逐站安排嘉義市區景點、美食、時段與預算。
Travel Tool彰化美食一日遊
從爌肉飯吃到鹿港老街與夜市,逐站安排彰化景點、美食、時段與預算。
Animation水墨畫中的四季流轉
用水墨古樹呈現春夏秋冬變化,練習 SVG、CSS 狀態與 JavaScript 時間軸。
Learning ToolOffice Lady 穿搭學習
選場合、換單品、看搭配理由,練習職場穿搭的正式感、親和感與舒適度。
Tool電子白板
提供 7 色粉筆、手寫繪圖與打字功能,可清除白板並下載成圖片。
Picture BookLeo 的學校一天
給 8 歲小朋友看的中英對照插圖童書,介紹孩子在學校的一天。
Picture BookMia 在家的一天
Leo 的 4 歲妹妹在家裡的一天,中英對照短句搭配插圖,適合親子共讀。
Game賓果遊戲
產生 5x5 賓果卡、抽號、自動標記並判斷 Bingo,適合練習基礎遊戲邏輯。
Game打磚塊雙人左右對戰版
左右玩家各守一邊,用球打掉中間磚塊,球穿過防線時對手得分。
Game井字遊戲網路版
建立房間代碼、複製邀請連結,讓兩位玩家輪流下 X 與 O,並累積 X、O 與平手分數。
3D Web3D 摩天輪網頁
用純前端做出旋轉摩天輪場景,包含車廂、支架、速度控制與暫停功能。
Hermes AgentAI 任務代理產生器
輸入任務目標,產生角色設定、任務拆解、檢查規則與可複製 Prompt,適合練習 AI Agent 工作流。
English CAI英文單字照打練習
顯示英文單字、中文解釋、使用方法與例句。使用者照著輸入,系統即時標示字母正確或錯誤。
放置規則
- 一個作品一個資料夾例如
mini-projects/english-cai/。 - 作品可獨立開啟每個作品都有自己的
index.html。 - 優先純靜態使用 HTML、CSS、Vanilla JS,不依賴後端。
適合放什麼
英文照打、單字卡、句型練習、Prompt 練習、iPAS AI 小測驗、Python 概念互動範例,都可以放在這個區域。