HTML5 Canvas遊戲開發實戰（簡體書）

《HTML5Canvas遊戲開發實戰》主要講解使用HTML5Canvas來開發和設計各類常見遊戲的思路和技巧，在介紹HTML5Canvas相關特性的同時，還通過遊戲開發實例深入剖析了其內在原理，讓讀者不僅知其然，而且知其所以然。在本書中，除了介紹了HTML5Canvas的基礎API之外，還重點闡述了如何在JavaScript中運用面向對象的編程思想來進行遊戲開發。《HTML5Canvas遊戲開發實戰》在介紹每個遊戲開發的過程時，都會包括遊戲分析、開發過程、代碼解析和小結等相關內容，以幫助讀者瞭解每種類型遊戲開發的詳細步驟，讓讀者徹底掌握各種類型遊戲的開發思想。最後，還通過數據對比分析，指導讀者提升程序的性能，寫出高效的代碼，從而開發出運行流暢的遊戲。

張路斌，資深前端開發工程師和遊戲開發工程師，從事Web開發和遊戲開發多年，精通HTML5和Flash等技術。HTML5開源遊戲引擎lufylegend．js的開發者，利用HTML5和Flash等技術獨立開發了大型網頁遊戲、Flash、多平臺遊戲三國記系列，以及數十款手機小遊戲，遊戲開發經驗十分豐富。

《HTML5 Canvas游戲開發實戰》系統講解HTML 5 Canvas的基礎知識和高級技巧，深入剖析開源庫件lufylegend的原理與使用；以實例為向導，詳細講解射擊游戲、物理游戲、網絡游戲、頁面游戲等各類游戲的開發思路和技巧。

前言
為什么要寫這本書
并非計算機專業的我，卻最終走上了編程之路，并寫了這樣一本書，為什么呢？其實一切都是因為和游戲結了緣。
小時候我非常喜歡玩游戲，為了玩游戲和小伙伴們干過不少調皮搗蛋的事情。初中為了得到自己的第一臺游戲機，和父親打賭，破天荒拿了全班第一名。當然有了游戲機的相伴，從那以后就再也沒有拿過第一名了。因為數學上較有優勢，所以讀大學時選擇的是數學專業，沒有選讀計算機讓后來做開發的我多少感到有些遺憾。和其他人一樣，大學是真正改變我人生的時期，第一次有了電腦，第一次從室友嘴里得知QQ為何物（這個大土包子），第一次接觸了網游（還是大土包子），那時候非常癡迷于光榮公司的《三國志英杰傳》和《三國志曹操傳》，并且通過學習，試著制作了我人生中的第一款游戲《楊家將傳奇》，在同類游戲中小有名氣。如果你也喜歡玩《三國志曹操傳》的MOD，也經歷過2003年到2007年那段《三國志曹操傳》MOD最鼎盛的時期，那么你也許會認識我，那時候我有個網名叫“回眸75度”。那時候制作的游戲因為不涉及編程，所以還不能叫做開發。大學畢業后，我開始思考自己未來的路，雖然沒有任何編程基礎，但是因大學時期游戲的制作，令我堅信游戲開發是我向往的職業。也是因為喜歡日本的游戲，最終來到了日本做軟件開發，雖然并非全職的游戲開發者，但是我一直都在關注并學習著游戲的開發，不曾間斷，一直至今。
我是一個喜歡不斷學習新知識的人，所以當HTML5作為一個新技術出現的時候，我沒有理由不去了解它。由于對JavaScript有一定的基礎，所以我在學習HTML5的Canvas時，上手非常快。出于對ActionScript的喜愛，我一開始便試著在JavaScript中模仿ActionScript的API來做開發，并且在博客上發表了《用仿ActionScript的語法來編寫HTML5》系列文章，這便是最初的lufylegend開源庫件的構建過程。當我把自己研究的類庫整合到一起后，發現它使用起來十分方便，使用它來開發游戲可以節約大量的開發時間，于是我將其分享到了網上供大家免費使用，希望可以給相關開發者提供便利。
我剛開始接觸HTML5是在2011年，那時候正是HTML5炒得最火的時候，網上到處都是關于HTML5替代Flash的言論。我從來不認為Flash會因為HTML5而消失，但是我相信HTML5代表著互聯網未來發展的方向。雖然HTML5并不像傳言那樣“一次編寫，到處運行”，但是你只需要略加修改和調整就能讓你的應用適用于另一個平臺。
網頁游戲有著不可替代的優勢，而HTML5無疑是未來網頁游戲的首選技術之一，特別是在移動領域HTML5是唯一的工具，至少現在它是你唯一的選擇。雖然HTML5還很年輕，還有很多不成熟的地方，但是它正在不斷地完善，相信它不會讓我們等太久。所以學習這門新技術非常有必要。我非常希望能將自己的學習心得分享給大家，因此寫了這本書，希望這本書能夠將你帶入HTML5的游戲世界里。
讀者對象
本書主要適合于以下讀者：
對HTML5開發感興趣的人。本書對HTML5 Canvas進行了詳細的介紹，想要學習HTML5開發的話絕對值得一看。
對游戲開發感興趣的人。本書介紹了多個游戲實例的開發，在如何構建游戲方面對游戲開發人員來說有一定的借鑒作用。
Flash開發者。由于JavaScript和ActionScript具有一定的相似性，本書會模仿ActionScript的語法來進行游戲的構建和開發，如果你是一個Flash開發者，那么我相信本書會帶你快速進入HTML5的世界。
如何閱讀本書
本書從認識HTML5和JavaScript的面向對象開始展開，如果你從來沒有接觸過HTML5開發，那么請從第1章準備工作開始學習；如果你對HTML5有一定的了解，但不夠全面，那么請從第2章Canvas基本功能開始系統學習；如果你已經全面掌握了Canvas的API，那么可以從第4章lufylegend開源庫件開始閱讀，了解了lufylegend開源庫件的運行原理之后再正式開始游戲的實戰篇學習。
全書共包括四大部分，一共11章。
第一部分（第1章）是準備工作篇，介紹一些HTML5的發展歷史和開發環境的搭建。
第二部分（第2～4章）是基礎知識篇，詳細講解HTML5 Canvas的基礎知識以及開源庫件lufylegend的使用方法。
第三部分（第5～10章）是開發實戰篇，通過實例為大家講解如何使用lufylegend開源庫件來進行HTML5的游戲開發，游戲實例涉及各種常見的游戲類型，包括休閑、射擊、Box2d及網游等多個領域。
第四部分（第11章）是技能提高篇，介紹如何運用數據來分析提高程序的效率。
勘誤和支持
為了避免錯誤的發生，我已經將書中的源碼進行了多次測試，但是由于本人的知識水平有限，加之編寫的時間也很倉促，所以無法保證本書是100%正確的，書中也許會出現一些錯誤或者不準確的地方，懇請讀者批評指正，以便再版時消除這些錯誤。如果您在閱讀本書的過程中發現了不妥之處，歡迎您將錯誤信息發送到我的Web網站上。
當然，也歡迎您發送郵件，期待著您寶貴的意見和真摯反饋。
致謝
感謝我的父母，是你們給了我生命，給了我一顆不斷學習的心。
感謝無所不知的網絡，讓我可以隨時查閱資料。感謝無私地將自己的心得分享到網絡上的coder們，是你們解決了我很多技術上的疑問，使我不斷成長。
感謝機械工業出版社華章公司的楊繡國編輯，感謝你在百忙之中如此細心地審閱此書，是你的耐心和幫助引導我順利完成了全部書稿。
最后我還要特別感謝軟件工程師孫穎，是你跟我一起探討了書中的內容，你的智慧與創意性的思維給了我無限的靈感。
謹以此書，獻給眾多熱愛HTML5的朋友們。
張路斌（lufy）

前 言第一部分　準備工作篇第1章　準備工作1．1　HTML5介紹1．1．1　什麼是HTML51．1．2　HTML5的新特性1．2　Canvas簡介1．2．1　Canvas標簽的歷史1．2．2　Canvas的定義和用法1．2．3　如何使用Canvas來繪圖1．2．4　Canvas的限制1．3　開發與運行環境的準備1．3．1　瀏覽器的支持1．3．2　準備一個本地的服務器1．4　開發工具的選擇1．5　測試與上傳代碼1．6　JavaScript中的面向對象1．6．1　類1．6．2　靜態類1．6．3　繼承1．7　小結第二部分　基礎知識篇第2章　Canvas基本功能2．1　繪製基本圖形2．1．1　畫線2．1．2　畫矩形2．1．3　畫圓2．1．4　畫圓角矩形2．1．5　擦除Canvas畫板2．2　繪製複雜圖形2．2．1　畫曲線2．2．2　利用clip在指定區域繪圖2．2．3　繪製自定義圖形2．3　繪製文本2．3．1　繪製文字2．3．2　文字設置2．3．3　文字的對齊方式2．4　圖片操作2．4．1　利用drawImage繪製圖片2．4．2　利用getImageData和putImageData繪製圖片2．4．3　利用createImageData新建像素2．5　小結第3章　Canvas高級功能3．1　變形3．1．1　放大與縮小3．1．2　平移3．1．3　旋轉3．1．4　利用transform矩陣實現多樣化的變形3．2　圖形的渲染3．2．1　繪製顏色漸變效果的圖形3．2．2　顏色合成之globalCompositeOperation屬性3．2．3　顏色反轉3．2．4　灰度控制3．2．5　陰影效果3．3　自定義畫板3．3．1　畫板的建立3．3．2　Canvas畫布的導出功能3．4　小結第4章　lufylegend開源庫件4．1　lufylegend庫件簡介4．1．1　工作原理4．1．2　庫件使用流程4．2　圖片的加載與顯示4．2．1　圖片顯示舉例4．2．2　LBitmapData對象4．2．3　LBitmap對象4．3　層的概念4．4　使用LGraphics對象繪圖4．4．1　繪製矩形4．4．2　繪製圓4．4．3　繪製任意多邊形4．4．4　使用Canvas的原始繪圖函數進行繪圖4．4．5　使用LSprite對象進行繪圖4．4．6　使用LGraphics對象繪製圖片4．5　文本4．5．1　文本屬性4．5．2　輸入框4．6　事件4．6．1　鼠標事件4．6．2　循環事件4．6．3　鍵盤事件4．7　按鈕4．8　動畫4．9　小結第三部分　開發實戰篇第5章　從簡單做起-“石頭剪子布”遊戲5．1　遊戲分析5．2　必要的JavaScript知識5．2．1　隨機數5．2．2　條件分支5．3　分層實現5．4　各個層的基本功能5．4．1　基本畫面顯示5．4．2　結果層的顯示5．4．3　控制層的顯示5．5　出拳5．6　結果判定5．7　小結第6章　開發“俄羅斯方塊”遊戲6．1　遊戲分析6．2　必要的JavaScript知識6．3　遊戲標題畫面顯示6．4　向遊戲裡添加方塊6．5　控制方塊的移動6．5．1　鍵盤事件6．5．2　觸屏事件6．6　方塊的消除和得分的顯示6．7　小結第7章　開發“是男人就下一百層”遊戲7．1　遊戲分析7．2　遊戲標題畫面顯示7．3　讀取圖片與背景顯示7．4　添加一個靜止的地板7．5　添加遊戲主角7．5．1　讓遊戲主角出現在畫面上7．5．2　通過鍵盤事件來控制遊戲主角的移動7．5．3　通過觸屏事件來控制遊戲主角的移動7．6　添加多種多樣的地板7．6．1　會消失的地板7．6．2　帶刺的地板7．6．3　帶有彈性的地板7．6．4　向左和向右移動的地板7．7　遊戲數據的顯示7．8　遊戲結束與重開7．9　小結第8章　開發射擊類遊戲8．1　遊戲分析8．2　添加一架可控飛機8．2．1　添加一個飛機類8．2．2　可控飛機類8．3　為飛機添加多樣化的子彈8．3．1　建立一個子彈類8．3．2　單發子彈8．3．3　多發子彈8．3．4　環形子彈8．3．5　反向子彈8．4　添加敵機8．4．1　建立一個敵機類8．4．2　建立一個敵機Boss類8．5　碰撞檢測8．5．1　飛機與子彈的碰撞8．5．2　我機與敵機的碰撞8．6　子彈的變更8．6．1　建立一個彈藥類8．6．2　彈藥與我機的碰撞8．7　飛機生命值的顯示8．8　遊戲勝利與失敗判定8．9　小結第9章　開發物理遊戲9．1　Box2D簡介9．2　Box2dWeb在lufylegend庫件中的使用9．3　創建各種各樣的物體9．3．1　矩形物體9．3．2　圓形物體9．3．3　多邊形物體9．4　響應鼠標拖拽物體9．5　關節（Joint）9．5．1　距離關節（b2DistanceJointDef）9．5．2　旋轉關節（b2RevoluteJointDef）9．5．3　滑輪關節（b2PulleyJointDef）9．5．4　移動關節（b2PrismaticJoint）9．5．5　齒輪關節（b2GearJoint）9．5．6　懸掛關節（b2LineJoint）9．5．7　焊接關節（b2WeldJoint）9．5．8　鼠標關節（Mouse Joint）9．6　力9．7　碰撞檢測9．8　鏡頭移動9．9　做一個簡單的物理遊戲9．10　小結第10章　開發網絡遊戲10．1　HTTP通信10．1．1　如何實現HTTP通信10．1．2　HTTP通信的弊端10．2　Socket通信10．2．1　區分Socket通信和HTTP通信10．2．2　服務器端10．2．3　客戶端10．3　利用WebSocket實現簡單的聊天室10．4　做一款多人在線的坦克大戰10．4．1　服務器10．4．2　客戶端10．5　小結第四部分　技能提高篇第11章　提高效率的分析11．1　繪圖時使用小數的影響11．2　drawImage和putImageData的效率比較11．3　區域更新和圖片大小對繪圖效率的影響11．4　圖片格式對繪圖效率的影響11．5　優化代碼以提高整體效率11．5．1　使用位運算11．5．2　少用Math靜態類11．5．3　優化算法11．6　小結