HTML5游戲開發(fā)實戰(zhàn)

審校者簡介
譯者序
前言

第1章　HTML5游戲概述
1.1　探索HTML5新功能
1.1.1　Canvas
1.1.2　音頻
1.1.3　GeoLocation
1.1.4　WebGL
1.1.5　WebSocket
1.1.6　本地存儲
1.1.7　離線應用程序
1.2　探索CSS3新功能
1.2.1　CSS3轉(zhuǎn)換
1.2.2　CSS3變換
1.2.3　CSS3動畫
1.3　HTML5和CSS3新功能的更多細節(jié)
1.4　創(chuàng)建HTML5游戲的好處
1.4.1　不需要第三方插件
1.4.2　不需要插件就能支持iOS設備
1.4.3　突破常規(guī)瀏覽器游戲限制
1.4.4　創(chuàng)建HTML5游戲
1.5　HTML5還能做些什么
1.5.1　《記憶配對》游戲
1.5.2　Sinuous
1.5.3　小行星式書簽小程序
1.5.4　Quake
1.5.5　蝌蚪聊天室
1.5.6　Scrabb.ly
1.5.7　Aves引擎
1.6　瀏覽更多HTML5游戲
1.7　本書主要涉及哪些游戲
1.8　總結(jié)

第2章　DOM游戲開發(fā)入門
2.1　準備開發(fā)工具
2.2　為DOM游戲準備HTML文檔
2.2.1　新式HTML5 doctype聲明
2.2.2　頁眉和頁腳
2.2.3　JavaScript代碼最佳位置
2.2.4　頁面加載完后運行代碼
2.3　設置《乒乓球》游戲元素
2.3.1　jQuery簡述
2.3.2　jQuery選擇器基礎知識
2.3.3　jQuery css函數(shù)
2.3.4　使用jQuery的好處
2.3.5　使用jQuery操縱DOM游戲元素
2.3.6　絕對位置的行為
2.4　獲取玩家的鍵盤輸入
2.4.1　了解按鍵代碼
2.4.2　讓常數(shù)更具可讀性
2.4.3　用parseInt函數(shù)將字符串轉(zhuǎn)換為數(shù)字
2.4.4　在控制臺面板中直接執(zhí)行JavaScript表達式
2.4.5　檢查控制臺窗口
2.5　支持玩家多鍵盤同時輸入
2.5.1　更好地聲明全局變量
2.5.2　用setInterval函數(shù)創(chuàng)建JavaScript定時器
2.5.3　理解游戲主循環(huán)
2.6　通過JavaScript間隔移動DOM對象
2.7　開始碰撞檢測
2.8　動態(tài)顯示HTML文本
2.9　總結(jié)

第3章　用CSS3構(gòu)建《紙牌記憶配對》游戲
3.1　用CSS3轉(zhuǎn)換和變換模塊移動游戲?qū)ο?br /> 3.1.1　2D變換函數(shù)
3.1.2　3D變換函數(shù)
3.1.3　用CSS3轉(zhuǎn)換實現(xiàn)樣式間過渡
3.2　創(chuàng)建翻牌效果
3.2.1　使用jQuery toggleClass函數(shù)切換類
3.2.2　通過z-index控制重疊元素的可見性
3.2.3　介紹CSS perspective屬性
3.2.4　介紹背面可見性
3.3　創(chuàng)建《紙牌記憶配對》游戲
3.3.1　下載紙牌精靈表圖像
3.3.2　設置游戲開發(fā)環(huán)境
3.3.3　使用jQuery復制DOM元素
3.3.4　使用jQuery的子節(jié)點過濾器選擇首個子元素
3.3.5　垂直對齊DOM元素
3.3.6　通過背景位置來使用CSS精靈
3.4　給配對游戲添加游戲邏輯
3.4.1　在CSS轉(zhuǎn)換完后執(zhí)行代碼
3.4.2　翻牌后延遲代碼的執(zhí)行
3.4.3　在JavaScript中隨機化數(shù)組
3.4.4　通過HTML5自定義數(shù)據(jù)屬性保存內(nèi)部自定義數(shù)據(jù)
3.4.5　用JQuery訪問自定義數(shù)據(jù)屬性
3.4.6　制作其他紙牌游戲
3.5　在游戲中嵌入Web字體
3.6　總結(jié)

第4章　用Canvas和繪圖API構(gòu)建《解題》游戲
4.1　介紹HTML5 Canvas元素
4.2　在Canvas中繪制圓形
4.2.1　當Web瀏覽器不支持Canvas時的反饋信息
4.2.2　用Canvas的arc函數(shù)繪制圓和圖形
4.2.3　把角度轉(zhuǎn)換為弧度
4.2.4　在Canvas中執(zhí)行路徑繪制的操作
4.2.5　在切換路徑樣式時先調(diào)用BeginPath
4.2.6　關(guān)閉路徑
4.2.7　將畫圓功能封裝成函數(shù)
4.2.8　在JavaScript中生成隨機數(shù)
4.2.9　保存圓的位置
4.3　在Canvas中畫線
4.4　通過Canvas中的鼠標事件與繪制對象交互
4.4.1　在Canvas元素中獲取鼠標位置
4.4.2　在Canvas中檢測鼠標事件是否發(fā)生在圓上
4.4.3　游戲主循環(huán)
4.4.4　清除Canvas
4.5　在Canvas中檢測線的交點
4.6　制作《解題》游戲
4.6.1　定義關(guān)卡數(shù)據(jù)
4.6.2　判斷是否過關(guān)
4.6.3　顯示當前關(guān)卡和完成進度
4.7　總結(jié)

第5章　構(gòu)建大師級Canvas游戲
5.1　用漸變色來填充圖形
5.1.1　給漸變添加色標
5.1.2　填充徑向漸變色
5.2　在Canvas中繪制文本
5.3　在Canvas中繪制圖像
5.3.1　使用drawImage函數(shù)
5.3.2　裝點Canvas游戲
5.4　在Canvas中播放精靈表動畫
5.5　創(chuàng)建多層Canvas游戲
5.6　總結(jié)

第６章　給游戲添加聲音效果
6.1　給PLAY按鈕添加聲音效果
6.1.1　定義audio元素
6.1.2　播放聲音
6.1.3　暫停聲音
6.1.4　調(diào)整音量大小
6.1.5　使用jQuery 的hover事件
6.1.6　創(chuàng)建Ogg格式的音頻以支持Mozilla Firefox
6.1.7　不同Web瀏覽器所支持的音頻格式
6.2　構(gòu)建迷你鋼琴音樂游戲
6.2.1　在HTML5游戲中創(chuàng)建場景
6.2.2　讓音樂播放可視化
6.2.3　為音樂游戲選擇正確的歌曲
6.2.4　存儲和提取歌曲關(guān)卡數(shù)據(jù)
6.2.5　獲取游戲的流逝時間
6.2.6　創(chuàng)建音樂點
6.2.7　移動音樂點
6.3　將PLAY按鈕與音樂游戲場景鏈接起來
6.4　構(gòu)建鍵盤驅(qū)動的迷你鋼琴音樂游戲
6.4.1　通過按鍵來擊打三條音樂線
6.4.2　判斷按鍵是否擊中音樂點
6.4.3　通過給定索引將元素從數(shù)組中移除
6.5　給迷你鋼琴游戲添加額外的功能
6.5.1　 根據(jù)玩家的表現(xiàn)而調(diào)整音樂音量
6.5.2　從游戲中刪除音樂點
6.5.3　保存最近5個音樂點的成功率計數(shù)
6.5.4　記錄音符來得到關(guān)卡數(shù)據(jù)
6.6　音樂播放完后處理audio事件
6.7　總結(jié)

第7章　利用本地存儲技術(shù)保存游戲數(shù)據(jù)
7.1　使用HTML5本地存儲技術(shù)保存數(shù)據(jù)
7.1.1　創(chuàng)建游戲結(jié)束對話框
7.1.2　在瀏覽器中保存成績
7.1.3　通過本地存儲技術(shù)保存和加載數(shù)據(jù)
7.1.4　本地存儲只保存字符串值
7.1.5　將本地存儲對象看做關(guān)聯(lián)數(shù)組
7.2　在本地存儲中保存對象
7.2.1　在JavaScript中獲取當前日期和時間
7.2.2　使用原生JSON將對象編碼成字符串
7.2.3　從JSON字符串中加載所保存的對象
7.2.4　在控制臺窗口中檢測本地存儲
7.3　用一種漂亮的彩帶效果來告訴玩家破記錄了
7.4　保存整個游戲的進度
7.4.1　保存游戲進度
7.4.2　從本地存儲中刪除記錄
7.4.3　在JavaScript中復制數(shù)組
7.4.4　恢復游戲進度
7.5　總結(jié)

第8章　利用WebSocket構(gòu)建多人 游戲-《我畫你猜》
8.1　初試WebSocket Web應用程序
8.2　安裝WebSocket服務器
8.2.1　安裝Node.JS WebSocket服務器
8.2.2　創(chuàng)建廣播連接數(shù)的WebSocket服務器
8.2.3　初始化WebSocket服務器
8.2.4　在服務器端監(jiān)聽連接事件
8.2.5　在服務器端獲取已連接的客戶端數(shù)
8.2.6　向所有已連接的瀏覽器廣播消息
8.2.7　創(chuàng)建客戶端來連接WebSocket服務器并獲取總連接數(shù)
8.2.8　建立WebSocket連接
8.2.9　WebSocket客戶端事件
8.3　使用WebSocket構(gòu)建聊天室
8.3.1　向服務器發(fā)送消息
8.3.2　從客戶端發(fā)送消息到服務器
8.3.3　在服務器端接收消息
8.4　通過在服務端廣播接收到的消息來創(chuàng)建聊天室
8.5　使用Canvas和WebSocket制作共享繪圖板
8.5.1　構(gòu)建本地繪圖板
8.5.2　廣播繪圖數(shù)據(jù)給所有已連接的瀏覽器
8.5.3　定義用于在客戶端與服務器之間進行通信的數(shù)據(jù)對象
8.5.4　將畫線數(shù)據(jù)打包成JSON以便于廣播
8.5.5　再現(xiàn)從其他客戶端接收到的畫線數(shù)據(jù)
8.6　構(gòu)建多人游戲：《我畫你猜》
8.6.1　控制多人游戲的游戲流程
8.6.2　在服務器端羅列出所有已連接客戶端
8.6.3　在服務器端發(fā)送消息給指定的連接
8.6.4　改進現(xiàn)有游戲
8.7　用CSS裝點《我畫你猜》游戲
8.8　總結(jié)

第9章　用Box2D和Canvas構(gòu)建物理類汽車游戲
9.1　安裝Box2d JavaScript庫
9.1.1　用b2World創(chuàng)建新的物理世界對象
9.1.2　用b2AABB定義物理邊界
9.1.3　給物理世界設置重力
9.1.4　設置 Box2D忽略休眠物體
9.2　在物理世界中創(chuàng)建靜態(tài)地面
9.2.1　創(chuàng)建物體形狀
9.2.2　創(chuàng)建物理物體
9.3　在Canvas上繪制物理世界
9.4　在物理世界里創(chuàng)建動態(tài)的長方形
9.5　推進物理世界的時間
9.6　給游戲安裝車輪
9.7　創(chuàng)建物理汽車
9.8　通過鍵盤給汽車施加動力
9.8.1　向物體施加動力
9.8.2　理解ApplyForce與ApplyImpulse之間的不同點
9.8.3　給游戲環(huán)境添加坡道
9.9　在Box2D世界檢測碰撞
9.10　重啟游戲
9.11　讓游戲支持關(guān)卡
9.12　為Box2D繪制圖形輪廓
9.12.1　使用形狀和物體的userData屬性
9.12.2　根據(jù)物理物體的狀態(tài)來繪制每一幀圖像
9.12.3　在Canvas中旋轉(zhuǎn)和翻轉(zhuǎn)圖片
9.13　給游戲添加裝飾，讓游戲更具趣味性
9.13.1　用燃料的限制加速
9.13.2　用CSS3進度條顯示剩余燃料
9.14　總結(jié)
9.14.1　HTML5 游戲引擎
9.14.2　游戲精靈以及貼圖
9.14.3　聲音效果

附錄　突擊測驗答案