---
# System prepended metadata

title: IEH 程式隊 2025第二學季 Workshop001

---

# 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 分批上台介紹自己的作品
✅ 完成專題並上台介紹的都有小禮物！

