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

前言

　　HMTL5有望成為網(wǎng)絡(luò)游戲開(kāi)發(fā)的熱門新平臺(tái)。HTML5游戲能夠運(yùn)行于包括iPhone系列和iPad系列在內(nèi)的計(jì)算機(jī)、智能手機(jī)以及平板電腦上。今天，我們加入HTML5游戲開(kāi)發(fā)的急先鋒，明日將成為時(shí)代的弄潮兒?！　”緯?shū)將展示如何使用最新的HTML5和CSS3 Web標(biāo)準(zhǔn)來(lái)構(gòu)建紙牌游戲、繪圖游戲、物理游戲，甚至是多人網(wǎng)絡(luò)游戲。本書(shū)講解清晰、系統(tǒng)全面，參照本書(shū)的講解就能構(gòu)建出6款示例游戲?！　TML5、CSS3以及相關(guān)的JavaScript API是網(wǎng)絡(luò)上最新的熱點(diǎn)話題。這些標(biāo)準(zhǔn)給我們帶來(lái)一個(gè)新的游戲市場(chǎng)—HTML5游戲。通過(guò)新的功能，我們能用HTML5元素、CSS3屬性，以及JavaScript來(lái)設(shè)計(jì)運(yùn)行于瀏覽器的游戲?！　”緯?shū)根據(jù)關(guān)注話題的側(cè)重點(diǎn)而分成9章。 我們將通過(guò)創(chuàng)建6款游戲來(lái)具體學(xué)習(xí)如何繪制游戲?qū)ο?、繪制動(dòng)畫(huà)、加入音頻、連接玩家，以及用Box2D物理引擎構(gòu)建游戲。　　本書(shū)內(nèi)容：　　第1章介紹HTML5、CSS3，以及相關(guān)的JavaScript API 新功能。該章還演示了利用這些功能和特性能創(chuàng)建什么樣的游戲?！　〉?章通過(guò)使用DOM和jQuery創(chuàng)建傳統(tǒng)《乒乓球》游戲來(lái)開(kāi)始我們的游戲開(kāi)發(fā)之旅?！　〉?章探討CSS3新功能，討論如何用DOM和CSS3來(lái)創(chuàng)建《紙牌記憶配對(duì)》游戲?！　〉?章介紹在頁(yè)面中通過(guò)新Canvas元素來(lái)繪制游戲并與之進(jìn)行交互的新方式，還演示如何用Canvas來(lái)構(gòu)建《解題》游戲。　　第5章通過(guò)在Canvas中繪制漸變效果和加入圖像進(jìn)行美化，完善前面介紹的《解題》游戲。該章還討論基于幀的動(dòng)畫(huà)精靈和多層管理方法?！　〉?章使用Audio元素給游戲添加聲音效果和背景音樂(lè)。該章還討論各瀏覽器對(duì)聲音格式的兼容性，并在該章結(jié)尾完成一款由鍵盤驅(qū)動(dòng)的音樂(lè)游戲?！　〉?章使用新的本地存儲(chǔ)API保存和恢復(fù)游戲進(jìn)度，記錄最佳成績(jī)功能，進(jìn)一步增強(qiáng)第3章所創(chuàng)建的CSS3《紙牌記憶配對(duì)》游戲?！　〉?章討論能讓瀏覽器持久連接到socket服務(wù)器的新WebSocket API，用于實(shí)現(xiàn)多人聯(lián)網(wǎng)玩游戲，并在該章完成《我畫(huà)你猜》游戲?！　〉?章傳授如何把Box2D(著名物理引擎)集成到Canvas游戲中。該章討論如何創(chuàng)建物體、應(yīng)用力、連接物體，以及如何把圖形與物體進(jìn)行關(guān)聯(lián)，并最終創(chuàng)建一款平臺(tái)汽車游戲?！　￠喿x本書(shū)你需要做的準(zhǔn)備　　你需要最新的現(xiàn)代Web瀏覽器，一個(gè)優(yōu)秀的文本編輯器，HTML、CSS以及JavaScript的基本知識(shí)?！　”緯?shū)讀者對(duì)象　　本書(shū)適合于對(duì)HTML、CSS和JavaScript有基本理解，并希望設(shè)計(jì)網(wǎng)頁(yè)類Canvas游戲、基于DOM游戲的設(shè)計(jì)者。

內(nèi)容概要

這是一本經(jīng)典的HTML5游戲開(kāi)發(fā)教程，它清晰而全面地展示了如何使用最新的HTML5和CSS3標(biāo)準(zhǔn)來(lái)構(gòu)建各種常見(jiàn)類型的游戲。本書(shū)實(shí)戰(zhàn)性非常強(qiáng)，圍繞紙牌游戲、繪圖游戲、物理游戲和多人游戲精心組織了6個(gè)富有趣味性和技術(shù)性的游戲案例。如果動(dòng)手實(shí)踐這些案例，不僅能掌握各種類型游戲的開(kāi)發(fā)思路和設(shè)計(jì)方法，而且還能掌握HTML5和CSS3技術(shù)中與游戲開(kāi)發(fā)相關(guān)的理論知識(shí)。本書(shū)共分9章，第1章介紹HTML5、CSS3，以及相關(guān)的JavaScript
API
新功能；第2章通過(guò)使用DOM和jQuery創(chuàng)建傳統(tǒng)游戲；第3章討論如何用DOM和CSS3來(lái)創(chuàng)建游戲；第4章介紹在頁(yè)面如何通過(guò)Canvas來(lái)繪制游戲并與之交互；第5章介紹如何在Canvas中繪制漸變效果和加入圖像；第6章使用Audio元素給游戲添加聲音效果和背景音樂(lè)；第7章使用新的本地存儲(chǔ)API保存和恢復(fù)游戲進(jìn)度，進(jìn)一步增強(qiáng)游戲；第8章討論如何實(shí)現(xiàn)多人聯(lián)網(wǎng)玩游戲；第9章講解如何把Box2D集成到Canvas游戲中。
本書(shū)以實(shí)例為導(dǎo)向，系統(tǒng)介紹網(wǎng)絡(luò)游戲開(kāi)發(fā)技術(shù)，結(jié)合具體示例的操作步驟講解，淺顯易懂，適合網(wǎng)絡(luò)游戲開(kāi)發(fā)人員、管理人員閱讀。

書(shū)籍目錄

審校者簡(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ā)入門
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　獲取玩家的鍵盤輸入
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　支持玩家多鍵盤同時(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ù)切換類
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)建鍵盤驅(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ù)器端獲取已連接的客戶端數(shù)
8.2.6　向所有已連接的瀏覽器廣播消息
8.2.7　創(chuàng)建客戶端來(lái)連接WebSocket服務(wù)器并獲取總連接數(shù)
8.2.8　建立WebSocket連接
8.2.9　WebSocket客戶端事件
8.3　使用WebSocket構(gòu)建聊天室
8.3.1　向服務(wù)器發(fā)送消息
8.3.2　從客戶端發(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　定義用于在客戶端與服務(wù)器之間進(jìn)行通信的數(shù)據(jù)對(duì)象
8.5.4　將畫(huà)線數(shù)據(jù)打包成JSON以便于廣播
8.5.5　再現(xiàn)從其他客戶端接收到的畫(huà)線數(shù)據(jù)
8.6　構(gòu)建多人游戲：《我畫(huà)你猜》
8.6.1　控制多人游戲的游戲流程
8.6.2　在服務(wù)器端羅列出所有已連接客戶端
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)建物理類汽車游戲
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　給游戲安裝車輪
9.7　創(chuàng)建物理汽車
9.8　通過(guò)鍵盤給汽車施加動(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)答案

章節(jié)摘錄

　　這是因?yàn)楫?dāng)調(diào)用第2條fill命令時(shí)，Canvas中的路徑列表還包含兩個(gè)圓。因此，fill命令用綠色填充這兩個(gè)圓，也就是重新填充原來(lái)紅色的圓。 　　為了解決這個(gè)問(wèn)題，需要確保在每次繪制一個(gè)新形狀前都調(diào)用beginPath。 　　beginPath清空路徑列表，所以下次調(diào)用fill和stroke命令時(shí)，它將只應(yīng)用上次調(diào)用beginPath之后的所有路徑。 　　牛刀小試 　　剛才我們討論了一段代碼，其中原打算繪制兩個(gè)圓并分別用紅色和綠色填充，而卻繪制了兩個(gè)綠色的圓。怎樣添加beginPath命令才能讓代碼按原來(lái)的打算來(lái)繪制圓呢？ 　　4.2.6 關(guān)閉路徑 　　closePath函數(shù)將會(huì)從最新路徑的終點(diǎn)到路徑的起點(diǎn)之間繪制一條直線，用于閉合路徑。如果我們只打算填充路徑而不打算對(duì)其進(jìn)行描邊，closePath函數(shù)將不會(huì)影響結(jié)果。對(duì)比同一個(gè)半圓的兩種結(jié)果，其中一個(gè)調(diào)用closePath而另一個(gè)沒(méi)有調(diào)用closePath函數(shù)?！　　?/pre>




編輯推薦
　　《HTML5游戲開(kāi)發(fā)實(shí)戰(zhàn)》清晰而全面地展示了如何使用最新的HTML5 和CSS3 標(biāo)準(zhǔn)來(lái)構(gòu)建紙牌、繪圖、物理等各種常見(jiàn)類型的游戲。





圖書(shū)封面



圖書(shū)標(biāo)簽Tags
無(wú)




評(píng)論、評(píng)分、閱讀與下載



還沒(méi)讀過(guò)(96)
勉強(qiáng)可看(700)
一般般(119)
內(nèi)容豐富(4956)
強(qiáng)力推薦(406)


 


    HTML5游戲開(kāi)發(fā)實(shí)戰(zhàn) PDF格式下載