01 遊戲設計與HTML5

HTML5受到世人注視的契機，緣起於已故蘋果公司的CEO賈伯斯所發起的公開聲明，表示不讓蘋果公司所生產的行動設備支援「Flash」技術，並以「HTML5」為主要發展方向。這個被蘋果公司大力支持的HTML5，其實是一組包含HTML5、CSS3 和JavaScript 的網頁技術組合，其優秀的多媒體元素及跨平台能力，改變了行動世代的使用者體驗。

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

? HTML5基礎認識

? HTML5開發環境建立

? HTML5程式測試與除錯技巧

範例：HelloWorld



02 HTML5基礎

HTML5比起前幾版而言具有大幅度的變化。首先新增多種「結構化元素」，有助於頁面的排版以及搜尋引擎的辨識；其次是豐富的「內容標記方法」，新增畫布與各種文字層級元素，讓圖文編輯更加精緻；第三是強大的「多媒體應用」，讓瀏覽器不必加載外掛就可以處理影音；另外也提供全新的web表單協助處理資訊流的部份。HTML5語言從靜態到動態所需要的元素通通都考慮到了，也難怪其魅力能夠襲捲全球。

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

? 認識整齊的結構化元素

? 活用豐富的內容標記方法

? 應用方便的影音多媒體標籤

? 學習Web表單機制



03 CSS3應用

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

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

? 認識CSS基礎語法

? 使用CSS設計文字與圖片

? 使用CSS美化表格與表單



04 CSS3網頁小遊戲

以往的網頁互動遊戲大多使用Flash呈現，瀏覽器必須安裝Flash player才能執行。但HTML5推出後，只要使用CSS3中的動畫屬性，就可以達到控制動畫與玩家互動的效果，讓瀏覽器不再需要安裝額外插件就能開始玩遊戲，這也是HTML5 帶來最重大的變革。

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

?? CSS3的動畫屬性animation

?? CSS3的漸變屬性Transition

?? 實作「打地鼠」網頁遊戲(包括場景/製作地鼠/得分動畫/關卡與結束)



05 常用的觸發事件與元件

在開發遊戲的歷程中，往往有許多需要和玩家互動的元件需要處理，但我們知道HTML是專門用來處理遊戲結構，而CSS則是負責遊戲美術，若想讓遊戲具備與玩家互動的效果，就必須導入HTML5家族的另一個成員－JavaScript語言。在這個章節中會和大家介紹在開發HTML5遊戲中常用的觸發事件和元件，並透過JavaScrip來實作。

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

? 滑鼠點擊事件偵聽

? 鍵盤按鍵事件偵聽

? 網頁錨點跳轉技巧

? 瀏覽器資訊偵測

? DOM控制技巧

? 螢幕解析度偵測

? 簡易E-Mail寄送系統

? 日期物件Date與計時器實作



06 多媒體播放

畫面是在HTML5才被定義的新標籤，具備強大的圖形處理能力。標籤在結合JavaScript語法的狀況下，可以進行繪製圖形、合成圖像等等操作，也可以用來實現動畫影片之控制，讓瀏覽器在不需安裝其它插件的情況下處理圖像。標籤之功能完整性，豐富到足以獨立出成一本書，本書僅對比較常用的功能進行介紹。在本章節您將學到的重點包括：

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

? Canvas圖形繪製與變形控制

? Canvas動畫應用

? Canvas多媒體影音播放

? Canvas動畫劇場實作

範例：動畫小劇場



07 WEB應用

在連線遊戲中，必須透過伺服器與客戶端不斷地交換遊戲資訊，才能更新與同步每個玩家的遊戲狀態，如此便可以設計出具有連線功能的遊戲內容，例如排行榜、好友資訊?等。在HTML5遊戲開發中，我們習慣將遊戲資訊以JSON格式包裝後，透過AJAX技術進行傳輸。

AJAX是資料傳遞的一種技術，可以僅針對網頁某些部份的資料更新，節省不斷重載整個網頁所需耗費的資源；JSON則是一個純文字格式，用於儲存和傳送簡單結構資料。

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

? AJAX傳輸方法的操作步驟

? 使用AJAX傳輸XML資料

? JSON格式的資料結構

? JSON格式的編譯與解譯

範例：web伺服器實際演練



08 網頁資料儲存

在HTTP協定中，由於client端與server端間並沒有互相保存資料的機制，因此需要暫時儲存網頁中的資料時，必須依靠Cookie和Session完成。網頁資料儲存的機制就像是飲料店點餐，當結帳買單後店家和顧客會持有一組號碼，透過這組號碼的連結就可以知道顧客所點的飲料內容，省去重複確認餐點的麻煩。

在HTML5中提供了新的儲存機制WebStorage，帶來更大的儲存空間、更少的頻寬浪費。在這個章節中將會帶各位釐清這些儲存方式的差異。

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

? 認識Cookie機制的運作

? 認識Session機制的運作

? 認識HTML5的Web Storage機制

範例：表單切換



09 學習使用jQuery

jQuery是基於JavaScript語法所開發的輕量級物件導向函式庫。jQuery可以凌駕於HTML與CSS之上，以批次方式直接控制HTML、CSS與JavaScript，能有效精簡程式碼的繁雜，並能跨瀏覽器進行DOM操作、事件處理、設計頁面元素動態效果、AJAX互動等。

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

? jQuery基礎語法

? jQuery控制HTML與CSS

? jQuery Plugin線上資源分享

? jQuery Plugin引用實戰

範例：拉霸遊戲



10 趣味互動式個人履歷網站

制式的文字履歷、單純的個人履歷網站，要如何在這個多媒體世代讓你的履歷脫穎而出？只要你學過HTML5遊戲開發，善用HTML5的超強互動功能加入一點巧思，就能設計出「趣味互動式個人履歷網站」。本章結合遊戲元素，透過動畫、捲軸控制和按鈕連結，讓面試官能夠「邊玩邊看」你的個人履歷，保證讓人耳目一新、印象深刻。

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

? 大型遊戲企劃流程

? CSS動畫呈現技巧

? jQuery視差滾動技巧

? jQuery動畫觸發技巧



11 認識HTML5遊戲引擎

充足的遊戲實在不是一件簡單的事。為了縮短遊戲開發的複雜性，世面上推出多個開源且免費的HTML5遊戲引擎，這些遊戲引擎內建多種遊戲經常使用到的函式，例如碰撞、鍵盤控制、物理現象模擬等，大幅縮短了遊戲開發的時程。因此接下來要帶大家快速瀏覽幾個目前火紅的HTML5遊戲引擎，看看遊戲引擎所扮演的角色。

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

? GameQuery引用與API函式速覽

? Quintus引用與範例程式說明

? melonjs引用與範例程式說明

? LimeJS安裝與範例程式說明

? Cocos2D引用與範例程式說明



12 遊戲製作—2D遊戲地圖

「 Tiled Map Editor」是一款免費的2D地圖編輯器，透過視覺化介面以「拼塊」的方式組合遊戲地圖環境，設計完的地圖資訊將會被儲存為純文字格式，副檔名為tmx。目前多數遊戲引擎皆有內建tmx的解析函式，例如前一章所介紹的Quintus、melonjs等，可以將地圖資訊引用到JavaScript中建立遊戲場景，非常方便。在本章中將帶領大家熟悉「Tiled Map Editor」這套軟體，未來的遊戲地圖設計都靠它來完成了！

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

? 安裝Tiled Map Editor環境

? 線上免費遊戲地圖資源

? Tiled Map Editor物件繪製

? 加入Tiled Map Editor物件屬性

? 引用tmx地圖資訊

? 實機測試



13 遊戲製作—倉庫番推寶箱

倉庫番是款超人氣的益智遊戲，玩家必須操控遊戲中的主角，在層層障礙中將場景內的寶箱推到指定地點，用以解開下一關卡的鎖定。在上一章的2D地圖編輯器中，我們已經認識倉庫番遊戲地圖的設計方法，在這個章節中，將結合Quintus遊戲引擎，實現倉庫番推寶箱的遊戲機制。

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

? 使用Quintus遊戲引擎

? 2D地圖編輯器實際應用

? 碰撞偵測技巧

? 關卡建立技巧

? Quintus多媒體資源引用技巧

? 實機測試



14 遊戲製作—FB連動網路應用

臉書（Facebook）已經成為現代人生活中不可缺乏的社群網站之一，因此無論是商業行銷、明星名人甚至網頁遊戲都想要透過與FB的連結來增加能見度與知名度。在這個章節就要來教大家如何應用FB所提供的API，將FB的功能結合到自己的程式中。

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

? 成為Facebook應用程式開發人員

? 取得FB API與權限

? 實作FB會員登入系統

? 實作FB發文分享系統



15 HTML5遊戲輸出上架教學

HTML5是基於Web技術的延伸，不像是APP一樣有獨立的開發系統（例如Android的java或iOS的Xcode），因此無論是在何種設備上，只要有瀏覽器就可以開啟，所以HTML5遊戲又具備「跨平台」的優勢。但也由於HTML5遊戲不是APP，所以不需經歷上架到APP商店的過程，只要將開發好的遊戲架設在雲端伺服器，就能輕鬆分享給全世界的人玩。

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

? 學習以Google免費資源架站

? 使用二維條碼分享遊戲網址