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、最后绘制该总分数

代码编写与效果演示

来源：私塾在线