# IEH 程式隊 2025第二學季 Workshop001 ## 🎓 程式課程規劃（7堂） ### 📅 時間： 5/17、6/7、6/14、6/21、6/28、7/5、7/12 ### 🗂️ 課程總覽 | 日期 | 主題 | 任務名稱 | 技能重點 | 小任務成果 | |------|------|-----------|------------|--------------| | **5/17** | JS 遊戲邏輯入門 | 🎮《反應力測驗機》<br>（Popdog / Popfrog） | 點擊事件、計分器、DOM 操作、圖片切換 | 每次點擊圖案就加分，做出屬於自己的「點爆遊戲」 | | **6/7** | 表單 + 儲存 | 📓《秘密小筆記本》 | 表單輸入、資料顯示、localStorage | 可儲存、查看、刪除筆記，像迷你記事本 | | **6/14** | 外部資源與 API | 🐱《貓咪許願池》 | Fetch API、非同步資料處理 | 隨機顯示貓圖＋文字，可改主題成「狗狗語錄」等 | | **6/21** | 專題企劃 | 🛠️《設計我的網站或遊戲》 | 專題選題、功能拆解、UI草圖 | 每人完成主題規劃表，畫出要做的頁面 | | **6/28** | 實作製作日 | 🧑‍💻《打造我的創作》 | 整合程式技能，實作專題 | 每人開始製作屬於自己的網頁/遊戲作品 | | **7/5** | 發表準備與彩排 | 🎤《我來介紹我的作品！》1 | 學會介紹作品、補強功能與排錯 | 預演 Demo，練習怎麼「說出我做了什麼」 | | **7/12** | 正式發表會 | 🌟《我是小小開發者！》2 | 發表與回饋、成果展示 | 班級 Demo 活動，頒發「最佳創意獎」等 | ## 線上網頁程式編輯器 https://jsfiddle.net/ ## 🎮《反應力測驗機》 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（延續你之前教的基礎） ✅ 製作時間約 2–4 堂課可以完成 ✅ 可以有創意，也可以「模仿改編」 📆 發表安排提醒： ✅ 每個人都要完成一個自己的專題 ✅ 在 6/21（第四堂課）之前提交你的專題題目 ✅ 在 7/12 分批上台介紹自己的作品 ✅ 完成專題並上台介紹的都有小禮物！