《HTML5網頁遊戲設計從基礎到開發》是2018年7月清華大學出版社出版的圖書，作者是夏敏捷。
基本介紹
- 書名：HTML5網頁遊戲設計從基礎到開發
- 作者：夏敏捷
- 出版社：清華大學出版社
- 出版時間：2018年7月
- 定價：69.8 元
- ISBN：9787302495918
內容簡介,圖書目錄,
內容簡介
本書是一本面向廣大HTML5編程愛好者的遊戲設計類圖書。本書涵蓋了HTML5的新特性和相關技術，主要內容包括HTML5概述、JavaScript、Canvas API畫圖、CSS3和jQuery以及HTML5流行的遊戲引擎lufylegend等。
本書最大的特色在於以遊戲開發案例為主要內容。書中涉及的遊戲都是大家耳熟能詳的，比如推箱子、黑白棋、FlappyBird遊戲、俄羅斯方塊、中國象棋、21點撲克牌和兩人麻將等。能讓讀者對枯燥的HTML5網頁學習充滿樂趣，對於國中級的HTML5網頁學習者也提供很好的參考。書中不僅列出了完整的遊戲代碼，同時對所有的原始碼進行了非常詳細的解釋，做到了通俗易懂，圖文並茂。讀者在閱讀本書時可以充分了解和體驗HTML5的強大功能。
本書適用於網頁遊戲編程愛好者、程式設計人員和HTML5網頁學習者，或作為Web應用程式開發人員的參考用書。
圖書目錄
基 礎 篇
第1章 HTML5概述 3
1.1 HTML基礎 3
1.1.1 HTML的定義 3
1.1.2 HTML的歷史 4
1.2 HTML4基礎 5
1.2.1 HTML基礎知識 5
1.2.2 HTML基本標記 6
1.3 HTML5的新特性 10
1.3.1 簡化的文檔類型和字元集 11
1.3.2 HTML5的新結構 12
1.3.3 支持本地存儲 13
1.3.4 全新的表單設計 13
1.3.5 強大的繪圖功能 13
1.3.6 獲取地理位置信息 15
1.3.7 支持多媒體功能 17
1.3.8 支持多執行緒 18
第2章 JavaScript語法基礎 19
2.1 在HTML中使用JavaScript語言 19
2.2 基本語法 20
2.2.1 數據類型 20
2.2.2 常量和變數 21
2.2.3 注釋 22
2.2.4 運算符和表達式 22
2.3 常用控制語句 25
2.3.1 選擇結構語句 26
2.3.2 循環結構語句 31
2.4 函式 36
2.4.1 創建自定義函式 36
2.4.2 調用函式 36
2.4.3 變數的作用域 38
2.4.4 函式的返回值 38
2.4.5 定義函式館 39
2.4.6 JavaScript內置函式 40
2.5 調試JavaScript程式的方法 43
第3章 JavaScript事件處理 45
3.1 JavaScript事件的基本概念 45
3.1.1 事件類型 45
3.1.2 JavaScript處理事件的基本機制 46
3.2 JavaScript綁定事件的方法 47
3.3 JavaScript事件的event對象 49
3.3.1 獲取event對象 49
3.3.2 JavaScript獲取滑鼠坐標 50
3.3.3 JavaScript獲取事件源 51
3.4 JavaScript取消瀏覽器默認動作 51
第4章 JavaScript面向對象程式設計 53
4.1 面向對象程式設計思想簡介 53
4.1.1 對象的概念 53
4.1.2 面向對象編程 54
4.2 JavaScript類的定義和實例化 55
4.2.1 類的定義 55
4.2.2 創建對象（類的實例化） 55
4.2.3 通過對象直接初始化創建對象 56
4.3 JavaScript訪問和添加對象的屬性和方法 57
4.3.1 訪問對象的屬性和方法 57
4.3.2 向對象添加屬性和方法 59
4.4 繼承 60
4.4.1 原型實現繼承 61
4.4.2 構造函式實現繼承 62
4.4.3 重新定義繼承的方法 62
4.5 JavaScript內置對象 63
4.5.1 JavaScript的內置對象框架 63
4.5.2 基類Object 64
4.5.3 Date類 64
4.5.4 String類 66
4.5.5 Array類 68
4.5.6 Math對象 75
4.5.7 Object對象 76
4.6 HTML DOM編程 78
4.6.1 HTML DOM框架 78
4.6.2 Document 對象 80
4.6.3 Node（節點）對象 81
4.6.4 NodeList對象 88
第5章 使用Canvas畫圖 89
5.1 Canvas元素 89
5.1.1 Canvas元素的定義語法 89
5.1.2 使用JavaScript獲取網頁中的Canvas對象 89
5.2 坐標與顏色 90
5.2.1 坐標系統 90
5.2.2 顏色的表示方法 90
5.3 繪製圖形 91
5.3.1 繪製直線 91
5.3.2 繪製矩形 93
5.3.3 繪製圓弧 95
5.4 描邊和填充 95
5.4.1 描邊 95
5.4.2 填充圖形內部 96
5.4.3 漸變顏色 96
5.4.4 透明顏色 98
5.5 繪製圖像與文字 99
5.5.1 繪製圖像 99
5.5.2 組合圖形 101
5.5.3 輸出文字 102
5.6 圖形的操作 104
5.6.1 保存和恢復繪圖狀態 104
5.6.2 圖形的變換 104
5.7 HTML5 Canvas動畫實例 106
5.7.1 動畫的概念及原理 106
5.7.2 遊戲人物的跑步動畫 107
第6章 CSS3和jQuery動畫 109
6.1 CSS3語法基礎 109
6.1.1 CSS基本語句 109
6.1.2 在HTML文檔中套用CSS樣式 110
6.1.3 CSS 選擇器 110
6.2 CSS3動畫 112
6.2.1 變形 112
6.2.2 過渡變換 113
6.2.3 動畫 115
6.3 jQuery基礎 118
6.3.1 認識jQuery語法 118
6.3.2 元素的屬性與CSS樣式控制 119
6.3.3 CSS樣式控制 120
6.3.4 事件和Event對象 124
6.4 jQuery動畫 130
6.4.1 顯示和隱藏HTML元素 130
6.4.2 淡入淡出效果 132
6.4.3 滑動效果 136
6.4.4 執行自定義的動畫 138
6.4.5 動畫佇列 139
實 戰 篇
第7章 HTML5人物拼圖遊戲 147
7.1 人物拼圖遊戲介紹 147
7.2 程式設計的思路 147
7.3 程式設計的步驟 148
第8章 撲克翻牌遊戲 153
8.1 撲克翻牌遊戲介紹 153
8.2 程式設計的思路 153
8.2.1 HTML5倒計時功能 153
8.2.2 撲克牌的顯示與隱藏 156
8.2.3 撲克牌的刪除 157
8.2.4 添加刪除類別Class 158
8.3 程式設計的步驟 159
8.3.1 設計CSS（matchgame.css） 159
8.3.2 遊戲頁面index.htm 160
8.3.3 設計腳本（matchgame.js） 163
第9章 推箱子遊戲 165
9.1 推箱子遊戲介紹 165
9.2 程式設計的思路 166
9.3 程式設計的步驟 168
9.3.1 遊戲頁面pushbox.htm 168
9.3.2 設計腳本（pushbox1.js） 169
第10章 五子棋遊戲 178
10.1 五子棋遊戲簡介 178
10.2 五子棋遊戲的設計思想 178
10.3 關鍵技術 179
10.3.1 判斷輸贏的算法 179
10.3.2 圖形上色 181
10.4 程式設計的步驟 181
10.4.1 遊戲頁面five.html 181
10.4.2 設計腳本（Main.js） 181
10.5 人機五子棋遊戲的開發 183
第11章 黑白棋遊戲 193
11.1 黑白棋遊戲介紹 193
11.2 黑白棋遊戲設計的思路 194
11.2.1 棋子和棋盤 194
11.2.2 翻轉對方的棋子 194
11.2.3 顯示執棋方可落子位置 195
11.2.4 判斷勝負的功能 195
11.3 關鍵技術 195
11.3.1 Canvas對象支持的JavaScript的滑鼠事件 195
11.3.2 獲取滑鼠在Canvas對象上的坐標 196
11.4 黑白棋遊戲設計的步驟 196
11.4.1 遊戲頁面 196
11.4.2 設計腳本（Main.js） 197
第12章 俄羅斯方塊遊戲 205
12.1 俄羅斯方塊遊戲介紹 205
12.2 程式設計的思路 205
12.2.1 俄羅斯方塊形狀設計 205
12.2.2 俄羅斯方塊遊戲面板螢幕 207
12.2.3 定位和旋轉形狀 208
12.3 程式設計的步驟 210
12.3.1 遊戲頁面 210
12.3.2 設計腳本 210
第13章 貪吃蛇遊戲 220
13.1 貪吃蛇遊戲介紹 220
13.2 程式設計的思路 220
13.3 程式設計的步驟 221
13.3.1 遊戲頁面 221
13.3.2 設計腳本 221
第14章 雷電飛機射擊遊戲 228
14.1 雷電遊戲介紹 228
14.2 遊戲設計的思路 228
14.2.1 遊戲素材 228
14.2.2 地圖滾動的原理實現 229
14.2.3 飛機和子彈的實現 230
14.3 遊戲關鍵技術——碰撞檢測 231
14.3.1 矩形碰撞 231
14.3.2 圓形碰撞 233
14.3.3 像素碰撞 233
14.4 雷電飛機遊戲設計的步驟 234
14.4.1 設計子彈類 234
14.4.2 設計飛機類 236
14.4.3 爆炸類 238
14.4.4 設計主程式 238
14.4.5 遊戲頁面 242
第15章 FlappyBird遊戲 244
15.1 Flappy Bird遊戲介紹 244
15.2 Flappy Bird遊戲設計的思路 245
15.2.1 遊戲素材 245
15.2.2 遊戲實現的原理 245
15.3 Flappy Bird遊戲設計的步驟 245
15.3.1 設計Bird類（小鳥類） 245
15.3.2 設計Obstacle類（管道障礙物類） 246
15.3.3 設計FlappyBird類 246
15.3.4 主程式 250
15.3.5 遊戲頁面 252
第16章 中國象棋 253
16.1 中國象棋介紹 253
16.2 中國象棋設計思路 254
16.2.1 棋盤表示 254
16.2.2 棋子表示 254
16.2.3 走棋規則 255
16.2.4 坐標轉換 256
16.3 中國象棋實現的步驟 257
16.3.1 設計棋子類（Chess.js） 257
16.3.2 設計遊戲邏輯類（ChessGame.js） 258
16.3.3 遊戲頁面 270
第17章 兩人麻將遊戲 272
17.1 麻將遊戲介紹 272
17.2 兩人麻將遊戲設計的思路 273
17.2.1 素材圖片 273
17.2.2 遊戲邏輯實現 274
17.2.3 碰吃牌判斷 275
17.2.4 和牌算法 276
17.2.5 實現電腦智慧型出牌 279
17.3 兩人麻將遊戲設計的步驟 281
17.3.1 麻將牌類設計（Card.js） 281
17.3.2 設計遊戲邏輯腳本（main2.js） 282
17.3.3 遊戲頁面（index2.html） 300
第18章 21點撲克牌遊戲 303
18.1 21點撲克牌遊戲介紹 303
18.2 設計思路 303
18.3 程式設計的步驟 304
18.3.1 撲克牌類MCard 304
18.3.2 一副牌類MCard 304
18.3.3 主程式 305
第19章 基於lufylegend遊戲引擎開發 311
19.1 lufylegend遊戲引擎介紹 311
19.1.1 遊戲引擎原理 311
19.1.2 引入lufylegend遊戲引擎 312
19.1.3 利用引擎初始化遊戲 312
19.2 lufylegend遊戲引擎基本功能 313
19.2.1 圖片的載入與顯示 313
19.2.2 圖層 316
19.2.3 利用圖層實現遊戲中的捲軸 317
19.2.4 使用LGraphics對象繪圖 320
19.2.5 使用LTextField顯示文字 323
19.2.6 LGlobal全局類 323
19.2.7 LLoadManage載入檔案 324
19.2.8 事件處理 325
19.2.9 動畫的實現 327
19.3 lufylegend遊戲引擎案例——接水果遊戲 331
參考文獻 338
