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

前言

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

內(nèi)容概要

《HTML5 Canvas游戲開發(fā)實戰(zhàn)》主要講解使用HTML5 Canvas來開發(fā)和設(shè)計各類常見游戲的思路和技巧，在介紹HTML5 Canvas相關(guān)特性的同時，還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理，讓讀者不僅知其然，而且知其所以然。在書中，除了介紹了HTML5 Canvas的基礎(chǔ)API之外，還重點闡述了如何在JavaScript中運用面向?qū)ο蟮木幊趟枷雭磉M行游戲開發(fā)。
《HTML5 Canvas游戲開發(fā)實戰(zhàn)》在介紹每個游戲開發(fā)的過程時，都會包括游戲分析、開發(fā)過程、代碼解析和小結(jié)等相關(guān)內(nèi)容，以幫助讀者了解每種類型游戲開發(fā)的詳細(xì)步驟，讓讀者徹底掌握各種類型游戲的開發(fā)思想。最后，還通過數(shù)據(jù)對比分析，指導(dǎo)讀者提升程序的性能，寫出高效的代碼，從而開發(fā)出運行流暢的游戲。
海報：

作者簡介

張路斌，資深前端開發(fā)工程師和游戲開發(fā)工程師，從事Web開發(fā)和游戲開發(fā)多年，精通HTML5和Flash等技術(shù)。HTML5開源游戲引擎lufylegend.js的開發(fā)者，利用HTML5和Flash等技術(shù)獨立開發(fā)了大型網(wǎng)頁游戲アイドルバトル、Flash游戲ポイガチャ、多平臺游戲三國記系列，以及數(shù)十款手機小游戲，游戲開發(fā)經(jīng)驗十分豐富。

書籍目錄

前言第一部分 準(zhǔn)備工作篇第1章 準(zhǔn)備工作 21.1 HTML5介紹 21.1.1 什么是HTML5 21.1.2 HTML5的新特性 21.2 Canvas簡介 51.2.1 Canvas標(biāo)簽的歷史 51.2.2 Canvas的定義和用法 61.2.3 如何使用Canvas來繪圖 61.2.4 Canvas的限制 71.3 開發(fā)與運行環(huán)境的準(zhǔn)備 71.3.1 瀏覽器的支持 71.3.2 準(zhǔn)備一個本地的服務(wù)器 81.4 開發(fā)工具的選擇 81.5 測試與上傳代碼 121.6 JavaScript中的面向?qū)ο?131.6.1 類 131.6.2 靜態(tài)類 161.6.3 繼承 161.7 小結(jié) 17第二部分 基礎(chǔ)知識篇第2章 Canvas基本功能 202.1 繪制基本圖形 202.1.1 畫線 202.1.2 畫矩形 222.1.3 畫圓 242.1.4 畫圓角矩形 262.1.5 擦除Canvas畫板 272.2 繪制復(fù)雜圖形 282.2.1 畫曲線 282.2.2 利用clip在指定區(qū)域繪圖 302.2.3 繪制自定義圖形 312.3 繪制文本 322.3.1 繪制文字 322.3.2 文字設(shè)置 332.3.3 文字的對齊方式 382.4 圖片操作 412.4.1 利用drawImage繪制圖片 412.4.2 利用getImageData和putImageData繪制圖片 452.4.3 利用createImageData新建像素 472.5 小結(jié) 49第3章 Canvas高級功能 503.1 變形 503.1.1 放大與縮小 503.1.2 平移 533.1.3 旋轉(zhuǎn) 543.1.4 利用transform矩陣實現(xiàn)多樣化的變形 563.2 圖形的渲染 653.2.1 繪制顏色漸變效果的圖形 653.2.2 顏色合成之globalCompositeOperation屬性 673.2.3 顏色反轉(zhuǎn) 693.2.4 灰度控制 703.2.5 陰影效果 713.3 自定義畫板 723.3.1 畫板的建立 723.3.2 Canvas畫布的導(dǎo)出功能 793.4 小結(jié) 81第4章 lufylegend開源庫件 824.1 lufylegend庫件簡介 824.1.1 工作原理 824.1.2 庫件使用流程 834.2 圖片的加載與顯示 844.2.1 圖片顯示舉例 844.2.2 LBitmapData對象 864.2.3 LBitmap對象 874.3 層的概念 884.4 使用LGraphics對象繪圖 904.4.1 繪制矩形 904.4.2 繪制圓 914.4.3 繪制任意多邊形 924.4.4 使用Canvas的原始繪圖函數(shù)進行繪圖 934.4.5 使用LSprite對象進行繪圖 944.4.6 使用LGraphics對象繪制圖片 954.5 文本 1014.5.1 文本屬性 1014.5.2 輸入框 1024.6 事件 1034.6.1 鼠標(biāo)事件 1034.6.2 循環(huán)事件 1044.6.3 鍵盤事件 1054.7 按鈕 1064.8 動畫 1084.9 小結(jié) 113第三部分 開發(fā)實戰(zhàn)篇第5章 從簡單做起—“石頭剪子布”游戲 1165.1 游戲分析 1165.2 必要的JavaScript知識 1175.2.1 隨機數(shù) 1175.2.2 條件分支 1175.3 分層實現(xiàn) 1175.4 各個層的基本功能 1195.4.1 基本畫面顯示 1195.4.2 結(jié)果層的顯示 1265.4.3 控制層的顯示 1275.5 出拳 1295.6 結(jié)果判定 1315.7 小結(jié) 137第6章 開發(fā)“俄羅斯方塊”游戲 1386.1 游戲分析 1386.2 必要的JavaScript知識 1386.3 游戲標(biāo)題畫面顯示 1396.4 向游戲里添加方塊 1416.5 控制方塊的移動 1526.5.1 鍵盤事件 1526.5.2 觸屏事件 1556.6 方塊的消除和得分的顯示 1576.7 小結(jié) 160第7章 開發(fā)“是男人就下一百層”游戲 1617.1 游戲分析 1617.2 游戲標(biāo)題畫面顯示 1617.3 讀取圖片與背景顯示 1627.4 添加一個靜止的地板 1677.5 添加游戲主角 1707.5.1 讓游戲主角出現(xiàn)在畫面上 1707.5.2 通過鍵盤事件來控制游戲主角的移動 1777.5.3 通過觸屏事件來控制游戲主角的移動 1787.6 添加多種多樣的地板 1797.6.1 會消失的地板 1797.6.2 帶刺的地板 1817.6.3 帶有彈性的地板 1827.6.4 向左和向右移動的地板 1847.7 游戲數(shù)據(jù)的顯示 1877.8 游戲結(jié)束與重開 1907.9 小結(jié) 192第8章 開發(fā)射擊類游戲 1938.1 游戲分析 1938.2 添加一架可控飛機 1948.2.1 添加一個飛機類 1948.2.2 可控飛機類 1978.3 為飛機添加多樣化的子彈 2038.3.1 建立一個子彈類 2038.3.2 單發(fā)子彈 2058.3.3 多發(fā)子彈 2078.3.4 環(huán)形子彈 2088.3.5 反向子彈 2098.4 添加敵機 2098.4.1 建立一個敵機類 2108.4.2 建立一個敵機Boss類 2148.5 碰撞檢測 2178.5.1 飛機與子彈的碰撞 2178.5.2 我機與敵機的碰撞 2208.6 子彈的變更 2218.6.1 建立一個彈藥類 2228.6.2 彈藥與我機的碰撞 2238.7 飛機生命值的顯示 2258.8 游戲勝利與失敗判定 2268.9 小結(jié) 228第9章 開發(fā)物理游戲 2299.1 Box2D簡介 2299.2 Box2dWeb在lufylegend庫件中的使用 2299.3 創(chuàng)建各種各樣的物體 2349.3.1 矩形物體 2349.3.2 圓形物體 2379.3.3 多邊形物體 2399.4 響應(yīng)鼠標(biāo)拖拽物體 2429.5 關(guān)節(jié)（Joint） 2439.5.1 距離關(guān)節(jié)（b2DistanceJointDef） 2439.5.2 旋轉(zhuǎn)關(guān)節(jié)（b2RevoluteJointDef） 2459.5.3 滑輪關(guān)節(jié)（b2PulleyJointDef） 2479.5.4 移動關(guān)節(jié)（b2PrismaticJoint） 2489.5.5 齒輪關(guān)節(jié)（b2GearJoint） 2509.5.6 懸掛關(guān)節(jié)（b2LineJoint） 2529.5.7 焊接關(guān)節(jié)（b2WeldJoint） 2539.5.8 鼠標(biāo)關(guān)節(jié)（Mouse Joint） 2549.6 力 2549.7 碰撞檢測 2569.8 鏡頭移動 2609.9 做一個簡單的物理游戲 2639.10 小結(jié) 267第10章 開發(fā)網(wǎng)絡(luò)游戲 26810.1 HTTP通信 26810.1.1 如何實現(xiàn)HTTP通信 26810.1.2 HTTP通信的弊端 27510.2 Socket通信 27510.2.1 區(qū)分Socket通信和HTTP通信 27610.2.2 服務(wù)器端 27610.2.3 客戶端 28110.3 利用WebSocket實現(xiàn)簡單的聊天室 28310.4 做一款多人在線的坦克大戰(zhàn) 29310.4.1 服務(wù)器 29310.4.2 客戶端 29310.5 小結(jié) 307第四部分 技能提高篇第11章 提高效率的分析 31011.1 繪圖時使用小數(shù)的影響 31011.2 drawImage和putImageData的效率比較 31111.3 區(qū)域更新和圖片大小對繪圖效率的影響 31111.4 圖片格式對繪圖效率的影響 31311.5 優(yōu)化代碼以提高整體效率 31411.5.1 使用位運算 31411.5.2 少用Math靜態(tài)類 31611.5.3 優(yōu)化算法 31911.6 小結(jié) 322

編輯推薦

《HTML5 Canvas游戲開發(fā)實戰(zhàn)》系統(tǒng)講解HTML 5 Canvas的基礎(chǔ)知識和高級技巧，深入剖析開源庫件lufylegend的原理與使用；以實例為向?qū)?，詳?xì)講解射擊游戲、物理游戲、網(wǎng)絡(luò)游戲、頁面游戲等各類游戲的開發(fā)思路和技巧。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

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

---