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

前言

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

內(nèi)容概要

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

書籍目錄

審校者簡介
譯者序
前言
第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　離線應(yīng)用程序
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設(shè)備
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　準(zhǔn)備開發(fā)工具
2.2　為DOM游戲準(zhǔn)備HTML文檔
2.2.1　新式HTML5 doctype聲明
2.2.2　頁眉和頁腳
2.2.3　JavaScript代碼最佳位置
2.2.4　頁面加載完后運行代碼
2.3　設(shè)置《乒乓球》游戲元素
2.3.1　jQuery簡述
2.3.2　jQuery選擇器基礎(chǔ)知識
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　設(shè)置游戲開發(fā)環(huán)境
3.3.3　使用jQuery復(fù)制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　當(dāng)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中的鼠標(biāo)事件與繪制對象交互
4.4.1　在Canvas元素中獲取鼠標(biāo)位置
4.4.2　在Canvas中檢測鼠標(biāo)事件是否發(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　顯示當(dāng)前關(guān)卡和完成進度
4.7　總結(jié)
第5章　構(gòu)建大師級Canvas游戲
5.1　用漸變色來填充圖形
5.1.1　給漸變添加色標(biāo)
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中獲取當(dāng)前日期和時間
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中復(fù)制數(shù)組
7.4.4　恢復(fù)游戲進度
7.5　總結(jié)
第8章　利用WebSocket構(gòu)建多人 游戲—《我畫你猜》
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)聽連接事件
8.2.5　在服務(wù)器端獲取已連接的客戶端數(shù)
8.2.6　向所有已連接的瀏覽器廣播消息
8.2.7　創(chuàng)建客戶端來連接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　通過在服務(wù)端廣播接收到的消息來創(chuàng)建聊天室
8.5　使用Canvas和WebSocket制作共享繪圖板
8.5.1　構(gòu)建本地繪圖板
8.5.2　廣播繪圖數(shù)據(jù)給所有已連接的瀏覽器
8.5.3　定義用于在客戶端與服務(wù)器之間進行通信的數(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　在服務(wù)器端羅列出所有已連接客戶端
8.6.3　在服務(wù)器端發(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　給物理世界設(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)建動態(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　聲音效果
附錄　突擊測驗答案

章節(jié)摘錄

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

編輯推薦

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

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

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

---