目錄

第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

................................... 37

.................................... 37

補充說明：WebVTT格式.......................... 38

.................................... 38

2.4  Web應用程序................................. 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

序

在移動設備已經成為瀏覽信息與數字內容智能工具的時代，為了適用於各種不同規格的移動設備，就必須依靠有效且統一的跨平臺顯示工具，HTML5就是這樣的多平臺設備時代所需要的新工具。我們團隊彙集了多媒體內容設計師、信息工程設計師與跨平臺網頁設計師，大家在工作中累積了豐富的設計經驗，因此決定編寫本書，希望能有效地幫助讀者了解HTML5開發網頁遊戲的技術細節並樹立重要的設計觀念。

HTML5是一組包含HTML5、CSS3和JavaScript網頁技術的組合，其優秀的素和跨平臺能力，改變了移動時代的用戶體驗。使用HTML5開發遊戲的優勢，主要是它具備跨平臺、標準化的特性。無論是在計算機還是移動設備上，隻要使用瀏覽器就能正常運行，不必再額外安裝任何插件。

根據Digital Buzz Blog的統計，用戶在iOS和Android上所花的時間中，有32%是在玩遊戲。如果使用HTML5語言進行手機遊戲的開發，開發者就能創造出可在任何操作繫統中運行的遊戲，不必為了iOS或Android去學習專門的語言。例如Google Chrome Web Store上可以下載的《憤怒的小鳥》以及《炮塔防御》，就是從iOS平臺移植到HTML5上的經典案例。

為了協助讀者循序漸進地成為HTML5遊戲的開發高手，本書由淺入深，從HTML、CSS和JavaScript三大基礎架構開始，引導讀者進入HTML5遊戲開發的世界，除了基本語句的介紹之外，每個學習主題都會設計情景與範例說明，輔助讀者更快地了解HTML5遊戲開發的精髓。

在本書的高級章節中，先以一個結合個人履歷互動概念的遊戲作為HTML5的創新應用示範，接著引入其他開源遊戲引擎作為輔助，例如gameQuery、Quintus等，通過遊戲引擎與HTML5的銜接簡化遊戲制作的過程，後結合Facebook API應用以及遊戲發布的技巧，將所設計的HTML5遊戲分享出去，不必再經過繁瑣的應用程序商店注冊與審核過程，零成本就能讓您辛苦開發的遊戲行銷全世界。

綜合本書優勢，共可分為下列5點：

 "   從HTML5基礎架構開始介紹，適合次接觸程序的初學者。

 "   每個學習主題包含多種情景與範例，提供了實際演練的機會。

 "   超吸引眼球的遊戲式互動個人履歷教學制作。

 "   借力使力不費力，學會應用HTML5遊戲引擎輕松開發熱門遊戲。

 "  

HTML5遊戲免費發布技巧大公開，零成本就能讓自己開發的遊戲行銷全世界。

希望通過本書清晰的教學內容、經典的遊戲範例、大量的應用素材，以及完整的結構教學，可以真正為您增強開發HTML5遊戲的競爭力，讓您能夠發揮無限創意，不再被程序開發所束縛。另外，由於HTML5仍不斷地在更新發展中，對於本書尚未介紹或介紹不周的部分，還請各位讀者不吝賜教。

後，本書的完成要感謝餘秉學、黃耀岓、陳盈恩等人對於遊戲美術、程序開發的指教與協助。因為有他們的付出與熱情，讓整個出版過程充滿歡笑與正能量，也希望這股對遊戲開發的熱誠能夠傳遞給所有讀者，幫助讀者在HTML5遊戲開發技巧上能夠再上一層樓，以圓遊戲制作的夢想。

本書的安裝文件和範例下載地址為：http://pan.baidu.com/s/1bomNtON。

如果下載有問題，請電子郵件聯繫booksaga@126.com，郵件主題為“HTML5跨平臺遊戲設計——從入門到超人氣遊戲開發實戰下載文件”。

編者

第3章  CSS3應用

CSS是負責網頁外觀的藝術總監，凡是網頁裡的文字、圖片、表格、窗體等組件，通通得聽它的號令進行排版。雖然HTML裡也有關於外觀設計的標簽，但遠遠不及CSS可以做到的精準定位、多層次的顏色、框線變化，甚至還能更改鼠標光標的形狀，以及做出類似動畫般夢幻的過場效果，帶給我們更繽紛的在線體驗。

在本章中將學到的重點內容包括：

• 認識CSS基礎語句


• 使用CSS設計文字與圖片


• 使用CSS美化表格與窗體

3.1  CSS基礎知識

CSS與HTML是相輔相成的網頁技術，但是CSS語言在應用上卻與HTML略有不同。接下來要先跟大家介紹CSS的語句構造以及引用方式，待認識了CSS的基礎之後，纔能靈活發揮CSS提供的豐富樣式。

CSS是什麼

CSS全名是Cascading Style Sheets，是一種樣式表單（Stylesheet）語言。CSS誕生的理由是為了替HTML這種標記語言（markup language）處理頁面外觀與頁面布局的部分，凡是字體、顏色、邊距、定位、背景等都有專用的樣式可以設置。

雖然在前幾代的HTML裡就已經出現了可以控制外觀的標簽，但除了功能比起CSS簡單許多外，每個瀏覽器卻不一定都支持，這讓開發人員傷透腦筋。因此，這時候纔出現專注於“設計”區塊的網頁設計語言，於是催化了CSS的誕生。

CSS中的樣式不僅得到所有瀏覽器的支持，開發人員在設計網站時可以更清楚地將“數據”與“外觀”的程序設計部分分開，也就是讓HTML文件僅保存文件結構，而CSS專心負責網頁的外觀顯示，它們各司其職讓整個程序的維護更加容易。

CSS3閃亮登場

隨著HTML升級到第5版，當然CSS3也不甘落後地推出了更加豐富的新樣式，例如盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等等。靈活應用CSS3甚至能直接設計出各種好玩有趣的小遊戲，例如打鱷魚這種過去要用Flash處理動畫纔能做出的遊戲，現在完全隻要靠HTML和CSS就能完成；甚至更高級一點的2D射擊遊戲，也可以靠CCS3就能夠完全實現，是不是非常神奇呀！如圖3-1所示。

圖3-1  用CSS就可以完全實現的遊戲

CSS基本語句

CSS雖然與HTML的語句結構不太一樣，但是畢竟兩個是相輔相成的好朋友，因此許多屬性的相似度頗高，在學習時會有種似曾相識的感覺，甚至有些在經營個人博客的朋友，早就已經使用了簡單的CSS來打造個人風格的網頁。接下來要詳細介紹CSS的基本語句結構，由於CSS是遊戲設計非常重要的一個環節，學習不能馬虎唷！

        
基本聲明

CSS語句是由“選擇器”、“屬性”和“設置值&rdquo素所組成。聲明CSS的基本語句如下：

選擇器 {

屬性：設置值；

...

}

• 選擇器

選擇器的功能是用於指定在HTML程序中遇到何種標簽時，就套用括號內的屬性與設置。選擇器主要有三種類型，分別是“Type”、“Class”和“ID”。Type是HTML裡會使用到的選擇器標簽，例如、