# IEH 程式隊 2025第三學季 Workshop001 ## 🎓 程式課程規劃（7堂） ### 📅 上課日期 12/13、12/27、1/3、<span style="color:red; font-weight:bold;">1/10</span>、1/17、1/24、<span style="color:red; font-weight:bold;">1/31</span> ### 🗂️ 課程總覽 | 日期 | 主題 | 任務名稱 | 技能重點 | 小任務成果 | |------|------|-----------|------------|--------------| | **12/13** | 基礎程式複習 | 🔄《程式複習任務》 | 變數、資料型態、事件、DOM 操作、點擊事件 | 做小互動練習，為 AI 專題鋪路 | | **12/27** | 遊戲邏輯進階 | ⏱️《倒數生存挑戰》 | 計時器、遊戲狀態（state）、重來機制、config 設計 | 倒數時間內生存，完成小遊戲 | | **1/3** | AI 聊天入門 | 🤖《我的 AI 角色聊天室》 | Fetch API、prompt 設計、聊天紀錄、UI 顯示 | 可以跟自己設計的 AI 角色聊天 | | <span style="color:red; font-weight:bold;">1/10</span> | 專題企劃 | 🛠️《設計我的 AI / 遊戲專題》 | 專題選題、功能拆解、角色設定、流程圖 | 完成專題企劃表與畫面草圖 | | **1/17** | 專題實作 ① | 🧑‍💻《實作製作日》 | 功能實作、資料結構、事件整合 | 專題核心功能可操作 | | **1/24** | 專題實作 ② | 🧪《發表準備與彩排》 | Debug、UI 優化、例外處理、操作演練 | 專題可完整 Demo，練習介紹作品 | | <span style="color:red; font-weight:bold;">1/31</span> | 專題發表會 | 🌟《我是小小 AI 開發者！》 | 發表、Demo、回饋 | 班級成果發表＋獎項 | ## 線上網頁程式編輯器 https://jsfiddle.net/ ## 網頁程式學習資源 https://www.w3schools.com/ ## 🎮《反應力測驗機》 https://zh.wikipedia.org/zh-tw/%E5%89%B5%E9%80%A0%E4%BA%9E%E7%95%B6 https://www.instagram.com/elizah_leigh_art_writer/reel/C3Vhg5igcDZ/ ![Screenshot 2025-05-17 at 12.40.20 PM](https://hackmd.io/_uploads/HkLtQqSWxg.png) ![Screenshot 2025-05-17 at 12.40.49 PM](https://hackmd.io/_uploads/ByoFmqSWee.png) ### 素材 https://www.soundjay.com/buttons/button-29.mp3 https://hackmd.io/_uploads/HkLtQqSWxg.png https://hackmd.io/_uploads/ByoFmqSWee.png ### HTML ``` <!DOCTYPE html> <html lang="zh-Hant"> <head> <meta charset="UTF-8"> <title>Popcat 點擊遊戲</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>🐱 Popcat 點擊遊戲</h1> <p>得分：<span id="score">0</span></p> <img id="cat" src="https://hackmd.io/_uploads/HkLtQqSWxg.png" alt="popcat" /> <!-- Pop 聲音 --> <audio id="popSound" src="https://www.soundjay.com/buttons/button-29.mp3" preload="auto"></audio> <script src="script.js"></script> </body> </html> ``` ### CSS ``` body { font-family: Arial, sans-serif; text-align: center; background-color: #fff8f0; margin-top: 50px; } img { width: 300px; cursor: pointer; user-select: none; } ``` ### JS ``` const cat = document.getElementById('cat'); const scoreText = document.getElementById('score'); const popSound = document.getElementById('popSound'); let score = 0; const cat1 = "https://hackmd.io/_uploads/HkLtQqSWxg.png"; const cat2 = "https://hackmd.io/_uploads/ByoFmqSWee.png"; // ✅ Preload both images const preload1 = new Image(); preload1.src = cat1; const preload2 = new Image(); preload2.src = cat2; cat.addEventListener('pointerdown', () => { cat.src = cat2; score++; scoreText.textContent = score; popSound.currentTime = 0; popSound.play(); }); cat.addEventListener('pointerup', () => { cat.src = cat1; }); cat.addEventListener('dragstart', e => e.preventDefault()); ``` ## 發想專題項目 🎯 發想原則： ✅ 用得上 HTML/CSS/JS（延續你之前教的基礎） ✅ 與AI相關 ✅ 製作時間約 2–4 堂課可以完成 📆 發表安排提醒： ✅ 每個人都要完成一個自己的專題 ✅ 在 1/10（第四堂課）之前提交你的專題題目 ✅ 在 1/31 分批上台介紹自己的作品 ✅ 完成專題並上台介紹的都有小禮物！