---
# System prepended metadata

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

---

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

