本書通過(guò)精心編寫且容易理解的代碼，以及抓住關(guān)鍵問(wèn)題的文字描述，闡明了游戲開發(fā)過(guò)程中的每一個(gè)細(xì)節(jié)。本書第1～19章講解了Snail Bait游戲的完整開發(fā)過(guò)程，從以一個(gè)簡(jiǎn)單的顯示圖像的游戲版本開始，涵蓋了HTML5視頻游戲開發(fā)的所有特點(diǎn)。第20章總結(jié)全書，使用本書前19章講述的大部分技術(shù)內(nèi)容實(shí)現(xiàn)了第二個(gè)視頻游戲。不管是游戲開發(fā)新手，還是專業(yè)的游戲開發(fā)人員，都能從本書中獲益。
本書中所有的程序源碼，包括本書中討論過(guò)的、指定章節(jié)的特殊版本的游戲代碼，都可以在華章網(wǎng)站（www.hzbook.com）上下載。
初學(xué)者的入門指南，從零開始完整講解了一個(gè)復(fù)雜的橫向卷軸平臺(tái)視頻游戲的開發(fā)過(guò)程
本書涵蓋豐富的代碼和演示實(shí)例，通過(guò)高可靠性、可復(fù)用的代碼幫助專業(yè)開發(fā)者掌握必備知識(shí)
游戲編程提供了有創(chuàng)意的財(cái)富和商業(yè)機(jī)會(huì)，而且并不難理解。本書作者David Geary向讀者展示了如何使用可以免費(fèi)獲取的瀏覽器工具及資源創(chuàng)作視頻游戲，并在桌面瀏覽器和移動(dòng)端上運(yùn)行它們。
本書循序漸進(jìn)地實(shí)現(xiàn)一個(gè)復(fù)雜的街機(jī)風(fēng)格游戲，而且完全從零開始，不需要使用任何專有的游戲框架。通過(guò)學(xué)習(xí)Snail Bait游戲的完整開發(fā)過(guò)程，會(huì)讓你對(duì)設(shè)計(jì)和構(gòu)建任何類型的HTML5 2D游戲有更深層次的理解。
本書涵蓋以下內(nèi)容：
創(chuàng)作光滑、無(wú)閃爍的動(dòng)畫
實(shí)現(xiàn)不受游戲中潛在動(dòng)畫幀頻影響的運(yùn)動(dòng)
驅(qū)動(dòng)sprite對(duì)象，讓它們執(zhí)行閃閃發(fā)光、爆炸等運(yùn)動(dòng)
在音軌上對(duì)多聲道聲音特效實(shí)現(xiàn)分層
彎曲時(shí)間創(chuàng)作非線性動(dòng)畫特效，例如跳躍或者彈跳等
通過(guò)一個(gè)時(shí)間系統(tǒng)，控制游戲中的時(shí)間流逝
實(shí)現(xiàn)用于仿真自然現(xiàn)象的粒子系統(tǒng)
有效地發(fā)現(xiàn)sprite對(duì)象之間的碰撞
構(gòu)建一個(gè)包含特殊屬性的開發(fā)者后門
使用Node.js和socket.io將實(shí)時(shí)游戲指標(biāo)傳給服務(wù)器
開發(fā)一個(gè)提示板，用于顯示服務(wù)器上存儲(chǔ)的高分榜
在移動(dòng)設(shè)備上實(shí)現(xiàn)HTML5
前 言 Preface
本書是為希望使用HTML5進(jìn)行2D游戲開發(fā)，且具備一定JavaScript編程經(jīng)驗(yàn)的開發(fā)人員而準(zhǔn)備的。在本書中，筆者從零開始完整講解了一個(gè)復(fù)雜的橫向卷軸平臺(tái)視頻游戲的開發(fā)過(guò)程，并將該視頻游戲命名為“Snail Bait”。在開發(fā)過(guò)程中，筆者沒(méi)有使用任何第三方圖形框架或游戲框架，因此讀者將從本書中學(xué)會(huì)以編程方式實(shí)現(xiàn)平滑動(dòng)畫、sprite爆炸、開發(fā)人員后門程序、游戲難易度設(shè)計(jì)等所有內(nèi)容。如果讀者正在使用某個(gè)游戲框架開發(fā)游戲，那么本書對(duì)于幫助讀者理解游戲框架內(nèi)部的工作原理也同樣大有裨益。
出于教學(xué)目的，Snail Bait游戲僅實(shí)現(xiàn)了一個(gè)關(guān)卡，然而它卻具備了街機(jī)風(fēng)格游戲的全部特點(diǎn)。Snail Bait游戲在滾動(dòng)的背景上同時(shí)操作多個(gè)動(dòng)畫對(duì)象，即sprite對(duì)象，在播放游戲背景音樂(lè)的同時(shí)添加多種音頻效果。sprite對(duì)象具備多種行為，包括但不限于跑動(dòng)、跳躍、飛行、閃光、彈跳、來(lái)回移動(dòng)、爆炸、碰撞、平臺(tái)著陸、從游戲畫面底部跌落等。
另外，Snail Bait游戲還實(shí)現(xiàn)了多個(gè)特色功能。例如，一個(gè)可以減慢或加快游戲整體速度的時(shí)間系統(tǒng)；游戲加載過(guò)程動(dòng)畫；當(dāng)游戲主角失去生命時(shí)，震動(dòng)游戲畫面的特殊效果；模擬煙霧和燃燒的粒子系統(tǒng)等。當(dāng)游戲窗口失去焦點(diǎn)時(shí)，Snail Bait游戲會(huì)暫停運(yùn)行，而當(dāng)游戲窗口重新獲得焦點(diǎn)時(shí)，Snail Bait游戲會(huì)以一個(gè)倒計(jì)時(shí)動(dòng)畫作為開始，以便玩家有時(shí)間來(lái)恢復(fù)對(duì)游戲的控制。
雖然沒(méi)有使用游戲框架或圖形框架，但是Snail Bait游戲使用Node.js和socket.io技術(shù)實(shí)現(xiàn)了將游戲中的一些指標(biāo)數(shù)據(jù)發(fā)送到服務(wù)器端、高分存儲(chǔ)和檢索，并在游戲窗口頂部顯示高分榜等功能。當(dāng)游戲運(yùn)行緩慢時(shí)，Snail Bait游戲還將顯示警告信息。而當(dāng)按下“Ctrl+D”組合鍵啟動(dòng)游戲時(shí)，Snail Bait游戲?qū)?dòng)開發(fā)人員后門程序，從而賦予操作人員特殊權(quán)限，例如修改時(shí)間軸的流動(dòng)，或者顯示sprite對(duì)象碰撞檢測(cè)矩形以及其他功能等。
當(dāng)Snail Bait游戲檢測(cè)到自己運(yùn)行在移動(dòng)設(shè)備上時(shí)，將通過(guò)調(diào)用觸摸事件處理句柄、調(diào)整游戲窗口大小來(lái)重新配置自身，以便適應(yīng)移動(dòng)設(shè)備的屏幕大小及控制方式。
本書將展示如何一步一步編程實(shí)現(xiàn)Snail Bait游戲的所有功能，這樣讀者就可以在自己的游戲中實(shí)現(xiàn)類似的功能。
本書簡(jiǎn)史
早在2010年，筆者從一款流行的Android系統(tǒng)下的開源游戲Replica Island中下載了圖片和聲音，并使用它們?cè)贏ndroid系統(tǒng)中實(shí)現(xiàn)了Snail Bait游戲的初始版本。
當(dāng)時(shí)，筆者已經(jīng)對(duì)HTML5 Canvas技術(shù)產(chǎn)生了濃厚的興趣，并開始寫作上一本圖書《HTML5 Canvas核心技術(shù)：圖形、動(dòng)畫與游戲開發(fā)》。在寫作期間，筆者持續(xù)完善了Snail Bait游戲，將它從基于Java語(yǔ)言及Android的系統(tǒng)環(huán)境，遷移到了基于JavaScript語(yǔ)言、HTML5 canvas元素及瀏覽器的環(huán)境中。在2012年寫作完成時(shí)，筆者已經(jīng)開發(fā)出了一個(gè)雖然原始但功能基本完整的游戲版本。
2012年年底，筆者基于Snail Bait游戲開始為IBM developerWorks網(wǎng)站撰寫10篇關(guān)于游戲編程的系列技術(shù)文章（關(guān)于這些技術(shù)文章的鏈接，請(qǐng)參閱后面的“網(wǎng)上資源”部分）。在接下來(lái)的10個(gè)月中，基于寫作需要，筆者繼續(xù)完善、修改了Snail Bait游戲。
2013年夏天，Snail Bait游戲已經(jīng)日趨成熟。筆者前往加利福尼亞的塞瓦斯托波爾，把Snail Bait游戲開發(fā)的全過(guò)程放在一起，拍攝了一部長(zhǎng)達(dá)15小時(shí)的O’Reilly視頻，取名為“HTML5 2D游戲開發(fā)”。從某個(gè)方面而言，這部視頻就是本書的電影版。雖然該視頻直到9月才得以發(fā)布，但它依然成為當(dāng)年的十大暢銷O’Reilly視頻之一（關(guān)于這段視頻的鏈接，請(qǐng)參閱后面的“網(wǎng)上資源”部分）。
2013年7月，從塞瓦斯托波爾回到家之后，筆者便全身心地投入到本書的寫作中。筆者改寫了IBM developerWorks網(wǎng)站上的10篇系列技術(shù)文章，將這些文章作為本書的開始章節(jié)，并在其后添加了10章的新內(nèi)容。在寫作的整個(gè)過(guò)程中，筆者不斷迭代修改Snail Bait游戲的代碼，使其更具有可讀性。
2013年12月，在本書第1～19章完成后，筆者決定增加最后一章。該章講解了如何使用本書介紹的技術(shù)實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的視頻游戲，這就是第20章中Bodega’s Revenge游戲的由來(lái)。
如何閱讀本書
本書的寫作目的簡(jiǎn)單明確：通過(guò)講解如何實(shí)現(xiàn)一個(gè)復(fù)雜的視頻游戲，教會(huì)讀者開發(fā)屬于自己的游戲。
讀者可以采用多種方式閱讀本書。首先，筆者為了使本書更便于閱讀，在書中添加了大量的截圖、程序清單和圖表。
書中靈活地使用了“注意”“提示”“警告”和“最佳實(shí)踐”模塊。這些模塊精簡(jiǎn)了本書主要內(nèi)容，每個(gè)“注意”“提示”“警告”和“最佳實(shí)踐”模塊都有一個(gè)標(biāo)題（除了只有一行的模塊之外），這樣讀者一眼就可以判定這些輔助內(nèi)容是否與自己的實(shí)際情況有關(guān)�？傮w而言，本書主要是在講解開發(fā)方法，而這些模塊則重點(diǎn)提示了開發(fā)的原因。如果讀者時(shí)間有限，那么可以拋開這些模塊，直接閱讀本書的主要內(nèi)容，從而快速掌握游戲底層的工作機(jī)制，同時(shí)確保不會(huì)遺漏任何重要內(nèi)容。
本書第1～19章講解了Snail Bait游戲的完整開發(fā)過(guò)程，從一個(gè)簡(jiǎn)單的顯示圖像的游戲版本開始，涵蓋了HTML5視頻游戲開發(fā)的所有特點(diǎn)。第20章總結(jié)全書，使用本書前19章講述的大部分技術(shù)內(nèi)容實(shí)現(xiàn)了第二個(gè)視頻游戲。
如果讀者計(jì)劃精讀本書，而不僅僅是把它當(dāng)作一個(gè)參考，那么建議從第1章或第20章開始閱讀，其中第20章除了對(duì)第1～19章所學(xué)內(nèi)容進(jìn)行了回顧與綜述外，還增加了部分新知識(shí)，例如極坐標(biāo)系統(tǒng)和旋轉(zhuǎn)坐標(biāo)系統(tǒng)的應(yīng)用。
假如讀者從第20章開始閱讀，甚至只是略微地瀏覽一下第20章，讀者都可以對(duì)前19章所講述的內(nèi)容有一個(gè)大致的了解，但是不要奢望在第一次閱讀時(shí)就能理解透徹。
筆者猜想大部分讀者都希望把本書當(dāng)作一個(gè)參考，因此除了在每章的開頭部分加入該章主題外，還在每章的開始部分添加了一段關(guān)于該章內(nèi)容的簡(jiǎn)要介紹。這樣將給讀者快速定位具體內(nèi)容帶來(lái)很大便利。同時(shí)，筆者還加入了許多關(guān)于如何實(shí)現(xiàn)具體功能的分步說(shuō)明，這樣讀者就可以按照這些步驟實(shí)現(xiàn)自己的類似功能。
本書練習(xí)
被動(dòng)地閱讀一本書不會(huì)將任何人變成一個(gè)游戲開發(fā)程序員。讀者必須通過(guò)自己動(dòng)手編寫一些代碼來(lái)真正學(xué)會(huì)實(shí)現(xiàn)一款游戲的方法。為此，本書在每一章的結(jié)束部分都列出了一些練習(xí)，以幫助讀者更好地學(xué)習(xí)。
為了完成練習(xí)，讀者需要下載Snail Bait游戲源代碼的最終版本，并且修改代碼。在某些情況下，練習(xí)將指導(dǎo)讀者修改某個(gè)具體版本的Snail Bait游戲源代碼，這些版本的游戲源代碼與具體的章節(jié)有關(guān)。關(guān)于Snail Bait游戲源代碼版本劃分的詳細(xì)信息，請(qǐng)閱讀下面的內(nèi)容。
Snail Bait游戲源代碼及其版本劃分
本書講述的主要內(nèi)容來(lái)源于兩個(gè)視頻游戲。讀者可以通過(guò)“網(wǎng)上資源”部分的URL地址查看、下載這兩個(gè)游戲及其源代碼。
在閱讀時(shí)，讀者會(huì)發(fā)現(xiàn)參考Snail Bait游戲的源代碼對(duì)于理解書中的內(nèi)容非常有幫助，而通過(guò)參考與讀者正在閱讀的章節(jié)對(duì)應(yīng)的源代碼，這種幫助將更加明顯。例如，在第1章里，我們實(shí)現(xiàn)了Snail Bait游戲的一個(gè)初始版本，簡(jiǎn)單繪制了游戲背景和游戲主角。這個(gè)版本的源代碼與最終版本的源代碼雖然有少量相似之處，但此時(shí)就查閱最終版本的源代碼一點(diǎn)用都沒(méi)有，大量的代碼反而會(huì)讓讀者眼花繚亂。反倒是參考corehtml5games.com/book/code/ch01網(wǎng)址上這個(gè)對(duì)應(yīng)第1章結(jié)束的版本更有助于讀者理解第1章所講述的內(nèi)容。本書每章（除第2章外）對(duì)應(yīng)的源代碼版本的URL都按照corehtml5games.com/book/code/ch??的格式設(shè)定，其中“??”代表了對(duì)應(yīng)于第01～20章的兩位數(shù)字。
如上所述，除非另有說(shuō)明，否則本書每章最后部分的練習(xí)都對(duì)應(yīng)于按照章節(jié)一步一步開發(fā)游戲，在章節(jié)結(jié)束時(shí)得到的Snail Bait游戲版本。
網(wǎng)上資源
本書配套網(wǎng)站：corehtml5games.com
Snail Bait游戲的在線網(wǎng)址：corehtml5games.com/snailbait
Bodega’s Revenge游戲的在線網(wǎng)址：corehtml5games.com/bodegas-revenge
Snail Bait游戲源代碼下載地址：corehtml5games.com/book/downloads/snailbait
Bodega’s Revenge游戲源代碼下載地址：corehtml5games.com/book/downloads/bodegas-revenge
O’Reilly網(wǎng)站上作者的“HTML5二維游戲開發(fā)”視頻：shop.oreilly.com/product/0636920030737.do
IBM developerWorks網(wǎng)站上作者的“HTML5二維游戲開發(fā)”系列技術(shù)文章：www.ibm.com/developerworks/java/library/j-html5-game1/index.html
作者2013年在亞特蘭大HTML5用戶組會(huì)議上關(guān)于HTML5游戲編程的演講視頻：youtube.com/watch?v=S256vAqGY6c
作者出版的《HTML5 Canvas核心技術(shù)：圖形、動(dòng)畫與游戲開發(fā)》在亞馬遜上的鏈接：http://amzn.to/1jfuf0C
預(yù)備知識(shí)
如果人們不能說(shuō)某種語(yǔ)言或以這種語(yǔ)言書寫，他們就不會(huì)考慮上這樣一門創(chuàng)造性的書寫課。同樣，為了使用HTML5編程實(shí)現(xiàn)復(fù)雜游戲，讀者就必須掌握J(rèn)avaScript語(yǔ)言。JavaScript語(yǔ)言是學(xué)習(xí)本書的前提基礎(chǔ)。
本書程序清單所列的代碼幾乎都是用JavaScript語(yǔ)言編寫的，但這并不代表只掌握J(rèn)avaScript語(yǔ)言就夠了，讀者還需要掌握與之相關(guān)的HTML和CSS，熟悉計(jì)算機(jī)圖形學(xué)，并具備基本的數(shù)學(xué)知識(shí)。
關(guān)注自己的游戲
最后，讓我們來(lái)討論一下為什么我們能夠聚在這里。筆者猜想讀者之所以閱讀本書是因?yàn)榇蠹蚁Ｍㄟ^(guò)編程來(lái)實(shí)現(xiàn)一款屬于自己的游戲。
本書按章節(jié)討論了游戲編程的各個(gè)方面，例如實(shí)現(xiàn)sprite、碰撞檢測(cè)等。雖然它們屬于Snail Bait游戲，但是讀者也能輕松地將這些實(shí)現(xiàn)方法套用到自己的游戲當(dāng)中。
本書章節(jié)順序的編排也很重要，這些章節(jié)展示了如何從頭開始一步一步編程實(shí)現(xiàn)一款游戲。在本書的開始部分，首先收集原始素材，搭建開發(fā)環(huán)境，然后從繪制游戲的基本圖形開始編程開發(fā)。在隨后的章節(jié)中，逐步向游戲中添加動(dòng)畫、sprite對(duì)象、sprite對(duì)象行為等功能，從而逐步完善Snail Bait游戲。如果讀者正在從零開始開發(fā)一款游戲，那么可能會(huì)希望遵循同樣的講解方式，這樣讀者就可以一邊學(xué)習(xí)實(shí)現(xiàn)功能的方法，一邊在自己的游戲中實(shí)現(xiàn)這些功能。
在開始認(rèn)真編寫代碼之前，大家應(yīng)該多花一些時(shí)間來(lái)搭建開發(fā)環(huán)境，并盡可能地熟悉手中瀏覽器的開發(fā)者工具。建議大家在第2章結(jié)束前，盡可能縮短自己的開發(fā)周期，因?yàn)樵跍?zhǔn)備階段多花的時(shí)間將會(huì)大大提高后續(xù)的開發(fā)效率。
最后要感謝大家購(gòu)買本書。筆者迫不及待地想要看到你自己創(chuàng)造的游戲!
David Geary
科羅拉多州，柯林斯堡
2014年
Acknowledgements 致 謝
我非常慶幸自己能夠擁有一位非常優(yōu)秀的編輯，他也是我20年寫作生涯里的唯一一位編輯，一個(gè)總能從我的下一本書中讀懂并接受我的觀念的編輯，一個(gè)總是指導(dǎo)我將概念變成作品的編輯，Greg Doench。像往常一樣，Greg Doench在本書從計(jì)劃寫作到成書的全過(guò)程中給了我充分的幫助及指導(dǎo)。
Mary Lou Nohr是一位非常棒的文字編輯，她參與編輯了我此前的所有著作。當(dāng)她再次欣然同意擔(dān)任本書的責(zé)任編輯時(shí)，我感到自己非常幸運(yùn)。
這是我和Alina Kirsanova合作的第2本書，Alina Kirsanova是一位非常出色的排版編輯，我的PDF文件經(jīng)過(guò)她的處理后，總會(huì)變得非常漂亮。Julie Nahil監(jiān)督了本書的出版，使整個(gè)出版過(guò)程都能按照出版商的要求如期進(jìn)行。
每當(dāng)完成一本書的寫作時(shí)，我都會(huì)選擇那些個(gè)人認(rèn)為能夠幫助我改進(jìn)作品的人來(lái)?yè)?dān)任審稿人。這一次我選擇了4位非常出色的審稿人：Jim O'Hara、Timothy Harrington、Simon Sarris和Willam Malone。Gintas Sanders允許我在Snail Bait游戲中使用他的金幣圖片，并指出了Snail Bait游戲中的許多不足。
在為O’Reilly拍攝“HTML5二維游戲開發(fā)”視頻時(shí)，我有幸接觸到了當(dāng)時(shí)的現(xiàn)場(chǎng)觀眾，其中一位觀眾給我留下了深刻印象，他向我提出了很多問(wèn)題和建議，此人就是本書的審稿人Jim O’Hara。在此后的審稿過(guò)程中，Jim O’Hara一如既往地認(rèn)真負(fù)責(zé)，向我提出了許多好問(wèn)題、好建議。
編輯Greg Doench介紹我認(rèn)識(shí)了Tim Harrington，他是德銳大學(xué)的一個(gè)高級(jí)學(xué)術(shù)應(yīng)用分析師，并且具有游戲開發(fā)的實(shí)際經(jīng)驗(yàn)。他的許多建議使我深受啟發(fā)，并促使我重新思考如何更好地完成本書。
我一直在為本書尋找一位非常了解游戲編程的圖形專家，最后我找到了Simon Sarris。讓我喜出望外的是，他不僅是一位精通游戲編程的圖形專家，還是一位優(yōu)秀的作家，他提出的幾種不同方法幫助我完善了本書。
最后，我很慶幸William Malone能夠?qū)忛啽緯illiam是一位專業(yè)的游戲開發(fā)人員，他開發(fā)了Sesame Street游戲（相關(guān)信息請(qǐng)查閱http://bit.ly/1nlSY3N）。William的工作對(duì)本書產(chǎn)生了深刻的影響，他指出了我忽略了的許多細(xì)節(jié)，特別是關(guān)于移動(dòng)設(shè)備的問(wèn)題。
查看全部↓
David Geary，是《Core HTML5 Canvas》一書的作者，HTML5 Denver社區(qū)的聯(lián)合創(chuàng)始人，也是計(jì)算機(jī)圖形學(xué)和網(wǎng)絡(luò)應(yīng)用開發(fā)的著名專家。他之前寫過(guò)8本書，包括暢銷書《Graphic Java》以及《Core Java Server Faces》，讀者可以在推特@davidgeary上關(guān)注他。
譯者序
前言
致謝
第1章 概述 1
1.1 Snail Bait游戲 3
1.2 HTML5游戲開發(fā)最佳實(shí)踐 8
1.2.1 窗口失去焦點(diǎn)時(shí)暫停游戲 8
1.2.2 窗口重獲焦點(diǎn)時(shí)實(shí)現(xiàn)倒計(jì)時(shí)功能 9
1.2.3 使用CSS實(shí)現(xiàn)UI特效 10
1.2.4 對(duì)游戲運(yùn)行緩慢的狀態(tài)做出檢測(cè)和處理 11
1.2.5 添加社交功能 11
1.2.6 將所有游戲圖像放在單獨(dú)的sprite表單中 11
1.2.7 在服務(wù)器中存儲(chǔ)高分榜和實(shí)時(shí)游戲數(shù)據(jù) 13
1.3 特別功能 13
1.4 Snail Bait游戲中的HTML和CSS 15
1.5 開始Snail Bait游戲編程 21
1.6 本書中使用的JavaScript 23
1.7 小結(jié) 25
1.8 練習(xí) 26
第2章 原始素材和開發(fā)環(huán)境 27
2.1 使用開發(fā)者工具 28
2.1.1 控制臺(tái) 29
2.1.2 Chrome Canary的幀速率計(jì)數(shù)器 32
2.1.3 調(diào)試 34
2.1.4 時(shí)間線 35
2.1.5 Profiling 39
2.2 獲取資源 40
2.2.1 圖像 40
2.2.2 圖像處理 41
2.2.3 音效和音樂(lè) 41
2.2.4 動(dòng)畫 42
2.3 使用CSS背景 43
2.4 生成小圖標(biāo) 45
2.5 縮短編碼周期 46
2.6 小結(jié) 48
2.7 練習(xí) 48
第3章 圖形和動(dòng)畫 49
3.1 使用HTML5 canvas元素繪制圖形和圖像 51
3.1.1 繪制背景 52
3.1.2 繪制跑步小人 53
3.1.3 繪制平臺(tái) 53
3.2 實(shí)現(xiàn)平滑的HTML5動(dòng)畫 55
3.2.1 requestAnimationFrame()方法 57
3.2.2 requestAnimationFrame()的polyfill實(shí)現(xiàn) 57
3.3 實(shí)現(xiàn)游戲主循環(huán) 60
3.4 計(jì)算幀速率 61
3.5 滾動(dòng)游戲背景 62
3.5.1 平移坐標(biāo)系 62
3.5.2 滾動(dòng)Snail Bait游戲的背景 65
3.6 制作基于時(shí)間的運(yùn)動(dòng) 67
3.7 反轉(zhuǎn)滾動(dòng)方向 67
3.8 繪制動(dòng)畫幀 68
3.9 使用視差產(chǎn)生視深的假象 68
3.10 小結(jié) 71
3.11 練習(xí) 71
第4章 游戲的基本架構(gòu) 72
4.1 在JavaScript對(duì)象中封裝游戲函數(shù) 73
4.1.1 SnailBait的構(gòu)造函數(shù) 74
4.1.2 SnailBait的原型 75
4.2 理解JavaScript語(yǔ)言中挑剔的this指針 77
4.3 處理鍵盤輸入 79
4.4 玩家按p鍵時(shí)暫�；蛘呋謴�(fù)游戲 81
4.5 凍結(jié)游戲，確保它精確地在暫停的位置恢復(fù) 82
4.6 在窗口失去焦點(diǎn)時(shí)暫停游戲 83
4.7 使用動(dòng)態(tài)的倒計(jì)時(shí)來(lái)恢復(fù)一個(gè)暫停的游戲 84
4.7.1 向游戲玩家顯示提示板（簡(jiǎn)短信息） 85
4.7.2 Snail Bait的倒計(jì)時(shí) 87
4.8 小結(jié) 89
4.9 練習(xí) 90
第5章 游戲加載動(dòng)畫 91
5.1 定義Snail Bait游戲的窗口 93
5.2 使用CSS過(guò)渡讓元素淡入、淡出 96
5.2.1 讓元素淡入 97
5.2.2 讓元素淡出 98
5.2.3 snailbait-toast元素的CSS 99
5.2.4 顯示和隱藏提示板 100
5.3 讓擁有與CSS過(guò)渡屬性O(shè)pacity關(guān)聯(lián)的元素淡入、淡出 103
5.4 實(shí)現(xiàn)加載動(dòng)畫 105
5.5 顯示游戲畫面 109
5.6 小結(jié) 112
5.7 練習(xí) 113
第6章 sprite對(duì)象 114
6.1 sprite對(duì)象 116
6.1.1 sprite對(duì)象的屬性 118
6.1.2 sprite對(duì)象的構(gòu)造函數(shù) 119
6.1.3 sprite對(duì)象的方法 119
6.2 將sprite對(duì)象整合到游戲主循環(huán)中 121
6.3 實(shí)現(xiàn)sprite對(duì)象的artist對(duì)象 124
6.3.1 圖形artist對(duì)象 124
6.3.2 圖像artist對(duì)象 125
6.3.3 sprite圖像表單artist對(duì)象 125
6.3.4 定義sprite圖像表單單元格 128
6.4 創(chuàng)建和初始化游戲的sprite對(duì)象 130
6.5 使用元數(shù)據(jù)定義sprite對(duì)象 133
6.6 滾動(dòng)sprite對(duì)象 136
6.7 小結(jié) 138
6.8 練習(xí) 138
第7章 sprite對(duì)象行為 140
7.1 行為基礎(chǔ) 142
7.2 跑步小人行為 143
7.3 跑步小人的跑動(dòng)行為 146
7.4 輕量級(jí)行為 148
7.5 游戲獨(dú)立行為 150
7.6 組合行為 155
7.7 小結(jié) 159
7.8 練習(xí) 159
第8章 時(shí)間軸，第1部分：有限行為及線性運(yùn)動(dòng) 160
8.1 實(shí)現(xiàn)一個(gè)初始的跳躍行為算法 161
8.2 將處理跳躍行為的職責(zé)轉(zhuǎn)交給跑步小人 162
8.3 實(shí)現(xiàn)跳躍行為 164
8.4 使用秒表記錄動(dòng)畫時(shí)間 165
8.5 重新定義跳躍行為 168
8.6 實(shí)現(xiàn)線性運(yùn)動(dòng) 170
8.6.1 上升階段 170
8.6.2 下降階段 171
8.7 暫停行為 173
8.8 小結(jié) 175
8.9 練習(xí) 175
第9章 時(shí)間軸，第2部分：非線性運(yùn)動(dòng) 176
9.1 理解時(shí)間及其衍生物 177
9.2 使用動(dòng)畫計(jì)時(shí)器和緩變功能實(shí)現(xiàn)非線性跳躍 177
9.3 實(shí)現(xiàn)動(dòng)畫計(jì)時(shí)器 179
9.4 實(shí)現(xiàn)緩變功能 181
9.5 微調(diào)緩變功能 184
9.6 實(shí)現(xiàn)真實(shí)的跳動(dòng)行為 185
9.7 使行為隨機(jī)化 189
9.8 使用動(dòng)畫計(jì)時(shí)器和緩變功能實(shí)現(xiàn)非線性顏色改變 190
9.9 小結(jié) 193
9.10 練習(xí) 193
第10章 時(shí)間軸，第3部分：時(shí)間系統(tǒng) 194
10.1 Snail Bait游戲的時(shí)間系統(tǒng) 195
10.2 創(chuàng)建和啟動(dòng)時(shí)間系統(tǒng) 197
10.3 將時(shí)間系統(tǒng)整合進(jìn)Snail Bait游戲中 198
10.3.1 使用時(shí)間系統(tǒng)驅(qū)動(dòng)游戲動(dòng)畫 198
10.3.2 實(shí)現(xiàn)使用時(shí)間系統(tǒng)修改游戲時(shí)間流的函數(shù) 199
10.3.3 在計(jì)算幀速率時(shí)分解時(shí)間比率 199
10.3.4 使用時(shí)間系統(tǒng)暫停和恢復(fù)游戲 200
10.4 重新定義秒表和動(dòng)畫計(jì)時(shí)器的當(dāng)前時(shí)間 202
10.5 實(shí)現(xiàn)時(shí)間系統(tǒng) 206
10.6 小結(jié) 208
10.7 練習(xí) 208
第11章 碰撞檢測(cè) 209
11.1 碰撞檢測(cè)過(guò)程 210
11.2 碰撞檢測(cè)技術(shù) 211
11.3 Snail Bait游戲中的碰撞檢測(cè) 212
11.3.1 sprite對(duì)象的碰撞矩形 212
11.3.2 跑步小人的碰撞行為 214
11.4 為碰撞檢測(cè)選擇碰撞候選對(duì)象 215
11.5 在跑步小人與其他sprite對(duì)象之間檢測(cè)碰撞 216
11.6 處理碰撞 217
11.7 優(yōu)化碰撞檢測(cè) 220
11.7.1 改善包圍盒 220
11.7.2 使用空間分割方法 221
11.8 監(jiān)測(cè)碰撞檢測(cè)的運(yùn)行性能 222
11.9 編程實(shí)現(xiàn)碰撞檢測(cè)的邊界案例 223
11.10 小結(jié) 226
11.11 練習(xí) 226
第12章 重力 228
12.1 為跑步小人實(shí)現(xiàn)墜落行為 228
12.2 實(shí)現(xiàn)重力 230
12.2.1 跑步小人的墜落行為 232
12.2.2 計(jì)算初始下降速度 236
12.2.3 在跑步小人墜落過(guò)程中暫停游戲 237
12.3 最終版的碰撞檢測(cè) 237
12.4 小結(jié) 238
12.5 練習(xí) 239
第13章 sprite動(dòng)畫和特殊效果 240
13.1 實(shí)現(xiàn)sprite動(dòng)畫 241
13.2 創(chuàng)建特效 246
13.2.1 晃動(dòng)游戲畫面 246
13.2.2 場(chǎng)景切換 248
13.3 編排效果 253
13.3.1 炸死蜜蜂 254
13.3.2 引爆按鈕 256
13.4 小結(jié) 258
13.5 練習(xí) 258
第14章 聲音和音樂(lè) 259
14.1 創(chuàng)建聲音和音樂(lè)文件 261
14.2 加載音樂(lè)和音效 262
14.3 設(shè)置聲音和音樂(lè)控件 263
14.4 播放音樂(lè) 264
14.5 循環(huán)播放音樂(lè) 265
14.6 播放音效 267
14.6.1 創(chuàng)建sprite音頻對(duì)象 270
14.6.2 定義音效對(duì)象 271
14.6.3 實(shí)現(xiàn)多聲道播放音效 272
14.7 打開和關(guān)閉聲音播放 279
14.8 小結(jié) 280
14.9 練習(xí) 280
第15章 移動(dòng)設(shè)備 281
15.1 在移動(dòng)設(shè)備上運(yùn)行Snail Bait游戲 284
15.2 檢測(cè)移動(dòng)設(shè)備 284
15.3 縮放游戲以適應(yīng)移動(dòng)設(shè)備 286
15.3.1 HTML5 viewport元標(biāo)簽 287
15.3.2 以編程方式調(diào)整游戲畫面以適應(yīng)移動(dòng)設(shè)備屏幕 291
15.4 修改游戲動(dòng)畫底部的控制說(shuō)明 295
15.5 修改歡迎界面 295
15.5.1 實(shí)現(xiàn)歡迎提示 296
15.5.2 實(shí)現(xiàn)移動(dòng)設(shè)備中的控制說(shuō)明 301
15.5.3 實(shí)現(xiàn)移動(dòng)設(shè)備版開始提示 305
15.5.4 顯示移動(dòng)設(shè)備中的開始提示 306
15.6 添加觸控事件 307
15.7 在移動(dòng)設(shè)備中處理音頻的方法 310
15.8 在主屏幕上添加啟動(dòng)圖標(biāo)，并以全屏模式運(yùn)行游戲 312
15.9 小結(jié) 313
15.10 練習(xí) 313
第16章 粒子系統(tǒng) 314
16.1 排煙孔粒子系統(tǒng) 315
16.2 使用排煙孔粒子系統(tǒng) 318
16.2.1 定義排煙孔粒子系統(tǒng)數(shù)據(jù) 318
16.2.2 創(chuàng)建排煙孔粒子系統(tǒng) 318
16.2.3 將排煙孔粒子系統(tǒng)存入Snail Bait游戲的sprite對(duì)象數(shù)組中 319
16.2.4 在每個(gè)動(dòng)畫幀中滾動(dòng)排煙孔粒子系統(tǒng) 320
16.3 編程實(shí)現(xiàn)排煙孔粒子系統(tǒng) 321
16.3.1 把排煙孔粒子系統(tǒng)偽裝成sprite對(duì)象 321
16.3.2 組合火焰粒子 323
16.3.3 組合煙泡 327
16.4 暫停排煙孔粒子系統(tǒng) 337
16.5 小結(jié) 338
16.6 練習(xí) 338
第17章 用戶界面 339
17.1 記錄玩家游戲成績(jī) 340
17.2 增加游戲生命指示器 343
17.3 顯示游戲字幕 348
17.4 使用Tweet發(fā)布玩家游戲得分 354
17.5 當(dāng)游戲運(yùn)行緩慢時(shí)通知游戲玩家 357
17.5.1 監(jiān)控幀速率 361
17.5.2 編程實(shí)現(xiàn)運(yùn)行緩慢通知的事件處理句柄 363
17.6 編程實(shí)現(xiàn)通關(guān)動(dòng)畫 364
17.7 小結(jié) 368
17.8 練習(xí) 368
第18章 開發(fā)者后門程序 370
18.1 Snail Bait游戲的開發(fā)者后門 372
18.2 開發(fā)者后門的HTML元素及CSS 373
18.3 顯示及隱藏開發(fā)者后門 375
18.4 更新開發(fā)者后門的元素 377
18.5 實(shí)現(xiàn)開發(fā)者后門的復(fù)選框 378
18.5.1 顯示及隱藏碰撞矩形 380
18.5.2 啟用或禁用運(yùn)行緩慢通知 382
18.5.3 顯示或隱藏排煙孔粒子系統(tǒng) 383
18.5.4 更新開發(fā)者后門的復(fù)選框 383
18.6 實(shí)現(xiàn)開發(fā)者后門的滑動(dòng)條 384
18.6.1 為開發(fā)者后門的滑動(dòng)條定義HTML元素及CSS 386
18.6.2 在Snail Bait游戲的Java-Script代碼中訪問(wèn)滑動(dòng)條的讀數(shù) 387
18.6.3 創(chuàng)建并初始化開發(fā)者后門的滑動(dòng)條 388
18.6.4 將運(yùn)行緩慢的滑動(dòng)條關(guān)聯(lián)到游戲中 389
18.6.5 將時(shí)間速率滑動(dòng)條關(guān)聯(lián)到游戲中 389
18.6.6 將游戲關(guān)聯(lián)到時(shí)間速率滑動(dòng)條上 390
18.6.7 在顯示開發(fā)者后門之前更新滑動(dòng)條 391
18.7 實(shí)現(xiàn)開發(fā)者后門刻度尺 392
18.7.1 創(chuàng)建并訪問(wèn)刻度尺的canvas元素 393
18.7.2 淡入淡出刻度尺 394
18.7.3 繪制刻度尺 395
18.7.4 更新刻度尺 396
18.7.5 拖動(dòng)游戲畫面 397
18.8 小結(jié) 401
18.9 練習(xí) 401
第19章 服務(wù)器端開發(fā)：內(nèi)部指標(biāo)、高分記錄及部署 403
19.1 Node.js及socket.io簡(jiǎn)介 404
19.2 在Snail Bait游戲中引入socket.io 406
19.3 創(chuàng)建一個(gè)簡(jiǎn)單的服務(wù)器 407
19.4 在服務(wù)器端創(chuàng)建套接字 407
19.5 啟動(dòng)服務(wù)器 408
19.6 在客戶端創(chuàng)建一個(gè)套接字并連接到服務(wù)器 408
19.7 記錄游戲內(nèi)部指標(biāo) 409
19.8 管理高分記錄 412
19.8.1 實(shí)現(xiàn)高分記錄的用戶界面 413
19.8.2 檢索服務(wù)器中的高分記錄 415
19.8.3 在客戶端顯示高分記錄 418
19.8.4 監(jiān)視姓名輸入 419
19.8.5 驗(yàn)證并將高分記錄存儲(chǔ)到服務(wù)器 420
19.8.6 重新顯示高分記錄 422
19.8.7 開始新游戲 422
19.9 部署Snail Bait游戲 423
19.10 將文件上傳到服務(wù)器 425
19.11 小結(jié) 426
19.12 練習(xí) 426
第20章 后記：Bodega Revenge游戲 428
20.1 設(shè)計(jì)用戶界面 430
20.2 創(chuàng)建sprite表單 433
20.3 實(shí)例化游戲 433
20.4 實(shí)現(xiàn)sprite對(duì)象 434
20.4.1 炮塔 434
20.4.2 炮彈 437
20.4.3 小鳥 439
20.5 實(shí)現(xiàn)sprite對(duì)象的行為 441
20.5.1 炮塔的行為 442
20.5.2 炮彈的行為 447
20.5.3 小鳥的行為 450
20.6 繪制剩余炮彈指示器 454
20.7 為移動(dòng)設(shè)備實(shí)現(xiàn)觸摸控制 456
20.8 小結(jié) 458
20.9 練習(xí) 459
查看全部↓
新書資訊