動畫與遊戲設計

課程資訊

授課大綱

第一篇 Canvas API

1. canvas API
2. 範例程式下載 HTML JavaScript

第二篇 Canvas基本操作

1. Canvas 基本使用: ex01-00_basic_example.html ex01-01_basic_usages.html
2. 繪製圖形: ex02-01_draw_square.html ex02-02_draw_path.html ex02-03_draw_pen.html ex02-04_draw_line.html ex02-05_draw_arc.html ex02-06_draw_quard.html ex02-07_draw_cubic.html ex02-08_draw_multiple.html ex02-09_draw_path2D.html ex02-10_draw_SVGpath.html
3. 套用樣式與顏色
4. 寫字
5. 使用影像
6. 轉化
7. 合成

第三篇 動畫設計

1. 基礎動畫
2. 進階動畫
3. 影像處理
4. 畫布（canvas）最佳化
5. 結論

動畫設計範例

第四篇 遊戲設計

1. 遊戲開發

期中報告：

1. 以<canvas>畫布完成一個動畫，並錄製動畫執行結果(10秒或完整動作)及HTML與JavaScript程式碼打包上傳ZUVIO。
2. 分組完成並口頭報告。

期末報告：

1. 以<canvas>畫布參考進階動畫或影像處理單元所使用的技術，設計一款遊戲，並將操作過程錄製成動畫影片、簡報及HTML, CSS與JavaScript等相關程式碼及執行所需檔案打包上傳ZUVIO。
2. 各分組需製作簡報並進行口頭報告。

注意：ZUVIO上傳檔案大小限制為100M！

參考連結

1. 只使用 JavaScript 的 2D 打磚塊遊戲
2. Web 遊戲開發介紹
3. canvas動畫|遊戲基礎
4. JavaScript30
5. JavaScript實現Fly Bird小遊戲
6. Foundation HTML5 Animation with JavaScript Book_PDF

動畫基礎

1. 基礎動畫

進階動畫設計 mdn doc連結

1. 進階動畫設計

進階動畫設計