HTML5 網(wǎng)頁(yè)游戲設(shè)計(jì)從基礎(chǔ)到開(kāi)發(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ǔ)知識(shí)... 5

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

1.3  HTML5的新特性... 10

1.3.1  簡(jiǎn)化的文檔類型和字符集... 11

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

1.3.3  支持本地存儲(chǔ)... 13

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

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

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

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

1.3.8  支持多線程... 18

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

2.1  在HTML中使用JavaScript語(yǔ)言... 19

2.2  基本語(yǔ)法... 20

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

2.2.2  常量和變量... 21

2.2.3  注釋... 22

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

2.3  常用控制語(yǔ)句... 25

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

2.3.2  循環(huán)結(jié)構(gòu)語(yǔ)句... 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ù)庫(kù)... 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對(duì)象... 49

3.3.1  獲取event對(duì)象... 49

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

3.3.3  JavaScript獲取事件源... 51

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

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

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

4.1.1  對(duì)象的概念... 53

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

4.2  JavaScript類的定義和實(shí)例化... 55

4.2.1  類的定義... 55

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

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

4.3  JavaScript訪問(wèn)和添加對(duì)象的屬性和方法... 57

4.3.1  訪問(wèn)對(duì)象的屬性和方法... 57

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

4.4  繼承... 60

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

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

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

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

4.5.1  JavaScript的內(nèi)置對(duì)象框架... 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對(duì)象... 75

4.5.7  Object對(duì)象... 76

4.6  HTML DOM編程... 78

4.6.1  HTML DOM框架... 78

4.6.2  Document 對(duì)象... 80

4.6.3  Node（節(jié)點(diǎn)）對(duì)象... 81

4.6.4  NodeList對(duì)象... 88

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

5.1  Canvas元素... 89

5.1.1  Canvas元素的定義語(yǔ)法... 89

5.1.2  使用JavaScript獲取網(wǎng)頁(yè)中的Canvas對(duì)象... 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動(dòng)畫實(shí)例... 106

5.7.1  動(dòng)畫的概念及原理... 106

5.7.2  游戲人物的跑步動(dòng)畫... 107

第6章  CSS3和jQuery動(dòng)畫... 109

6.1  CSS3語(yǔ)法基礎(chǔ)... 109

6.1.1  CSS基本語(yǔ)句... 109

6.1.2  在HTML文檔中應(yīng)用CSS樣式... 110

6.1.3  CSS 選擇器... 110

6.2  CSS3動(dòng)畫... 112

6.2.1  變形... 112

6.2.2  過(guò)渡變換... 113

6.2.3  動(dòng)畫... 115

6.3  jQuery基礎(chǔ)... 118

6.3.1  認(rèn)識(shí)jQuery語(yǔ)法... 118

6.3.2  元素的屬性與CSS樣式控制... 119

6.3.3  CSS樣式控制... 120

6.3.4  事件和Event對(duì)象... 124

6.4  jQuery動(dòng)畫... 130

6.4.1  顯示和隱藏HTML元素... 130

6.4.2  淡入淡出效果... 132

6.4.3  滑動(dòng)效果... 136

6.4.4  執(zhí)行自定義的動(dòng)畫... 138

6.4.5  動(dòng)畫隊(duì)列... 139

實(shí)  戰(zhàn)  篇

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

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

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

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

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

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

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

8.2.1  HTML5倒計(jì)時(shí)功能... 153

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

8.2.3  撲克牌的刪除... 157

8.2.4  添加刪除類別Class 158

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

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

8.3.2  游戲頁(yè)面index.htm.. 160

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

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

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

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

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

9.3.1  游戲頁(yè)面pushbox.htm.. 168

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

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

10.1  五子棋游戲簡(jiǎn)介... 178

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

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

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

10.3.2  圖形上色... 181

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

10.4.1  游戲頁(yè)面five.html 181

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

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

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

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

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

11.2.1  棋子和棋盤... 194

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

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

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

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

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

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

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

11.4.1  游戲頁(yè)面... 196

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

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

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

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

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

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

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

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

12.3.1  游戲頁(yè)面... 210

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

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

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

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

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

13.3.1  游戲頁(yè)面... 221

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

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

14.1  雷電游戲介紹... 228

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

14.2.1  游戲素材... 228

14.2.2  地圖滾動(dòng)的原理實(shí)現(xiàn)... 229

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

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

14.3.1  矩形碰撞... 231

14.3.2  圓形碰撞... 233

14.3.3  像素碰撞... 233

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

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

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

14.4.3  爆炸類... 238

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

14.4.5  游戲頁(yè)面... 242

第15章  FlappyBird游戲... 244

15.1  Flappy Bird游戲介紹... 244

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

15.2.1  游戲素材... 245

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

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

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

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

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

15.3.4  主程序... 250

15.3.5  游戲頁(yè)面... 252

第16章  中國(guó)象棋... 253

16.1  中國(guó)象棋介紹... 253

16.2  中國(guó)象棋設(shè)計(jì)思路... 254

16.2.1  棋盤表示... 254

16.2.2  棋子表示... 254

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

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

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

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

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

16.3.3  游戲頁(yè)面... 270

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

17.1  麻將游戲介紹... 272

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

17.2.1  素材圖片... 273

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

17.2.3  碰吃牌判斷... 275

17.2.4  和牌算法... 276

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

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

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

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

17.3.3  游戲頁(yè)面（index2.html）... 300

第18章  21點(diǎn)撲克牌游戲... 303

18.1  21點(diǎn)撲克牌游戲介紹... 303

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

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

18.3.1  撲克牌類MCard. 304

18.3.2  一副牌類MCard. 304

18.3.3  主程序... 305

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

19.2.4  使用LGraphics對(duì)象繪圖... 320

19.2.5  使用LTextField顯示文字... 323

19.2.6  LGlobal全局類... 323

19.2.7  LLoadManage加載文件... 324

19.2.8  事件處理... 325

19.2.9  動(dòng)畫的實(shí)現(xiàn)... 327

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

參考文獻(xiàn)       338