藉由HTML 5，Canvas函式庫，和JavaScript語言，在本論文中，我們實作出一種網頁遊戲，在這種網頁遊戲中，我們使用Canvas函式庫建造網頁遊戲的圖形，和使用JavaScript語言實現玩網頁遊戲的流程。

Based on HTML 5, library of Canvas and JavaScript language, in this paper, we have implemented a new kind of web game. In the new kind of web game, we use library of Canvas to construct pictures of web game and apply JavaScript language to implement flow of playing web game.

中文摘要 ----------------------------------------------------------------i
英文摘要 ----------------------------------------------------------------ii
誌謝 ------------------------------------------------------------------------iii
目錄 ------------------------------------------------------------------------iv
圖目錄 ------------------------------------------------------------------------vi
一、 緒論--------------------------------------------------------------------1
1.1 研究背景--------------------------------------------------------------- 1
1.2 研究動機--------------------------------------------------------------- 1
1.3 研究方法--------------------------------------------------------------- 2
1.4 研究貢獻--------------------------------------------------------------- 3
1.5 論文架構--------------------------------------------------------------- 3
二、 背景知識--------------------------------------------------------------- 4
2.1 HTML簡介----------------------------------------------------------------4
2.2 HTML5 Canvas簡介--------------------------------------------------------5
2.3 JavaScript -------------------------------------------------------------6
2.4 DOM(文件物件模組)-------------------------------------------------------6
三、 研究方法----------------------------------------------------------------7
3.1 為Canvas封裝JavaScript程式碼--------------------------------------------7
3.2 設計理念----------------------------------------------------------------8
3.3 各元素設計--------------------------------------------------------------8
3.3.1 飛行船繪製--------------------------------------------------------------9
3.3.2 實現飛行船動畫----------------------------------------------------------11
3.3.3 飛行船的旋轉------------------------------------------------------------12
3.3.4 飛行船的淡入淡出(alpha fading)------------------------------------------13
3.3.5 飛行船的移動------------------------------------------------------------14
3.3.6 遊戲狀態機(state machine)-----------------------------------------------16
3.3.7 更新(ud)呈現(rd)重複的循環----------------------------------------------18
3.3.8 FRC物件的屬性-----------------------------------------------------------20
3.3.9 遊戲函數----------------------------------------------------------------22
3.3.10 遊戲物件----------------------------------------------------------------23
四、 應用與問題討論----------------------------------------------------------35
4.1 點陣圖像----------------------------------------------------------------35
4.1.1 銀河背景----------------------------------------------------------------35
4.1.2 起始畫面標頭------------------------------------------------------------36
4.1.3 玩家飛行船--------------------------------------------------------------37
4.1.4 岩石--------------------------------------------------------------------39
4.1.5 飛碟--------------------------------------------------------------------42
4.1.6 粒子--------------------------------------------------------------------43
4.2 聲音--------------------------------------------------------------------46
4.2.1 載入聲音與tile sheet ---------------------------------------------------46
4.2.2 播放聲音----------------------------------------------------------------49
4.2.3 加入Step Timer----------------------------------------------------------50
五、 結論與展望--------------------------------------------------------------52
參考文獻 ----------------------------------------------------------------53

[1] HTML維基百科
https://zh.wikipedia.org/wiki/HTML

[2] Canvas維基百科
https://zh.wikipedia.org/wiki/Canvas_(HTML%E5%85%83%E7%B4%A0)

[3] Keaton Mowery，Hovav Shacham，Pixel Perfect: Fingerprinting Canvas in HTML5
http://modul.repo.mercubuana-yogya.ac.id/modul/files/openjournal/OpenJournnalOfIndustry/canvas.pdf

[4] Pitt, L. F，Watson, R. T，Kavan, C. B，1997，Measuring Information Systems Service Quality: Concerns for a Complete Canvas
https://sci-hub.tw/https://www.jstor.org/stable/249420

[5] JavaScript維基百科
https://zh.wikipedia.org/wiki/JavaScript

[6] Gupta, S., Kaiser, G., Neistadt, D., & Grimm, P，2003，DOM-based content extraction of HTML documents.
https://sci-hub.tw/https://dl.acm.org/citation.cfm?id=775182