以生成式AI設計網頁小遊戲
===
> [name=George YEH]
> [time=, March 26, 2025 10:10AM - 12:00PM]
###### tags: `AI`, `GenAI`, `ChatGPT`, `html`, `css`, `javascript`

:::info

:bulb: 運用ChatGPT等AI工具設計網頁小遊戲，包含AI工具使用、網頁設計、javascript程式語言等初體驗。
:bulb: 本課程將使用生成式AI工具。可以先註冊[OpenAI ChatGPT](https://chat.openai.com/), 或 [Microsoft Copilot(建議使用Edge瀏覽器)](https://copilot.microsoft.com/)

另外，也將使用
* CodePen: 非常好用的**所見即所得**的線上寫程式服務(可以先註冊), https://codepen.io/pen/ (online/ge)
* W3Schools: 線上網頁教學平台, https://www.w3schools.com/

:::

#### :small_blue_diamond: 地點: 大甲高中
#### :small_blue_diamond: 日期: 2025/03/26 10:10AM - 12:00PM
#### :small_blue_diamond: 講師: 靜宜大學 資訊管理學系 [葉介山 副教授兼資訊長](https://www1.pu.edu.tw/~jsyeh/DRYEH/)

---
# ℹ 網址及檔案

* [以生成式AI設計網頁小遊戲](https://hackmd.io/1aqmmIh7THa_qnBYfT0PuA), https://bit.ly/0326aigame

* [你該知道的生成式AI(pptx)](https://puo365-my.sharepoint.com/:p:/g/personal/jsyeh_o365_pu_edu_tw/ETXG9oO4Lb1Jj34R_MTZmeMBeRT07faA9W_fFjb0SHojQg), https://bit.ly/0326ai, (驗證碼:20250326)

* [HTML, CSS, JavaScript 簡介](https://hackmd.io/@b73201020/HyhnmuAh1l)

---

# ℹ 生成式AI

### 1. 什麼是生成式AI(Generative AI, GenAI)?
* 由機器產生==複雜而有結構==的物件

### 2. AI生成內容(AI generated content)有哪幾類?
- ==Informative content (資訊性內容)==
* factual information, explanations, or specific topic analysis
* Based on clear rules and data, easier to process and generate

- ==Creative content (創意性內容)==
* Stories, poems, artwork, music, or design
* Requires higher levels of creativity and emotional expressions

### 3. 生成式AI能做什麼?
* 文本生成 Text generation
* 影像生成 Image generation
* 音樂生成 Music generation
* 語音生成 Voice generation
* 影片生成 Video generation
* 程式生成 Code generation
* 設計生成 Design generation

### 4. 生成式AI"還不能"做什麼?
* 常識推理 Common-sense reasoning (進化中)
* 深入理解上下文 Understanding context deeply (進化中)
* 即時適應與學習 Real-time adaptation and learning (進化中)
* 倫理和道德推理 Ethical and moral reasoning
* 創造力和獨創性 Creativity and originality
* 情緒智商 Emotional intelligence
* 自我覺察 Self-awareness
* 跨域泛化 Cross-domain generalization
* 長期規劃與目標設定 Long-term planning and goal setting
* 真正的同理心與理解 Genuine empathy and understanding

### 5. 熱門的AI文字生成工具?
* ==[OpenAI ChatGPT](https://chat.openai.com/)==
*  [Android手機 (請至 Google Store下載)](https://play.google.com/store/apps/details?id=com.openai.chatgpt&hl=zh-TW)
*  [iPhone手機(請至 App Store下載)](https://apps.apple.com/tw/app/chatgpt/id6448311069)
* ==[Microsoft Copilot(建議使用Edge瀏覽器)]
(https://copilot.microsoft.com/)==
*  [Android手機 (請至 Google Store下載)](https://play.google.com/store/apps/details?id=com.microsoft.copilot&hl=zh-TW)
*  [iPhone手機 (請至 App Store下載)](https://apps.apple.com/hk/app/microsoft-copilot/id6472538445)
* [Google Gemini](https://gemini.google.com/app)
* [Anthropic Claude](https://claude.ai/)

### 6. 熱門的AI圖像生成工具?
* [OpenAI DALL·E](https://openai.com/dall-e-3)
* ==[Microsoft Bing Image Creator](https://www.bing.com/images/create)==
* [Midjourney](https://www.midjourney.com/)
* [Adobe Firefly](https://firefly.adobe.com/generate/images)
* ==[Moonshot](https://moonshot.today/)== (透過行動條碼加入LINE好友)

---

# ℹ HTML, CSS, JavaScript 簡介
slide: https://hackmd.io/@b73201020/HyhnmuAh1l

---

# 🗂️ 網頁小遊戲範例
* [井字遊戲](https://codepen.io/b73201020/pen/RNwJqgV)
* [黑白棋（Reversi）](https://codepen.io/b73201020/pen/yyLEQaQ)
* [2048](https://codepen.io/b73201020/pen/wBvXQXx)
* [翻牌記憶遊戲](https://codepen.io/b73201020/pen/yyLEGRa)
* [打地鼠](https://codepen.io/b73201020/pen/zxYaeOR)
* [Memory Blocks](https://codepen.io/b73201020/pen/yyLEQLx)

---

# 📄 練習
1. 使用生成式AI 如:chatGPT 生成網頁遊戲
* 使用適當的提示:

     請用HTML、CSS、JavaScript設計手機或平板上可以使用的網頁小遊戲[遊戲名稱]

2. 複製程式碼到 codepen.io/pen
3. 測試程式執行狀況
4. 調整程式
4.1 利用chatGPT修正或調整
4.2 或直接修改HTML、CSS、JavaScript

## 🎮 chatGPT 生成網頁遊戲範例
* **打地鼠**
* [chatGPT範例]( https://chatgpt.com/canvas/shared/67e1841a97308191a2a5399e2dd7e977)
* [codepen範例](https://codepen.io/b73201020/pen/zxYaeOR)
* **prompt:** "請用HTML、CSS、JavaScript設計手機或平板上可以使用的網頁小遊戲"打地鼠"。有分數及配樂。"
* **換圖片**，使用 https://www1.pu.edu.tw/~jsyeh/DRYEH/assets/images/dsc07458-withoutbackground-2-640x640.jpeg
* **換音樂**，使用 https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3
* **翻牌記憶遊戲**
* [chatGPT範例](https://chatgpt.com/share/67e175b1-b4c8-8003-8065-31c3f559575e)
* [codepen範例](https://codepen.io/b73201020/pen/yyLEGRa)

* **黑白棋**
* [chatGPT範例](https://codepen.io/b73201020/pen/pvoZVMb)