目錄
第1章 遊戲設計與HTML5
1.1 HTML5簡介................................... 2
HTML是什麼.................................... 2
HTML的缺陷.................................... 3
HTML5的發展................................... 3
HTML5全新體驗................................. 4
HTML5特質.................................... 5
HTML5與遊戲設計............................... 6
1.2 HTML5開發環境的建立............................ 6
編輯工具Notepad ............................. 7
安裝Notepad ................................ 9
1.3 HTML5測試與調試.............................. 14
安裝Firefox瀏覽器............................ 15
安裝Selenium IDE............................ 16
應用Selenium IDE............................ 18
1.4 範例:HelloWorld............................ 21
範例說明..................................... 21
重點技術..................................... 21
代碼段....................................... 23
程序代碼解析.................................. 23
第2章 HTML5基礎
2.1 素................................... 26
什麼是素............................... 26
素圖解................................ 26
實際應用..................................... 28
2.2 內容標記方法................................. 31
文素.................................. 32
素................................... 34
2.3 多媒體應用................................... 35
.................................... 35
.................................... 36
................................... 37
.................................... 37
補充說明:WebVTT格式.......................... 38
.................................... 38
2.4 Web應用程序................................. 39
................................. 39
................................... 39
................................... 40
.................................... 41
41
第3章 CSS3應用
3.1 CSS基礎知識................................. 44
CSS是什麼.................................... 44
CSS3閃亮登場................................. 44
CSS基本語句.................................. 45
引用CSS..................................... 47
實戰CSS..................................... 49
3.2 文字與圖片................................... 49
文字樣式..................................... 50
圖片........................................ 55
盒子模式(box model).......................... 58
3.3 表格與窗體................................... 61
表格........................................ 61
窗體........................................ 63
第4章 CSS3網頁小遊戲
4.1 制作遊戲場景................................. 67
遊戲策劃..................................... 67
HTML結構.................................... 68
CSS樣式..................................... 70
4.2 制作地鼠和死亡動畫............................ 73
地鼠布局方式.................................. 73
地鼠死亡動畫的觸發原理.......................... 73
動畫屬性Animation............................ 74
CSS樣式..................................... 74
4.3 制作得分動畫................................. 83
得分動畫制作原理............................... 83
漸變屬性Transition........................... 83
CSS樣式..................................... 84
4.4 制作關卡時間條與遊戲結束畫面..................... 85
關卡時間條動畫原理............................. 85
CSS樣式..................................... 86
第5章 常用的觸發事件與組件
5.1 鼠標單擊事件監聽.............................. 90
JavaScript提要.............................. 90
鼠標單擊事件.................................. 92
5.2 鍵盤按鍵事件監聽.............................. 96
按下一個鍵(onKeyDown)........................ 96
按住(keyPress)與放開(KeyUp)................ 98
5.3 網頁錨點跳轉................................. 98
認識URL地址格式............................... 98
認識hash值................................... 99
5.4 瀏覽器檢測.................................. 100
認識navigator.............................. 100
實踐一下navigator........................... 102
5.5 DOM控制................................... 102
認識getElementById......................... 102
認識eval()語句.............................. 104
實現一個加減乘除計算器......................... 105
5.6 分辨率檢測.................................. 107
檢測屏幕數值................................. 107
自動轉換電腦版與移動版版面...................... 108
5.7 發送E-Mail——客戶回復繫統.................... 109
使用Chrome瀏覽器啟動mailto................... 109
使用JavaScript啟動E-Mail.................... 109
5.8 當前時間日期................................ 112
日期時間檢測——計時器......................... 112
日期對像Date................................ 112
實現時間顯示與計時器........................... 112
程序的執行效率............................... 113
第6章 多媒體播放
6.1 Canvas畫布基礎繪圖.......................... 116
Canvas語句的基礎............................ 116
畫布樣版.................................... 116
繪制圖形.................................... 117
控制圖形的變形............................... 122
6.2 Canvas動畫應用............................. 126
函數setInterval().......................... 126
函數requestAnimationFrame()................ 128
6.3 多媒體影音播放............................... 131
函數drawImage.............................. 131
播放器尺寸的控制.............................. 133
6.4 範例:動畫小劇場............................. 135
範例畫面.................................... 135
角色表(sprite)原理......................... 136
程序剖析.................................... 136
第7章 Web應用
7.1 基礎介紹................................... 141
AJAX...................................... 141
JSON...................................... 144
7.2 範例:Web服務器實際演練....................... 148
建立Web服務器............................... 148
AJAX傳輸範例................................ 152
JSON實際演練................................ 155
第8章 網頁數據存儲
8.1 Cookie和Session........................... 158
Stateless和Stateful........................ 158
Cookies簡介................................ 159
Session簡介................................ 160
8.2 Web Storage.............................. 161
Web Storage的優勢........................... 161
Web Storage的種類........................... 161
8.3 範例:窗體切換............................... 165
第9章 學習使用jQuery
9.1 jQuery事件與函數............................ 169
開始使用jQuery.............................. 169
認識jQuery語句.............................. 170
jQuery聲明................................. 170
jQuery選取指令.............................. 171
jQuery函數................................. 174
jQuery事件處理.............................. 174
9.2 標簽控制................................... 177
屬性(Attributes)和樣式(CSS)控制.............. 177
DOM操作.................................... 179
動畫效果.................................... 181
連續使用函數................................. 186
9.3 開源模塊的應用............................... 188
認識jQuery Plugin.......................... 188
引用jQuery Plugin.......................... 188
創建jQuery Plugin.......................... 189
應用jQuery Plugin.......................... 190
9.4 範例:拉霸遊戲............................... 191
jQuery Plugin資源.......................... 191
拉霸遊戲.................................... 193
第10章 趣味交互式個人履歷網站
10.1 確定履歷呈現的....................... 198
角色設置................................... 198
場景設置................................... 198
美術風格................................... 201
故事腳本................................... 202
繫統規劃................................... 205
10.2 建立視差滾動網站場景......................... 207
初始設置................................... 208
遊戲內容................................... 208
10.3 制作角色外觀與常態動畫....................... 213
顯示環境設置................................ 213
天空背景設置................................ 214
角色設置................................... 215
地面背景設置................................ 224
標題雲與文字內容............................. 225
10.4 制作場景對像動畫事件......................... 227
視差滾動................................... 227
觸發動畫................................... 229
第11章 認識HTML5遊戲引擎
11.1 gameQuery............................... 236
次接觸gameQuery......................... 236
快速瀏覽gameQuery函數....................... 237
11.2 Quintus................................. 239
次接觸Quintus........................... 239
範例快速瀏覽................................ 240
11.3 Melonjs................................. 245
次接觸Melonjs........................... 245
範例快速瀏覽................................ 247
11.4 LimeJS.................................. 250
次接觸LimeJS............................ 250
範例快速瀏覽................................ 253
11.5 Cocos2D................................. 256
次接觸Cocos2D........................... 256
官方範例快速瀏覽............................. 257
第12章 遊戲制作——2D遊戲地圖
12.1 下載與安裝Tiled Map Editor................. 261
12.2 2D免費遊戲場景資源介紹....................... 262
OpenGameArt.............................. 262
Reiner's Tilesets........................ 264
Game-icons.net........................... 264
其他免費資源................................ 265
12.3 繪制2D遊戲場景與對像........................ 265
繪制場景................................... 265
繪制對像................................... 269
12.4 編輯場景對像的屬性.......................... 270
12.5 實機測試.................................. 271
第13章 遊戲制作——倉庫番推寶箱
13.1 Quintus環境建立........................... 274
13.2 2D遊戲場景建設............................. 275
13.3 人物操控與Sheet動畫......................... 279
13.4 2D踫撞繫統................................ 285
13.5 遊戲關卡建立............................... 287
13.6 加載多媒體資源.............................. 289
13.7 實機測試.................................. 290
第14章 遊戲制作—— Facebook網絡應用
14.1 Facebook API下載與權限申請.................. 293
開發人員注冊................................ 293
添加應用程序................................ 294
獲取API................................... 296
14.2 Facebook會員登錄按鈕....................... 298
JavaScript部分............................ 298
HTML部分.................................. 302
14.3 Facebook發帖分享.......................... 302
JavaScript部分............................ 302
HTML 部分.................................. 305
第15章 HTML5遊戲的上線分享
15.1 Google雲端存儲架設遊戲網站................... 307
Google雲端存儲架站的限制..................... 307
Google雲端存儲架設網站的步驟.................. 307
15.2 使用二維碼分享網址.......................... 310
二維碼..................................... 311
加入桌面 311