HTML 5 實戰 之 HTML 5中簡單小游戲的開發

11.1:游戲分析、頂住物體、拋出物體基本動畫效果

游戲分析:

功能: 用蘑菇頂住香焦不給落地,香蕉碰撞完頂部的獎品為贏

對象: a、蘑菇  b、香蕉   c、獎品(茄子)

界面:使用canvas (畫布)來描繪游戲

頂住物體、拋出物體基本動畫效果 :

說明:頂住物體指蘑菇,拋出物體指香蕉 ,先使蘑菇跟隨鼠標動起來,然后,讓香蕉在畫布上實現拋出的效果。

實現步驟如下:

      

       1、定義全局變量

       2、定義蘑菇實例

       3、用canvas把蘑菇繪制出來

       4、使蘑菇隨鼠標動起來

       5、定義香蕉實例

       6、用canvas把香蕉繪制出來

       7、使香蕉在畫布中顯現拋出來的效果

 

代碼編寫與效果演示

11.2:拋出物體碰到邊界、頂住物體的處理

拋出物體移動碰到邊界時的反彈處理 :

寫一個碰撞處理函數 HasActHitEdge()

在游戲循環GameLoop()尾部中加入檢測邊界函數

拋出物體移動碰到頂住物體向上反彈的效果

寫一個通用的判斷2個物體是否碰撞的函數 chkHitEach

2個物體碰撞發生的事件以及處理 HasActHitMov()

在游戲循環GameLoop()尾部中加入2個物體碰撞函數 HasActHitMov()

先來分析如何檢測兩個物體是否碰撞上了,請看示意圖:

1。碰撞前,各位置點說明圖。

 

2。碰撞后,各位置點說明圖。

 

11.3:繪制獎品、拋出物體碰到獎品的處理方法。

  使用一個數組裝載所有獎品

  1、定義全局變量

  2、初始化全局變量

  3、定義獎品數據及實例

  4、把獎品裝進數組

  5、從數組中取出獎品并描繪

  6、在游戲循環GameLoop()中加入描繪獎品的函數

拋出物體 撞到獎品之后的處理

1、增加獎品的hit屬性

增加獎品的hit屬性 ,默認值為false。當獎品撞到的時候,hit的屬性值為true。描繪獎品的時候檢測該hit值。

2、增加拋出物體撞到獎品的事件

3、在描繪獎品函數中檢測是否被碰撞,沒被撞過,則描繪出來

11.4:增加開關按鈕、添加生命數條、添加得分的處理方法。

添加開始按鈕

1、在頁面中增加一個位于畫布中間的開始按鈕

2、定義控制游戲開始的全局變量

3、編寫一個開始或暫停的函數

4、為開始按鈕增加相應事件

添加生命數條

1、定義生命所需的全局變量

2、初始化生命圖片

3、在畫布中繪制生命條數圖形

4、當拋出物體碰到底線時,減少1條生命

5、當生命條數等于0或者獎品消滅完,顯示游戲結束的提示,并終止游戲

 

添加得分

1、定義分數所需的全局變量

2、初始化分數圖片

3、為獎品對象新增加一個分數屬性

4、在初始化獎品數組時,加入分數

5、當拋出物體撞到獎品時,根據被撞獎品的分數增加總分值

6、最后繪制該總分數

代碼編寫與效果演示


來源:私塾在線

上一篇: CSS 入門

下一篇: HTML 5 實戰 之 使用HTML 5特征開發webapp應用

分享到: 更多
重庆肘时彩开奖号码 足球竞彩计算器 欢斗地主单机版 天津时时五星走势园 腾讯体育女篮直播 万人金花最新版下载 定位胆规律 分分快3计划软件 二八杠必赢技巧 新时时网易 幸运分分彩精准计划 重庆时彩历史开奖结果 棋牌平台黑客可以破解吗 黑桃棋牌 北京pk10定位胆前后 网络真人龙虎骗局