游戏中的按钮不难实现，但是如何实现按钮点击后的状态改变效果呢？例如：点击游戏中的一个按钮后，按钮凹陷下去，隔了简短的时间间隔后，按钮又弹起来，恢复原来的状态。这节课我们来实现按钮的这种效果，我们在游戏资源加载完毕后，资源进度条显示100%后，在资源进度条下面显示一个按钮，点击这个按钮后，进入游戏，显示游戏主面板。效果如下图所示
我们来看看游戏代码需要做哪些调整，由于资源加载完毕后并不自动切换到游戏主面板，也就是说资源加载完毕后需要显示资源加载进度条，所以，游戏的状态变量值需要变更，修改如下
既然游戏状态变量值更改了，那么，很自然，依赖此值绘制游戏场景的代码也需要做相应的调整，修改后的代码如下：
上节课将消息处理代码handleMessage()放在了drawScene()函数里，严格意义上来说，每一个函数的功能是单一的，所以，这节课将消息处理代码放在html页面里的runGame()函数中，代码如下：
接着就是今天的主角，游戏按钮类，先看看它的定义
其中成员变量bDone表示按钮状态是否变更完成；成员变量nState表示按钮当前的状态；成员变量dbClickTime保存按钮按下的时间，将当前时间与此成员变量比较，如超过某一固定时间间隔值，则修改按钮的状态；成员变量fCB保存按钮的回调函数，即点击按钮后将执行此函数，将按钮要实现的功能放在此回调函数中。下面是对相应成员变量操作的函数
我们接着看看初始化按钮参数的函数代码
由于点击资源加载进度条下面的按钮后，游戏场景会切换到游戏主面板，所以需要给按钮的回调函数增加相应代码来实现此功能，我将回调函数的代码写在了g_aControlPara参数初始化数组里，代码如下
此外，我对消息的处理方式进行了调整，如果一条消息已经处理了，那么后续控件将不会再对此消息进行处理，代码如下
接下来，是三个关键的成员函数，由于我们修改了参数初始化数组变量，所以控件的初始化成员函数需要修改
因为控件状态变更涉及多个图片，所以需要判断o.name是否是数组对象（保存多个状态使用的图片名称），是的话依次初始化每个图片对象；然后，控件的绘制成员函数需要修改
需要根据控件当前状态使用相应的图片绘制控件，同时需要变更控件状态并判断状态变更是否完成；最后，控件的消息处理成员函数需要修改，代码如下
由于涉及控件状态变更，所以需要判断状态变更是否未开始，是的话将状态变更设为开始，同时保存状态变更开始的时间，接着判断状态变更是否完成，是的话将调用控件的回调函数，即实现控件点击后的功能，同时将消息标记为已处理，防止重复处理。最后，将今天的内容录了一个视频，文章未提到的地方可以参看视频。
未完待续，敬请关注！后续更精彩，谢谢大家！