用Phaser框架做个flappybird小游戏（三）

这次来完成下一个场景的布置

• 首先来定义下场景2，在完成页面效果前需要在场景管理器中定义一个场景play，并且添加到场景管理器中命名为sence2
  

• 在sence2设计之前还需要将sence1的几个地方需要完善一下

• 从sence1切换到sence2,是通过点击sence1中的按钮，上次我们只是简单的测试输出11111，现在我们修改下语句，使点击按钮效果为切换页面至sence2
  

• 接下来我们设计sence2，先来看下需要做的页面效果
  

• 可以看到点击按钮后，只有一只小鸟在动，其他图标和背景都是静止不动的。

• 那么我们先将背景和小鸟都添加到场景里，由于在sence1中的preload中已经加载过了，现在就可以直接使用，只要加载其他图片就行了。

• 加载完还是一样添加入场景并设置下图片的位置

• 到目前第二场的开头已经全部制作完毕，我们继续下步操作
  

• 可以看到，在我们完成点击动作后，发生了几个变化：1.除小鸟外的图片都消失了；2.场景开始向左运动；3.小鸟往下掉落；4.小鸟顺时针翻转

• 现在我们先来完成点击动作，这边要注意的是，点击后开始这个动作只有一次，不然再次点击又重新开始了，所以需要把add改为addonce

• 点级动作完成后，接下来我们将不需要的图标剔除，再让地板动起来。
• 这边需要注意的是，上面我们在this.create=function ()中添加的背景为局部常量，不能再其他作用域中被访问到，so我们需要更改一下mybg为this.mybg，其他变量也是一样

• 现在让我们看下已经完成的效果：

• 下面我们来研究下怎么才能让小鸟坠落——物理引擎的开启
  

• 这边需要注意的是，一开始小鸟是在空中飞的，没有下掉，这时的重力值为0。完成点击动作后小鸟才往下掉落，所以小鸟的重力值需要在startgame中修改

• 仔细观察，小鸟下掉的同时会顺时针旋转，这时候我们就需要通过this.bird.angle=90设置小鸟的倾斜角度来完成旋转动作
  
  
• 可以看到在我们设置倾斜角度为90后，小鸟是突然间变成垂直的，但这不是我们想要的效果，那么怎么才能让小鸟缓慢的旋转呢？
• 这时候我们需要将倾斜角度设置为自加，放置于实时更新的update中。
• 而且一开始时小鸟并没有转动，我们需要在一开始设置一个变量this.startGameFlag = false用于标记游戏是否开始，当鼠标点击后再改为true

• 到这里小鸟的重力设置完毕，但是小鸟不能穿透地板，所以地板的物理引擎也要开启。
• 并且要判断小鸟是否碰到地板了。

• 到这里，我们先来看下今天制作的效果怎样。
  
• 基本完成了场景二的开始阶段
• 刚看到egret.js一款H5框架，也就是俗称的白鹭，也是不错的框架，最关键还是国人开发的，中文的API读起来应该还是挺方便的，好像还提有意思，下次可以研究下