SuperBall开发总结(一)-游戏框架

游戏开发对我来说一直以来都有种神奇的魔力，也许是人类的本能，对屏幕上能动起来的东西有无比的好奇心。

这次想要开发的是一个小游戏，大概就是玩家用一个小木板去接一个小球，让小球反弹去碰撞飞在天上的BOSS

源码： SuperBall
点击这里玩一下
游戏截图：

QQ20140901-1.png

在真正动手开发游戏之前，首先要理解游戏开发的核心机制

1. 死循环

   每个单位时间运行指定函数，直到游戏状态发生改变，通常是游戏暂停、继续、胜利或是失败等。

   由于人眼的视觉暂留现象，我们每个很短的一段时间（至少1/24秒）渲染一遍画面，连续播放就会产生动画的视觉效果。

2. 游戏渲染

   1. 获取当前小球，木板和BOOS的各个属性
   2. 在Canvas上绘制一些形状，多边形，圆形；设置一些属性：位置、大小、颜色等。

3. 键盘点击监听

   1. 上下左右：改变木板坐标和坡度，
   2. QWER：设置木板特定属性
   3. P: 游戏暂停与继续

4. 碰撞检测

   碰撞检测其实就是根据当前小球、木板和BOSS的坐标，通过一些简单的计算判断图形是否重叠，若重叠即视为碰撞

   具体的碰撞检测：

   1. 小球与BOSS是否碰撞
   2. 小球是否落入水中
   3. 小球是否撞到木板上
   4. 小球是否撞到墙壁
   5. 木板是否跑出画面
   6. BOSS是否撞到墙壁

5. 状态更新

根据游戏状态的相关属性，碰撞检测的结果以及键盘监听结果更新各个部分的属性

1. 游戏状态更新：作为死循环跳出与否的条件
1. 小球：圆心坐标，x方向和y方向的速度。
1. 木板：坐标，长度，坡度，倾斜方向
1. BOSS：偏移量，结构数组    
1. 游戏时间，得分
1. F技能冷却倒计时

UI辅助

动画效果会用到游戏死循环的方式

1. 按钮抖动
2. 信息板滑动
3. 信息框变大变小

数据持久化

用到了webSQL来保存玩家最佳纪录

SuperBall开发总结(二)-让小球动起来