HTML5 網(wǎng)頁游戲設(shè)計從基礎(chǔ)到開發(fā)

基  礎(chǔ)  篇

第1章  HTML5概述... 3

1.1  HTML基礎(chǔ)... 3

1.1.1  HTML的定義... 3

1.1.2  HTML的歷史... 4

1.2  HTML4基礎(chǔ)... 5

1.2.1  HTML基礎(chǔ)知識... 5

1.2.2  HTML基本標(biāo)記... 6

1.3  HTML5的新特性... 10

1.3.1  簡化的文檔類型和字符集... 11

1.3.2  HTML5的新結(jié)構(gòu)... 12

1.3.3  支持本地存儲... 13

1.3.4  全新的表單設(shè)計... 13

1.3.5  強(qiáng)大的繪圖功能... 13

1.3.6  獲取地理位置信息... 15

1.3.7  支持多媒體功能... 17

1.3.8  支持多線程... 18

第2章  JavaScript語法基礎(chǔ)... 19

2.1  在HTML中使用JavaScript語言... 19

2.2  基本語法... 20

2.2.1  數(shù)據(jù)類型... 20

2.2.2  常量和變量... 21

2.2.3  注釋... 22

2.2.4  運算符和表達(dá)式... 22

2.3  常用控制語句... 25

2.3.1  選擇結(jié)構(gòu)語句... 26

2.3.2  循環(huán)結(jié)構(gòu)語句... 31

2.4  函數(shù)... 36

2.4.1  創(chuàng)建自定義函數(shù)... 36

2.4.2  調(diào)用函數(shù)... 36

2.4.3  變量的作用域... 38

2.4.4  函數(shù)的返回值... 38

2.4.5  定義函數(shù)庫... 39

2.4.6  JavaScript內(nèi)置函數(shù)... 40

2.5  調(diào)試JavaScript程序的方法... 43

第3章  JavaScript事件處理... 45

3.1  JavaScript事件的基本概念... 45

3.1.1  事件類型... 45

3.1.2  JavaScript處理事件的基本機(jī)制... 46

3.2  JavaScript綁定事件的方法... 47

3.3  JavaScript事件的event對象... 49

3.3.1  獲取event對象... 49

3.3.2  JavaScript獲取鼠標(biāo)坐標(biāo)... 50

3.3.3  JavaScript獲取事件源... 51

3.4  JavaScript取消瀏覽器默認(rèn)動作... 51

第4章  JavaScript面向?qū)ο蟪绦蛟O(shè)計... 53

4.1  面向?qū)ο蟪绦蛟O(shè)計思想簡介... 53

4.1.1  對象的概念... 53

4.1.2  面向?qū)ο缶幊?.. 54

4.2  JavaScript類的定義和實例化... 55

4.2.1  類的定義... 55

4.2.2  創(chuàng)建對象（類的實例化）... 55

4.2.3  通過對象直接初始化創(chuàng)建對象... 56

4.3  JavaScript訪問和添加對象的屬性和方法... 57

4.3.1  訪問對象的屬性和方法... 57

4.3.2  向?qū)ο筇砑訉傩院头椒?.. 59

4.4  繼承... 60

4.4.1  原型實現(xiàn)繼承... 61

4.4.2  構(gòu)造函數(shù)實現(xiàn)繼承... 62

4.4.3  重新定義繼承的方法... 62

4.5  JavaScript內(nèi)置對象... 63

4.5.1  JavaScript的內(nèi)置對象框架... 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（節(jié)點）對象... 81

4.6.4  NodeList對象... 88

第5章  使用Canvas畫圖... 89

5.1  Canvas元素... 89

5.1.1  Canvas元素的定義語法... 89

5.1.2  使用JavaScript獲取網(wǎng)頁中的Canvas對象... 89

5.2  坐標(biāo)與顏色... 90

5.2.1  坐標(biāo)系統(tǒng)... 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  填充圖形內(nèi)部... 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  保存和恢復(fù)繪圖狀態(tài)... 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語法基礎(chǔ)... 109

6.1.1  CSS基本語句... 109

6.1.2  在HTML文檔中應(yīng)用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基礎(chǔ)... 118

6.3.1  認(rèn)識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  執(zhí)行自定義的動畫... 138

6.4.5  動畫隊列... 139

實  戰(zhàn)  篇

第7章  HTML5人物拼圖游戲... 147

7.1  人物拼圖游戲介紹... 147

7.2  程序設(shè)計的思路... 147

7.3  程序設(shè)計的步驟... 148

第8章  撲克翻牌游戲... 153

8.1  撲克翻牌游戲介紹... 153

8.2  程序設(shè)計的思路... 153

8.2.1  HTML5倒計時功能... 153

8.2.2  撲克牌的顯示與隱藏... 156

8.2.3  撲克牌的刪除... 157

8.2.4  添加刪除類別Class 158

8.3  程序設(shè)計的步驟... 159

8.3.1  設(shè)計CSS（matchgame.css）... 159

8.3.2  游戲頁面index.htm.. 160

8.3.3  設(shè)計腳本（matchgame.js）... 163

第9章  推箱子游戲... 165

9.1  推箱子游戲介紹... 165

9.2  程序設(shè)計的思路... 166

9.3  程序設(shè)計的步驟... 168

9.3.1  游戲頁面pushbox.htm.. 168

9.3.2  設(shè)計腳本（pushbox1.js）... 169

第10章  五子棋游戲... 178

10.1  五子棋游戲簡介... 178

10.2  五子棋游戲的設(shè)計思想... 178

10.3  關(guān)鍵技術(shù)... 179

10.3.1  判斷輸贏的算法... 179

10.3.2  圖形上色... 181

10.4  程序設(shè)計的步驟... 181

10.4.1  游戲頁面five.html 181

10.4.2  設(shè)計腳本（Main.js）... 181

10.5  人機(jī)五子棋游戲的開發(fā)... 183

第11章  黑白棋游戲... 193

11.1  黑白棋游戲介紹... 193

11.2  黑白棋游戲設(shè)計的思路... 194

11.2.1  棋子和棋盤... 194

11.2.2  翻轉(zhuǎn)對方的棋子... 194

11.2.3  顯示執(zhí)棋方可落子位置... 195

11.2.4  判斷勝負(fù)的功能... 195

11.3  關(guān)鍵技術(shù)... 195

11.3.1  Canvas對象支持的JavaScript的鼠標(biāo)事件... 195

11.3.2  獲取鼠標(biāo)在Canvas對象上的坐標(biāo)... 196

11.4  黑白棋游戲設(shè)計的步驟... 196

11.4.1  游戲頁面... 196

11.4.2  設(shè)計腳本（Main.js）... 197

第12章  俄羅斯方塊游戲... 205

12.1  俄羅斯方塊游戲介紹... 205

12.2  程序設(shè)計的思路... 205

12.2.1  俄羅斯方塊形狀設(shè)計... 205

12.2.2  俄羅斯方塊游戲面板屏幕... 207

12.2.3  定位和旋轉(zhuǎn)形狀... 208

12.3  程序設(shè)計的步驟... 210

12.3.1  游戲頁面... 210

12.3.2  設(shè)計腳本... 210

第13章  貪吃蛇游戲... 220

13.1  貪吃蛇游戲介紹... 220

13.2  程序設(shè)計的思路... 220

13.3  程序設(shè)計的步驟... 221

13.3.1  游戲頁面... 221

13.3.2  設(shè)計腳本... 221

第14章  雷電飛機(jī)射擊游戲... 228

14.1  雷電游戲介紹... 228

14.2  游戲設(shè)計的思路... 228

14.2.1  游戲素材... 228

14.2.2  地圖滾動的原理實現(xiàn)... 229

14.2.3  飛機(jī)和子彈的實現(xiàn)... 230

14.3  游戲關(guān)鍵技術(shù)——碰撞檢測... 231

14.3.1  矩形碰撞... 231

14.3.2  圓形碰撞... 233

14.3.3  像素碰撞... 233

14.4  雷電飛機(jī)游戲設(shè)計的步驟... 234

14.4.1  設(shè)計子彈類... 234

14.4.2  設(shè)計飛機(jī)類... 236

14.4.3  爆炸類... 238

14.4.4  設(shè)計主程序... 238

14.4.5  游戲頁面... 242

第15章  FlappyBird游戲... 244

15.1  Flappy Bird游戲介紹... 244

15.2  Flappy Bird游戲設(shè)計的思路... 245

15.2.1  游戲素材... 245

15.2.2  游戲?qū)崿F(xiàn)的原理... 245

15.3  Flappy Bird游戲設(shè)計的步驟... 245

15.3.1  設(shè)計Bird類（小鳥類）... 245

15.3.2  設(shè)計Obstacle類（管道障礙物類）... 246

15.3.3  設(shè)計FlappyBird類... 246

15.3.4  主程序... 250

15.3.5  游戲頁面... 252

第16章  中國象棋... 253

16.1  中國象棋介紹... 253

16.2  中國象棋設(shè)計思路... 254

16.2.1  棋盤表示... 254

16.2.2  棋子表示... 254

16.2.3  走棋規(guī)則... 255

16.2.4  坐標(biāo)轉(zhuǎn)換... 256

16.3  中國象棋實現(xiàn)的步驟... 257

16.3.1  設(shè)計棋子類（Chess.js）... 257

16.3.2  設(shè)計游戲邏輯類（ChessGame.js）... 258

16.3.3  游戲頁面... 270

第17章  兩人麻將游戲... 272

17.1  麻將游戲介紹... 272

17.2  兩人麻將游戲設(shè)計的思路... 273

17.2.1  素材圖片... 273

17.2.2  游戲邏輯實現(xiàn)... 274

17.2.3  碰吃牌判斷... 275

17.2.4  和牌算法... 276

17.2.5  實現(xiàn)電腦智能出牌... 279

17.3  兩人麻將游戲設(shè)計的步驟... 281

17.3.1  麻將牌類設(shè)計（Card.js）... 281

17.3.2  設(shè)計游戲邏輯腳本（main2.js）... 282

17.3.3  游戲頁面（index2.html）... 300

第18章  21點撲克牌游戲... 303

18.1  21點撲克牌游戲介紹... 303

18.2  設(shè)計思路... 303

18.3  程序設(shè)計的步驟... 304

18.3.1  撲克牌類MCard. 304

18.3.2  一副牌類MCard. 304

18.3.3  主程序... 305

第19章  基于lufylegend游戲引擎開發(fā)... 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  利用圖層實現(xiàn)游戲中的卷軸... 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  動畫的實現(xiàn)... 327

19.3  lufylegend游戲引擎案例——接水果游戲... 331

參考文獻(xiàn)       338