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应用

分享到: 更多