这一节讲一下过度阶段，有一个主要的问题要实现一下，目前我们是处于准备阶段，那么怎么可以从第一阶段过渡到第二阶段。

我们游戏在开始玩的时候，是鼠标一点击画布，就进入到这个阶段了。那应该是有个事件是onclick。但是我们说过，canvas里面，无论是绘制图形或者图片也好，他绘制的内容都没有事件的。也就是说在canvas里面，唯一可以去绑定事件的，只有一个canvas元素。除了这个绑定事件外，这个onclick还有一个需要特别注意的，就是我们不能直接简单的写一个onclick=第二阶段。因为在游戏的任何阶段，我们都可能触发这个事件，如果触发了，等于又回去了，那肯定是不对的。所以要想处理好，必须要加一句话，也就是判断只有在第一阶段下，点击才有用。

那么绑定好以后，我们就要完成过渡阶段了，也就是说小飞机进场的这个动画效果。在图片库里我们有3个小飞机，可以看下，连在一起就是一个动画效果。也就是说执行过渡的动画效果，就是图片的切换。那么一说图片，第一步肯定是加载过渡需要的图片。但是会有一个问题，在准备阶段，是两图片，但是是分别加载的。但现在这4张图片必须要在一起，我们怎么可以把4张图片放在一起呢？

那么存储多个内容，就可以使用数组结构来存储我们所有的动画图片。跟上面一样，然后接着要初始化数据。以及创建过渡动画的构造器。里面有我们的属性和方法。以及构造器，那么有构造器，一定就有创建对象。

这个时候我们发现，这3步代码重复，除了角标和图片里的123在累加以外，其他都是固定套路。这种代码以后一定可以优化的。现在先不管，我们先往下走。

然后初始化，属性当中除了图片和宽高属性以外，还应该有一个。就是图片的总数

构造器里面我们接着写，这里面我们除了定义他的宽高这些之外，应该还有一个角标，因为我们可以想一下，图片之前的切换，其实就是数组下标的切换对吧。

那么写到这，动画方法我们一会来分析一下

那么现在看，假如我都写完了，我是不是可以直接到核心控制器调用就可以了。但是现在有一个问题，目前核心控制器里这3句话，是我们第一阶段的。那么再写的是第二阶段的了。所以我们不能写在一起了，要分情况了，那么我们靠state来判断游戏处在哪个阶段就行，在哪个阶段做哪个事，那直接用swith case就行了。

但是在这里一定要注意一点，就是我们的背景不管在哪个阶段都是有的，对吧，一直在做动画效果，那么我们吧绘制背景已经背景的动态效果也放在第一阶段里，那肯定是不对的。所以最好的解决办法，就是把这两个背景以及logo，扔到判断的外面

现在刷新浏览器看下，效果没有问题，但是发现速度非常快。那么怎么可以让他慢一下呢，这块肯定不是该核心控制器的100毫秒。我们这么改

首先定义一个速度，让他=0，

如果觉得有慢了，那么我们就直接改这个%后面数就行了