HTML5游戲開(kāi)發(fā)實(shí)戰(zhàn)

審校者簡(jiǎ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　本地存儲(chǔ)
1.1.7　離線應(yīng)用程序
1.2　探索CSS3新功能
1.2.1　CSS3轉(zhuǎn)換
1.2.2　CSS3變換
1.2.3　CSS3動(dòng)畫(huà)
1.3　HTML5和CSS3新功能的更多細(xì)節(jié)
1.4　創(chuàng)建HTML5游戲的好處
1.4.1　不需要第三方插件
1.4.2　不需要插件就能支持iOS設(shè)備
1.4.3　突破常規(guī)瀏覽器游戲限制
1.4.4　創(chuàng)建HTML5游戲
1.5　HTML5還能做些什么
1.5.1　《記憶配對(duì)》游戲
1.5.2　Sinuous
1.5.3　小行星式書(shū)簽小程序
1.5.4　Quake
1.5.5　蝌蚪聊天室
1.5.6　Scrabb.ly
1.5.7　Aves引擎
1.6　瀏覽更多HTML5游戲
1.7　本書(shū)主要涉及哪些游戲
1.8　總結(jié)

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

第3章　用CSS3構(gòu)建《紙牌記憶配對(duì)》游戲
3.1　用CSS3轉(zhuǎn)換和變換模塊移動(dòng)游戲?qū)ο?br /> 3.1.1　2D變換函數(shù)
3.1.2　3D變換函數(shù)
3.1.3　用CSS3轉(zhuǎn)換實(shí)現(xiàn)樣式間過(guò)渡
3.2　創(chuàng)建翻牌效果
3.2.1　使用jQuery toggleClass函數(shù)切換類(lèi)
3.2.2　通過(guò)z-index控制重疊元素的可見(jiàn)性
3.2.3　介紹CSS perspective屬性
3.2.4　介紹背面可見(jiàn)性
3.3　創(chuàng)建《紙牌記憶配對(duì)》游戲
3.3.1　下載紙牌精靈表圖像
3.3.2　設(shè)置游戲開(kāi)發(fā)環(huán)境
3.3.3　使用jQuery復(fù)制DOM元素
3.3.4　使用jQuery的子節(jié)點(diǎn)過(guò)濾器選擇首個(gè)子元素
3.3.5　垂直對(duì)齊DOM元素
3.3.6　通過(guò)背景位置來(lái)使用CSS精靈
3.4　給配對(duì)游戲添加游戲邏輯
3.4.1　在CSS轉(zhuǎn)換完后執(zhí)行代碼
3.4.2　翻牌后延遲代碼的執(zhí)行
3.4.3　在JavaScript中隨機(jī)化數(shù)組
3.4.4　通過(guò)HTML5自定義數(shù)據(jù)屬性保存內(nèi)部自定義數(shù)據(jù)
3.4.5　用JQuery訪問(wèn)自定義數(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　當(dāng)Web瀏覽器不支持Canvas時(shí)的反饋信息
4.2.2　用Canvas的arc函數(shù)繪制圓和圖形
4.2.3　把角度轉(zhuǎn)換為弧度
4.2.4　在Canvas中執(zhí)行路徑繪制的操作
4.2.5　在切換路徑樣式時(shí)先調(diào)用BeginPath
4.2.6　關(guān)閉路徑
4.2.7　將畫(huà)圓功能封裝成函數(shù)
4.2.8　在JavaScript中生成隨機(jī)數(shù)
4.2.9　保存圓的位置
4.3　在Canvas中畫(huà)線
4.4　通過(guò)Canvas中的鼠標(biāo)事件與繪制對(duì)象交互
4.4.1　在Canvas元素中獲取鼠標(biāo)位置
4.4.2　在Canvas中檢測(cè)鼠標(biāo)事件是否發(fā)生在圓上
4.4.3　游戲主循環(huán)
4.4.4　清除Canvas
4.5　在Canvas中檢測(cè)線的交點(diǎn)
4.6　制作《解題》游戲
4.6.1　定義關(guān)卡數(shù)據(jù)
4.6.2　判斷是否過(guò)關(guān)
4.6.3　顯示當(dāng)前關(guān)卡和完成進(jìn)度
4.7　總結(jié)

第5章　構(gòu)建大師級(jí)Canvas游戲
5.1　用漸變色來(lái)填充圖形
5.1.1　給漸變添加色標(biāo)
5.1.2　填充徑向漸變色
5.2　在Canvas中繪制文本
5.3　在Canvas中繪制圖像
5.3.1　使用drawImage函數(shù)
5.3.2　裝點(diǎn)Canvas游戲
5.4　在Canvas中播放精靈表動(dòng)畫(huà)
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)建迷你鋼琴音樂(lè)游戲
6.2.1　在HTML5游戲中創(chuàng)建場(chǎng)景
6.2.2　讓音樂(lè)播放可視化
6.2.3　為音樂(lè)游戲選擇正確的歌曲
6.2.4　存儲(chǔ)和提取歌曲關(guān)卡數(shù)據(jù)
6.2.5　獲取游戲的流逝時(shí)間
6.2.6　創(chuàng)建音樂(lè)點(diǎn)
6.2.7　移動(dòng)音樂(lè)點(diǎn)
6.3　將PLAY按鈕與音樂(lè)游戲場(chǎng)景鏈接起來(lái)
6.4　構(gòu)建鍵盤(pán)驅(qū)動(dòng)的迷你鋼琴音樂(lè)游戲
6.4.1　通過(guò)按鍵來(lái)?yè)舸蛉龡l音樂(lè)線
6.4.2　判斷按鍵是否擊中音樂(lè)點(diǎn)
6.4.3　通過(guò)給定索引將元素從數(shù)組中移除
6.5　給迷你鋼琴游戲添加額外的功能
6.5.1　 根據(jù)玩家的表現(xiàn)而調(diào)整音樂(lè)音量
6.5.2　從游戲中刪除音樂(lè)點(diǎn)
6.5.3　保存最近5個(gè)音樂(lè)點(diǎn)的成功率計(jì)數(shù)
6.5.4　記錄音符來(lái)得到關(guān)卡數(shù)據(jù)
6.6　音樂(lè)播放完后處理audio事件
6.7　總結(jié)

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

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

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

附錄　突擊測(cè)驗(yàn)答案