HTML5网页游戏设计从基础到开发（第2版） 课件 第15章 FlappyBird游戏.pdf

HTML5网页游戏设计 —从基础到开发 第15章FlappyBird游戏 ·点击屏幕或按空格键，小鸟就会往上飞，不断的点击或按空格键就 会不断的往高处飞。松开鼠标或空格键则会快速下降。游戏的得分 是，小鸟安全穿过一个柱子且不撞上就是1分。当然撞上就直接游戏 结束。 1 15.2设计思想 游戏实现原理 ·游戏设计中采用类似雷电飞机射击游戏方法，背景障碍物(管道)在不 断左移，小鸟位置x坐标不变仅仅能上下移动。为了简化游戏难度，我们 将上下管子的间距设置成一样大小；采用两个定时器，其中一个定时器 数组obsList首个元素obsList[0]移出游戏画面时则从数组中删除。 ·另一个定时器是完成游戏画面和游戏逻辑(碰撞及鼠标单击检测)。在 每隔20毫秒重画游戏界面时，根据障碍物数组obsList绘制游戏界面存在的 玩家一种管子不断前移的感觉。 · 同时根据玩家是否点击屏幕来移动小鸟位置并判断是否碰到了水管，如 果碰到或小鸟落地则游戏结束。 15.3程序设计的步骤 设计Bird类(小鸟类) 设计Obstacle类(管道障碍物类) 设计FlappyBird类 FlappyBird类包括了游戏主要参数及运行时需要的函数。变化参数可以改变游戏难 度。FlappyBird类的函数功能如下： CreateMap:function():绘制画布 · CreateObs: function():创造障碍物 · DrawObs:function():绘制障碍物 · CountScore: function():判断是否启动记分器 · ShowScore: function():显示分数 CanMove: function():判断是否可以移动及游戏结束 CheckTouch: function():判断是否触摸 ClearScreen: function():清屏 ShowOver:function():显示游戏结束 设计主程序 游戏页面