HTML5網頁遊戲開發與測試實務
Practice of HTML5 Game Development and Testing
| 節 | 週四 |
|---|---|
5 13:20–14:10 | HTML5網頁遊戲開發與測試實務 CS105（光復） 3 節連堂 |
6 14:20–15:10 | |
7 15:30–16:20 |
* 根據陽明交大上課時間表所列
本課程，主要目地在於讓選課同學，透過【從中學(learn by doing)】教學模式，學習HTML5網頁遊戲開發實務，以期能夠逐步了解並掌握日漸盛行的各類網頁技術。本課程預計涵蓋的範圍與達成目標, 大致可簡略分成以下幾項: 1.學會靈活運用HTML5 、CSS3、JavaScript 等技術, 以進行HTML5網頁遊戲開發與測試 2. 本學期課程所規劃的主力(與輔助)開發技術 * 主力技術: Canvas for Game Development *輔助技術: DOM/CSS3 for Game Development 3. 透過網路專案的進行與團隊經驗分享, 提升修課同學對「互動網站開發技術」的認知與技能.
選課建議: 有修過計算機概論, 並對動態網頁(遊戲)系統實務開發有興趣者
無備註
1）.原則上, 採實體教室現場教學 (光復校區, 資訊中心, 1F_訓練電腦教室) * 第2 周以後的課程, 將增加 Ms-Teams 平台的教學課程錄影 (可作為複習之用) * 備註: 如遭逢類似 COVID-19 疫情, 將改成 [遠距視訊教學] 2). 課程學習環境之電腦硬體暨軟體 -- 教育單位可免費使用 (或, 註冊+免費使用) ---- 2.1 自行準備用戶電腦及系統軟體 - Windows 11 (or macOS) 平台 * 課程期間也可, 使用電腦教室的電腦 (Windows 11) 2.2 電腦軟體系統暨應用軟體 A. Visual Studio Code -- 網頁開發/編輯平台 B. 網路系統篇 (網頁平台) - Docker Desktop + Docker Compose + LAMP
底下 是約略佔比 (必要時, 學期末, 將視教學狀況, 再略為調整). A. 作業評量 (佔比 40%) - 4 次作業 B. 考試 (25%) -僅期末考一次 (無期中考). C. 學期專案 (30%) : 口頭報告 (20%) + 書面報告 (10%) D. 其他 (5%) -綜合學習表現
1. HTML5基礎篇 (2/2)
簡介Canvas 多媒體播放技術
- 講授：
- 2
- 示範：
- 1
- 實作：
- 0
- 其他：
- 0
3.遊戲製作 (Part 1)
* CSS3 網頁小遊戲 * 趣味互動式個人履歷(jQuery應用)
- 講授：
- 6
- 示範：
- 3
- 實作：
- 0
- 其他：
- 0
4.遊戲製作 (Part 2)
使用 HTML5 引擎(Quintus)製作遊戲
- 講授：
- 12
- 示範：
- 6
- 實作：
- 0
- 其他：
- 0
5.遊戲推廣
A. 連結Facebook API B. 透過Google Drive 上架遊戲
- 講授：
- 4
- 示範：
- 2
- 實作：
- 0
- 其他：
- 0
1. HTML5基礎篇 (1/2)
HTML5/CSS3/JavaScript 複習
- 講授：
- 8
- 示範：
- 4
- 實作：
- 0
- 其他：
- 0
| 週次 | 主題 |
|---|---|
| 第 1 週 | 課程導論 時數：[2026-09-10]陳昌盛(3.00) |
| 第 2 週 | 網頁技術基礎篇（HTML5基礎, 1/3） 時數：[2026-09-17]陳昌盛(3.00) |
| 第 3 週 | 網頁技術基礎篇（CSS3 應用,2／3) 時數：[2026-09-24]陳昌盛(3.00) |
| 第 4 週 | 網頁技術基礎篇（CSS3 網頁小遊戲, 3／3) ** Hw#01 時數：[2026-10-01]陳昌盛(3.00) |
| 第 5 週 | 網頁技術中階篇（常用的觸發事件與元件） - [1／6] 時數：[2026-10-08]陳昌盛(3.00) |
| 第 6 週 | 網頁技術中階篇（多媒體播放 – Canvas 基礎） - [2／6] 時數：[2026-10-15]陳昌盛(3.00) |
| 第 7 週 | 網頁技術中階篇 ( AJAX/JSON vs Fetch API) – [3/6] == Hw#02 時數：[2026-10-22]陳昌盛(3.00) |
| 第 8 週 | 網頁技術中階篇 (網頁資料儲存) – [4/6] 時數：[2026-10-29]陳昌盛(3.00) |
| 第 9 週 | 網頁技術中階篇 (學習使用jQuery) - [5/6] 時數：[2026-11-05]陳昌盛(3.00) |
| 第 10 週 | 網頁技術中階篇-趣味互動式個人履歷 -[6/6] === Hw#03 時數：[2026-11-12]陳昌盛(3.00) |
| 第 11 週 | 網頁技術進階篇 – 認識HTML5 遊戲引擎(簡介) [ 1/5] 時數：[2026-11-19]陳昌盛(3.00) |
| 第 12 週 | 網頁技術進階篇 –遊戲製作 (工具篇: 2D 遊戲地圖) [2/5] *Tiled Map Editor 時數：[2026-11-26]陳昌盛(3.00) |
| 第 13 週 | 網頁技術進階篇 –遊戲製作 (倉庫番推寶相) [3/5] === Hw#04 * 使用 Quintus 遊戲引擎 時數：[2026-12-03]陳昌盛(3.00) |
| 第 14 週 | 網頁技術進階篇 –遊戲製作 (遊戲推廣—透過Facebook連動網路應用) [4/5] 時數：[2026-12-10]陳昌盛(3.00) |
| 第 15 週 | 網頁技術進階篇 –遊戲製作 (遊戲上架 – 透過Google Drive ) [5/5] 時數：[2026-12-17]陳昌盛(3.00) |
| 第 16 週 | 學期考試 (筆試) 時數：[2026-12-24]陳昌盛(3.00) |
教科書列表： * 書名: “HTML5 跨平台遊戲設計不設限: 從入門到超人氣遊戲的修練實戰” * 作者: 白乃遠等 (2015.05 初版, 碁峯資訊) == 自製講義或課本之參考書目： * HTML 自學網站 (URL), https://www.w3schools.com * 陳惠貞(2017), “跨裝置網頁設計 : HTML5、CSS3、JavaScript、jQuery、Bootstrap、jQuery Mobile”, 碁峰資訊
- 地點
- 光復校區, 資訊館 327室 (開課老師辦公室)
- 時間
- A. Mon 11:00 - 12:00 B. Thu 11:00 - 12:00
- 聯絡方式
- *E-mail: jcs.chen@nycu.edu.tw *Phone: x31721