HTML5 網頁游戲設計從基礎到開發, 2/e (微課視頻版)

本書是一本面向廣大HTML5編程愛好者的游戲設計類圖書，涵蓋HTML5的新特性和相關技術，主要內容包括HTML5概述、JavaScript、Canvas API畫圖、CSS3和jQuery以及HTML5流行的游戲引擎lufylegend等。 本書**的特色在於以游戲開發案例為主要內容。書中涉及的游戲都是大家耳熟能詳的，如人物拼圖、撲克翻牌、推箱子、五子棋、黑白棋、俄羅斯方塊、貪吃蛇、雷電飛機射擊、Flappy Bird、中國象棋等，旨在讓讀者對枯燥的HTML5網頁學習充滿樂趣，對於初中級的HTML5網頁學習者也提供很好的參考。書中不僅列出了完整的游戲代碼，同時對所有的源代碼進行了非常詳細的解釋，做到了通俗易懂、圖文並茂。讀者在閱讀本書時可以充分瞭解和體驗HTML5的強大功能。 本書適用於網頁游戲編程愛好者、程序設計人員和HTML5網頁學習者，也可作為Web應用程序開發人員的參考書。

 

 

 

目〓〓錄

第1部分基礎篇

 

第1章HTML5概述

 

1．1HTML基礎

 

1．1．1HTML的定義

 

1．1．2HTML的歷史

 

1．2HTML基礎

 

1．2．1HTML基礎知識

 

1．2．2HTML基本標記

 

1．3HTML5的新特性

 

1．3．1簡化的文檔類型和字符集

 

1．3．2HTML5的新結構

 

1．3．3支持本地存儲

 

1．3．4全新的表單設計

 

1．3．5強大的繪圖功能

 

1．3．6獲取地理位置信息

 

1．3．7支持多媒體功能

 

1．3．8支持多線程

 

第2章JavaScript語法基礎

 

2．1JavaScript語言

 

2．1．1JavaScript語言概述 

 

2．1．2運行JavaScript語言 

 

2．2基本語法

 

2．2．1數據類型

 

2．2．2常量和變量

 

2．2．3註釋

 

2．2．4運算符和表達式

 

 

2．3常用控制語句

 

2．3．1選擇結構語句

 

2．3．2循環結構語句

 

2．4函數

 

2．4．1創建自定義函數

 

2．4．2調用函數

 

2．4．3變量的作用域

 

2．4．4函數的返回值

 

2．4．5定義函數庫

 

2．4．6JavaScript內置函數

 

2．5調試JavaScript程序的方法

 

2．5．1定位JavaScript程序中的錯誤

 

2．5．2開發者工具調試代碼

 

2．5．3Visual Studio Code中調試JavaScript代碼

 

 

 

 

 

第3章JavaScript事件處理

 

3．1JavaScript事件的基本概念

 

3．1．1事件類型

 

3．1．2JavaScript處理事件的基本機制

 

3．2JavaScript綁定事件的方法

 

3．3JavaScript事件的event對象

 

3．3．1獲取event對象

 

3．3．2JavaScript獲取鼠標坐標

 

3．3．3JavaScript獲取事件源

 

3．4JavaScript取消瀏覽器默認動作

 

第4章JavaScript面向對象程序設計

 

4．1面向對象程序設計思想簡介

 

4．1．1對象的概念

 

4．1．2面向對象編程

 

4．2JavaScript類的定義和實例化

 

4．2．1類的定義

 

4．2．2創建對象(類的實例化)

 

4．2．3通過對象直接初始化創建對象

 

4．3JavaScript訪問和添加對象的屬性和方法

 

4．3．1訪問對象的屬性和方法

 

4．3．2向對象添加屬性和方法

 

4．4繼承

 

4．4．1原型實現繼承

 

4．4．2構造函數實現繼承

 

4．4．3重新定義繼承的方法

 

4．5JavaScript內置對象

 

4．5．1JavaScript的內置對象框架

 

4．5．2基類Object

 

4．5．3Date類

 

4．5．4String類

 

4．5．5Array類

 

4．5．6Math對象

 

4．5．7Object對象

 

4．6HTML DOM編程

 

4．6．1HTML DOM框架

 

4．6．2Document 對象

 

4．6．3Node(節點)對象

 

4．6．4NodeList對象

 

4．7ES6簡介

 

4．7．1變量相關

 

4．7．2數據類型

 

4．7．3對象

 

4．7．4class類

 

4．7．5箭頭函數

 

第5章使用Canvas畫圖

 

5．1Canvas元素

 

5．1．1Canvas元素的定義語法

 

5．1．2使用JavaScript獲取網頁中的Canvas對象

 

5．2坐標與顏色

 

5．2．1坐標系統

 

5．2．2顏色的表示方法

 

5．3繪制圖形

 

5．3．1繪制直線

 

5．3．2繪制矩形

 

5．3．3繪制圓弧

 

5．4描邊和填充

 

5．4．1描邊

 

5．4．2填充圖形內部

 

5．4．3漸變顏色

 

5．4．4透明顏色

 

5．5繪制圖像與文字

 

5．5．1繪制圖像

 

5．5．2組合圖形

 

5．5．3輸出文字

 

5．6圖形的操作

 

5．6．1保存和恢復繪圖狀態

 

5．6．2圖形的變換

 

5．7HTML5 Canvas動畫實例

 

5．7．1動畫的概念及原理

 

5．7．2游戲人物的跑步動畫

 

5．7．3雪花飄落動畫

 

第6章CSS3和jQuery動畫

 

6．1CSS3語法基礎

 

6．1．1CSS基本語句

 

6．1．2在HTML文檔中應用CSS樣式

 

6．1．3CSS 選擇器

 

6．2CSS3動畫

 

6．2．1變形

 

6．2．2過渡變換

 

6．2．3動畫

 

6．3jQuery基礎

 

6．3．1認識jQuery語法

 

6．3．2元素的屬性與文本內容控制

 

6．3．3CSS樣式控制

 

6．3．4元素的操作

 

6．3．5事件和Event對象

 

6．4jQuery動畫

 

6．4．1顯示和隱藏HTML元素

 

6．4．2淡入淡出效果

 

6．4．3滑動效果

 

6．4．4自定義動畫

 

6．4．5動畫隊列

 

第2部分實戰篇

 

第7章人物拼圖游戲

 

7．1人物拼圖游戲介紹

 

7．2人物拼圖游戲設計的思路

 

7．3人物拼圖游戲設計的步驟

 

 

第8章撲克翻牌游戲

 

8．1撲克翻牌游戲介紹

 

8．2撲克翻牌游戲設計的思路

 

8．2．1HTML5倒計時功能

 

8．2．2撲克牌的顯示與隱藏

 

8．2．3撲克牌的刪除

 

8．2．4添加刪除類別Class

 

8．3撲克翻牌游戲設計的步驟

 

8．3．1設計CSS(matchgame．css)

 

8．3．2游戲頁面index．html

 

8．3．3設計腳本(matchgame．js)

 

第9章推箱子游戲

 

9．1推箱子游戲介紹

 

9．2推箱子游戲設計的思路

 

9．3推箱子游戲設計的步驟

 

9．3．1游戲頁面pushbox．html

 

9．3．2設計腳本(pushbox1．js)

 

第10章五子棋游戲

 

10．1五子棋游戲介紹

 

10．2五子棋游戲設計的思路

 

10．3關鍵技術

 

10．3．1判斷輸贏的算法

 

10．3．2圖形上色

 

10．4五子棋游戲設計的步驟

 

10．4．1游戲頁面five．html

 

10．4．2設計腳本(Main．js)

 

10．5人機五子棋游戲的開發

 

第11章黑白棋游戲

 

11．1黑白棋游戲介紹

 

11．2黑白棋游戲設計的思路

 

11．2．1棋子和棋盤

 

11．2．2翻轉對方的棋子

 

11．2．3顯示執棋方可落子位置

 

11．2．4判斷勝負的功能

 

11．3關鍵技術

 

11．3．1Canvas對象支持的JavaScript的鼠標事件

 

11．3．2獲取鼠標在Canvas對象上的坐標

 

11．4黑白棋游戲設計的步驟

 

11．4．1游戲頁面index.html

 

11．4．2設計腳本(Main．js)

 

第12章俄羅斯方塊游戲

 

12．1俄羅斯方塊游戲介紹

 

12．2俄羅斯方塊游戲設計的思路

 

12．2．1俄羅斯方塊形狀設計

 

12．2．2俄羅斯方塊游戲面板屏幕

 

12．2．3定位和旋轉形狀

 

12．3俄羅斯方塊游戲設計的步驟

 

12．3．1游戲頁面index.html

 

12．3．2設計腳本

 

第13章貪吃蛇游戲

 

13．1貪吃蛇游戲介紹

 

13．2貪吃蛇游戲設計的思路

 

13．3貪吃蛇游戲設計的步驟

 

13．3．1游戲頁面index.html

 

13．3．2設計腳本

 

第14章雷電飛機射擊游戲

 

14．1雷電飛機射擊游戲介紹

 

14．2雷電飛機射擊游戲設計的思路

 

14．2．1游戲素材

 

14．2．2地圖滾動的原理實現

 

14．2．3飛機和子彈的實現

 

14．3游戲關鍵技術——碰撞檢測

 

14．3．1矩形碰撞

 

14．3．2圓形碰撞

 

14．3．3像素碰撞

 

14．3．4Image對象

 

14．4雷電飛機射擊游戲設計的步驟

 

14．4．1設計子彈類

 

14．4．2設計飛機類

 

14．4．3爆炸類

 

14．4．4設計主程序

 

14．4．5游戲頁面plan3.html

 

第15章Flappy Bird游戲

 

15．1Flappy Bird游戲介紹

 

15．2Flappy Bird游戲設計的思路

 

 

15．2．1游戲素材

 

15．2．2游戲實現的原理

 

15．3Flappy Bird游戲設計的步驟

 

15．3．1設計Bird類(小鳥類)

 

15．3．2設計Obstacle類(管道障礙物類)

 

15．3．3設計FlappyBird類

 

15．3．4主程序

 

15．3．5游戲頁面index.html

 

第16章中國象棋游戲

 

16．1中國象棋游戲介紹

 

16．2中國象棋游戲設計的思路

 

16．2．1棋盤表示

 

16．2．2棋子表示

 

16．2．3走棋規則

 

16．2．4坐標轉換

 

16．3中國象棋游戲設計的步驟

 

16．3．1設計棋子類(Chess．js)

 

16．3．2設計游戲邏輯(ChessGame．js)

 

16．3．3游戲頁面index.html

 

第17章基於lufylegend游戲引擎開發

 

17．1lufylegend游戲引擎介紹

 

17．1．1游戲引擎原理

 

17．1．2引入lufylegend游戲引擎

 

17．1．3利用引擎初始化游戲

 

17．2lufylegend游戲引擎基本功能

 

17．2．1圖片的加載與顯示

 

17．2．2圖層

 

17．2．3利用圖層實現游戲中的捲軸

 

17．2．4使用LGraphics對象繪圖

 

17．2．5使用LTextField顯示文字

 

17．2．6LGlobal全局類

 

17．2．7LLoadManage加載文件

 

17．2．8事件處理

 

17．2．9動畫的實現

 

17．3lufylegend游戲引擎案例——接水果游戲

 

參考文獻