✏️ 大家一起學習 ⭐ 互相鼓勵 🎓 課堂時光 💡 創意無限 🌟 每個作品都很棒
做完遊戲貼上來,全班即時可以玩・點讚・聊天
連線中... 0 件作品
載入中...
⏳ 載入作品中...

提交你的遊戲作品

把 Claude 幫你生成的 HTML 程式碼貼在下方,作品就會即時出現在展示牆上,全班都能點進去玩!

1
在 Claude 用 Prompt 做好遊戲,等右邊 Artifacts 出現
2
點 Artifacts 右上角的 ,選「複製程式碼」
3
填入你的名字和遊戲名稱,把程式碼貼進來,送出!

🎮 基本問答 Prompt 範本

請用 HTML + CSS + JavaScript 幫我做一個互動小遊戲: 遊戲類型:猜謎問答 主題:[例:台灣景點 / 台語歌曲 / 家鄉美食 / 節氣知識] 題目數量:5 題 要求: - 每題有 4 個選項,答對顯示鼓勵,答錯顯示正確答案 - 最後顯示分數和一句鼓勵的話 - 畫面要好看,文字夠大 - 不需要任何外部連結,全部自己完成

🗺 台灣景點猜謎

請用 HTML + CSS + JavaScript 做一個台灣景點猜謎遊戲,5 題 4 選 1。 包含九份、日月潭、太魯閣、墾丁、阿里山等景點。 答對時顯示該景點特色一句話,最後給分數和評語。 字體大、顏色好看。

🎵 台語老歌猜歌名

請用 HTML + CSS + JavaScript 做一個台語老歌猜謎遊戲。 玩法:顯示歌詞的一段,猜歌名(4 選 1)。 歌曲:愛拼才會贏、望春風、港都夜雨、黃昏的故鄉、燒肉粽。 溫暖懷舊的橘色配色,字體大,答對時顯示歌曲年代。

🍜 台灣美食大考驗

請用 HTML + CSS + JavaScript 做一個台灣美食知識問答遊戲,5 題 4 選 1。 題目:珍珠奶茶發源於哪個城市?台南最有名的早餐是什麼? 用食物的暖色系(橘、黃、紅),字體大,答對時給有趣反應。 最後根據分數給「美食達人」等級評語。

🌿 節氣養生知識

請用 HTML + CSS + JavaScript 做一個節氣養生知識遊戲,5 題 4 選 1。 題目:冬至要吃什麼?清明節習俗是?夏至養生重點是? 清新綠色系配色,答對後說明該節氣的養生小知識。字體清楚易讀。

🔤 台語詞彙猜猜看

請用 HTML + CSS + JavaScript 做一個台語詞彙趣味遊戲,5 題 4 選 1。 玩法:顯示台語詞彙,猜華語意思。 詞彙:蓋勢、揣無、足讚、歹勢、橋(口語義)。 活潑藍綠色系,答對後顯示該詞的例句,勾起童年記憶。

🌍 世界地理小挑戰

請用 HTML + CSS + JavaScript 做一個世界地理問答遊戲,5 題 4 選 1。 題目:日本首都是?艾菲爾鐵塔在哪城市?尼加拉瀑布在哪兩國交界? 清爽藍色系,答對後顯示該地點有趣小知識。字體夠大按鈕好按。

🧘 健康常識問答

請用 HTML + CSS + JavaScript 做一個健康常識小測驗,5 題 4 選 1。 題目:每天建議喝多少水?哪種運動對膝蓋最友善?飯後多久才能運動? 清新綠白配色,答對後顯示健康小提醒,最後給「健康達人等級」。

📅 台灣歷史大事記

請用 HTML + CSS + JavaScript 做一個台灣歷史知識問答遊戲,5 題 4 選 1。 題目:台灣光復是哪年?第一條高速公路何時通車?九二一大地震哪年? 沉穩深藍色系,答對後顯示歷史背景說明,結束時根據分數給評語。

🏛 台灣諺語猜猜看

請用 HTML + CSS + JavaScript 做一個台灣俗諺語問答遊戲,6 題 4 選 1。 玩法:顯示諺語上半句,選出下半句。 諺語:「一樣米飼百樣人」「好野人怕病,窮人怕冬」「囝仔人有耳無喙」等。 溫暖米黃色系,答對後顯示諺語的生活道理,字體大且清楚。

🌺 台灣花卉辨識

請用 HTML + CSS + JavaScript 做一個台灣花卉知識問答,5 題 4 選 1。 以文字描述花的外觀特徵(顏色、形狀、香氣),讓玩家猜花名。 花種:梅花、蝴蝶蘭、台灣百合、野薑花、扶桑花。 清新粉綠配色,答對後顯示該花的花語和小知識。字體清楚。

🃏 成語配對記憶遊戲

請用 HTML + CSS + JavaScript 做一個成語配對記憶遊戲。 畫面有 12 張翻面的牌(6 對),點開兩張配對成功就消除。 成語:守株待兔、亡羊補牢、畫蛇添足、半途而廢、一石二鳥、坐井觀天。 要有翻牌動畫,顯示翻牌次數,完成後顯示花樣慶祝效果。

🍱 台灣小吃配對

請用 HTML + CSS + JavaScript 做一個台灣小吃與城市配對記憶遊戲。 16 張牌(8 對):小吃名稱 配 對應城市(例:棺材板↔台南、大腸包小腸↔台灣各夜市)。 牌面向下,翻兩張相同的配對成功就消除,記錄翻牌次數。 暖橘食物色系,翻牌有滑順動畫,完成後顯示幾次翻牌完成。

🀄 注音符號配對

請用 HTML + CSS + JavaScript 做一個注音符號配對遊戲。 16 張牌(8 對):注音符號 配 對應的字(例:ㄅ↔波、ㄆ↔坡)。 點開兩張,注音與對應字配成功就消除,顯示翻牌次數與完成時間。 活潑黃藍配色,牌要夠大(字體 32px 以上)。

🌍 國旗配國家

請用 HTML + CSS + JavaScript 做一個國旗與國家名稱配對記憶遊戲。 用 emoji 旗幟代替圖片,8 對(16 張牌):旗幟 emoji 配 國家名稱。 國家:日本🇯🇵、美國🇺🇸、法國🇫🇷、英國🇬🇧、韓國🇰🇷、德國🇩🇪、澳洲🇦🇺、加拿大🇨🇦。 配對成功後顯示該國家一句有趣小知識,計算完成時間。

🐹 打地鼠遊戲

請用 HTML + CSS + JavaScript 做一個打地鼠遊戲。 畫面有 9 個洞排成 3×3,地鼠(用 🐹 emoji)隨機從洞裡出現,點擊得 1 分。 計時 30 秒,地鼠出現時間約 1 秒,結束後顯示總分與評語(例:「手腳真靈活!」)。 田園色系配色,字體大,按鈕區域要夠大(適合用手指點)。 不需要任何圖片,全用 emoji 和 CSS 完成。

🍎 接水果遊戲

請用 HTML + CSS + JavaScript 做一個接水果遊戲(用 Canvas 或純 DOM)。 水果(🍎🍊🍇🍓🍋)從畫面上方隨機落下,用滑鼠左右移動籃子接住。 每接到一顆得 1 分,掉了 3 顆就遊戲結束,顯示最終分數與評語。 手機也要能玩(支援手指左右滑動或觸控按鈕),顏色鮮豔字體大。

🦟 拍蚊子遊戲

請用 HTML + CSS + JavaScript 做一個拍蚊子反應遊戲。 蚊子(🦟)隨機飛到畫面各處,停留 1.5 秒後消失,點擊時拍到得 1 分。 畫面最多同時有 3 隻蚊子,計時 30 秒後結算。 加入拍到時的音效文字效果(顯示「啪!」「打到了!」),夜晚深色背景,字體大。

⚡ 反應速度測試

請用 HTML + CSS + JavaScript 做一個反應速度測試遊戲。 畫面顯示一個大圓圈,隨機 1~4 秒後變綠色,玩家要立刻點擊。 測試 5 次,計算每次反應時間(毫秒),最後顯示平均值和等級評語。 等級:200ms 以下「閃電俠!」、200-400ms「反應不錯!」、400ms 以上「繼續加油!」 簡潔大方配色,字體大,操作只有一個按鈕。

🎯 點點點!準確度挑戰

請用 HTML + CSS + JavaScript 做一個「點擊準確度」挑戰遊戲。 圓形目標隨機出現在畫面各處,大小逐漸縮小(從大到小),點擊得分(越小越高分)。 每關 10 個目標,目標消失前限 2 秒,錯過或點偏不得分。 顯示分數和準確率,結束後依準確率評語(「神射手!」「再練練!」)。字體大清楚。

👵 阿嬤的一天

請用 HTML + CSS + JavaScript 做一個台灣農村互動故事遊戲。 主角是一位住在鄉下的阿嬤,玩家幫她做每個時段的選擇(早上、中午、下午)。 每個選擇帶出不同溫馨故事段落,至少 3 個分支,每個結尾都很溫暖感人。 畫面用暖色系(米黃、橙、棕),大字體,每個選項按鈕要夠大。 故事中穿插台灣鄉村描述(田野、廟會、市場),用 emoji 點綴場景。

🌿 健康生活選擇故事

請用 HTML + CSS + JavaScript 做一個「健康生活選擇」互動故事遊戲。 故事場景:一天的生活,玩家選擇早餐(稀飯還是炸物)、活動(散步還是躺著)等。 每個選擇影響主角的「精神值」「健康值」,最後顯示今日健康指數圖表。 溫馨綠色系,字體大,故事語氣正向鼓勵,結尾附上對應的健康小建議。

🗺 台灣環島旅行故事

請用 HTML + CSS + JavaScript 做一個台灣環島旅行互動故事。 玩家從台北出發,每一站選擇要去哪個城市(北、中、南、東各一站)。 每個城市有 2 個活動可選,展開對應的短故事和在地美食推薦。 最後根據走過的路線顯示「你的環島地圖」和旅行小結語。 清爽旅遊風配色,字體大,每一頁故事不超過 4 行。

👨‍🍳 料理冒險故事

請用 HTML + CSS + JavaScript 做一個「料理冒險」互動故事遊戲。 主角要煮一道拿手菜招待家人,玩家選擇食材、烹調方法、調味。 不同的組合產生不同的料理結果(成功/失敗/意外美味),共至少 4 種結局。 結局顯示實際的料理做法小提示,溫暖食物色系,字體大,操作只有選項按鈕。

🍲 食譜步驟排序

請用 HTML + CSS + JavaScript 做一個食譜步驟排序遊戲。 以「滷肉飯」為例,列出 6 個步驟(打亂順序),玩家用點擊上下箭頭排出正確順序。 確認後對比正確答案,標示哪幾步對哪幾步錯,全對時播放慶祝動畫。 食物暖色系,字體大,步驟文字清楚,操作簡單直覺。 也可以加一道選:玩家先選要做哪道菜(滷肉飯 / 薑母鴨 / 麻油雞)再開始。

🗓 台灣歷史時間軸

請用 HTML + CSS + JavaScript 做一個台灣歷史事件排序遊戲。 給出 6 個台灣大事(打亂時間順序),玩家用點擊選擇按時間先後排列。 事件:台灣光復(1945)、第一條高速公路通車(1978)、解嚴(1987)、九二一大地震(1999)、第一次政黨輪替(2000)、加入WTO(2002)。 確認後顯示正確時間軸和各事件說明,答錯的標紅色,全對給滿分慶祝。字體大。

🎱 台灣生活賓果

請用 HTML + CSS + JavaScript 做一個台灣生活主題賓果遊戲(4×4 格)。 格子內放:廟會、夜市、珍奶、便當、機車、颱風、芒果冰、捷運、稻田、檳榔樹、廟口、雨傘、茶葉蛋、鐵皮屋、紅豆湯、電線桿。 系統每次隨機唸出一個項目,玩家點擊格子,連成一線(橫直斜)就 BINGO! 得賓果時要有慶祝動畫和音效文字,活潑配色,字體清楚大方。

🔢 數字拼圖(15拼圖)

請用 HTML + CSS + JavaScript 做一個 4×4 數字滑動拼圖遊戲(15 拼圖)。 15 個數字方塊打亂,玩家點擊空格旁邊的方塊讓它滑過去,排回 1-15 的正確順序。 顯示移動步數,完成後根據步數給評語(100步以內「高手!」200步以內「不錯!」)。 方塊要夠大(格子至少 80px),字體大,配色清爽,支援手機觸控。

🧩 成語填字遊戲

請用 HTML + CSS + JavaScript 做一個成語填字遊戲。 顯示一個成語,其中一個字變成「?」,下方有 4 個選項讓玩家選出正確的字。 共 8 題,成語:一石二鳥、虎頭蛇尾、半途而廢、守株待兔、杯弓蛇影、畫龍點睛、亡羊補牢、對牛彈琴。 答對後顯示該成語的故事來源(一兩句話),沉穩書卷感配色,字體大。

🏓 打磚塊(學成語)

請用 HTML + CSS + JavaScript(Canvas)做一個打磚塊遊戲。 磚塊上寫著成語(守株待兔、亡羊補牢、畫蛇添足、半途而廢、一石二鳥、坐井觀天)。 打掉磚塊時顯示該成語的解釋(畫面角落 2 秒)。 滑鼠或手指左右移動擋板,球碰底部失去一條命(共 3 條),全部打掉顯示學到的成語清單。 畫面用大字體,擋板要夠寬。

🐛 貪吃蛇收菜遊戲

請用 HTML + CSS + JavaScript(Canvas)做一個農場主題貪吃蛇遊戲。 蛇是一條可愛毛毛蟲,地圖上散落台灣蔬果(🥦🍠🥕🌽🥬),吃了就長大得分。 控制方式:電腦用鍵盤方向鍵,手機用畫面上的上下左右按鈕(按鈕要夠大)。 顯示分數,撞到邊界或自身就遊戲結束,結算「今日農場收成清單」。 田園綠色系,字體大,速度不要太快。

🏃 跳跳小人(無限跑酷)

請用 HTML + CSS + JavaScript(Canvas)做一個台灣風格無限跑酷遊戲。 小人在台灣街道上奔跑,地上有障礙物(機車、攤車、水溝蓋),點擊畫面或按空白鍵跳躍。 場景元素用 emoji 表示(🛵🏮🍢),速度隨分數加快。 碰到障礙物遊戲結束,顯示跑了多遠(公尺)和場景名稱(夜市街、廟口)。 畫面清楚,操作只要一個按鍵/點擊。

🏓 乒乓對打

請用 HTML + CSS + JavaScript(Canvas)做一個雙人對打乒乓球遊戲。 畫面左右各一個擋板,一顆球在中間反彈。 玩家1 用 W/S 鍵,玩家2 用上下鍵(或單人對 AI)。 先得 5 分獲勝,顯示比分,進球有得分動畫效果。 簡潔黑白配色,擋板夠大,球速適中,操作說明寫在畫面上。

🌱 虛擬種菜養成

請用 HTML + CSS + JavaScript 做一個虛擬種菜養成小遊戲。 玩家選擇要種的蔬菜(番茄🍅、地瓜🍠、空心菜、玉米🌽)。 每隔幾秒可以按一次「澆水」按鈕,澆水後植物成長一個階段(種子→幼苗→開花→結果)。 成長進度用進度條和 emoji 表示,收成後顯示「今日收穫!」和植物小知識。 農村溫馨配色,澆水按鈕超大,字體大,適合一個人慢慢玩。

🎣 台灣釣魚遊戲

請用 HTML + CSS + JavaScript 做一個台灣風格釣魚小遊戲。 畫面是一個池塘,魚(🐟🐠🐡)在水中游動,點「拋竿」後等待。 魚咬鉤時畫面會抖動提示,要趕快點「收竿!」才能釣起來。 不同魚有不同分數(吳郭魚 1 分、鯉魚 2 分、虱目魚 3 分),釣到後顯示魚的名稱與有趣介紹。 60 秒計時,結束後顯示釣魚成果「今日漁獲」清單。藍綠色水景,字體大。

🐠 養魚缸遊戲

請用 HTML + CSS + JavaScript(Canvas)做一個虛擬養魚缸遊戲。 畫面是一個水族箱,有 3 條魚在游動,魚用幾何圖形或 emoji 表示。 玩家每隔一段時間要按「餵食」(灑飼料動畫),魚會游過來吃。 長時間沒餵食魚會變小(餓了),按時餵食魚會長大、增加數量。 清澈藍色水景,魚的游動動畫要流暢,字體大,適合靜靜把玩。

🌸 虛擬花園澆水

請用 HTML + CSS + JavaScript 做一個虛擬花園養成遊戲。 花園有 6 個花盆,玩家選擇要種哪種花(玫瑰🌹、向日葵🌻、蘭花🌸、梔子花、茉莉、牡丹)。 點擊花盆澆水,花會逐漸生長(種子→發芽→開花),開花後顯示花語和保養小知識。 每朵花的成長速度不同,需要策略管理。清新花園配色,花朵用 CSS 動畫呈現,字體大。

🎨 數字著色遊戲

請用 HTML + CSS + JavaScript 做一個數字著色遊戲(Color by Number)。 圖案是一朵台灣野花(用 SVG 方塊或格子組成),每個區塊標有數字(1-8)。 下方有數字對應的顏色按鈕,點顏色再點區塊就上色。全部填色後顯示完整圖案和讚美語。 顏色按鈕要夠大(最小 50px),標示清楚,支援手機觸控。 全對時有慶祝動畫。

✏️ 自由塗鴉畫板

請用 HTML + CSS + JavaScript(Canvas)做一個簡單的自由塗鴉畫板。 功能:8 種顏色選擇、3 種筆刷大小、橡皮擦、清除全部、下載圖片。 畫布佔畫面大部分,滑鼠拖曳或手指觸控都能畫。 顏色按鈕大且清楚(至少 50px),工具列排在畫布下方,不遮到畫面。 設計感清爽,字體大,適合盡情創作。

🧶 點陣像素畫

請用 HTML + CSS + JavaScript 做一個像素點陣畫遊戲。 畫布是 16×16 的格子,點擊格子上色,再點一次清除。 提供 12 種顏色選擇,可以畫出像素風格的圖案(教學主題:畫一顆台灣水果)。 右側顯示參考圖(用格子示範怎麼畫草莓),玩家模仿或自由創作。 格子夠大(至少 28px),顏色按鈕大,有清除全部和下載功能。

做完想修改?這樣說最省 token:

  • 「把背景換成藍色系」
  • 「答對的時候加一個慶祝動畫」
  • 「字體再放大一點,至少 20px」
  • 「把第三題改成關於高雄的景點」
  • 「加上計時器,每題 30 秒」
  • 「按鈕改大一點,最小寬度 120px」
  • 「加上手機觸控支援」
  • 「遊戲結束後可以按重新開始」

🔧 老師管理

清除全部作品(每堂課結束後使用)

清除聊天記錄

需先在上方輸入管理員密碼

API 狀態

檢查中...

💬 課堂聊天室

即時
歡迎來到課堂聊天室!一起分享學習心得 🎉