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、最后绘制该总分数
代码编写与效果演示
来源:私塾在线