数独游戏解答手册（数独游戏游戏主面板显示）

　　上次给大家介绍了如何实现资源加载进度条，资源加载完毕后就会进入游戏主界面。我们接着来实现游戏的功能——显示游戏主面板。

　　目前我们的数独游戏在资源加载完毕后就没有后续动作了，即游戏画面一直停留在进度条显示100%的画面，那么如何显示游戏主面板呢？很简单，更改游戏状态。嗯，还记得那个名字叫gxsGameState的类么？如果不记得了，我们一起来回忆一下他的模样

　　很明显，要想显示游戏主面板，只需要将游戏状态类的成员变量nState的值改为1即可，那么，我们在哪里改？如何改呢？

　　因为游戏主面板是在游戏资源加载完毕后就可以显示了，所以应该在资源加载完毕的时候更改游戏状态。让我们来回顾一下资源加载的代码片段

　　看出来了么，我们应该在哪里更改游戏状态？好，不绕圈子了，我来告诉你吧，我们应该在onload事件里更改游戏状态，代码如下：

　　注意：状态只能是在资源加载完毕后才能更改！那个fCB是一个回调函数，其作用是初始化需要使用资源的相关对象，例如shape、sprite、ui等等（稍后会详细介绍），这个函数是从index.html页面调用g_oGameRes.loadResource（）函数传入的。让我们来看看fCB这个回调函数的真面目。

　　这个回调函数执行两个管理器g_oUIManage和g_oShapeManage的初始化，为后续的绘图操作做好准备工作。

　　如果你现在浏览器里打开index.html页面，你会发现屏幕变黑了，什么都不显示了。这是为什么呢？因为你没有为状态值为1的游戏状态绘制画面！下面，我们来完善这一功能。不啰嗦，看代码

　　目前正常游戏状态下，只显示游戏主面板和9×9数字面板边框。看到这里你可能会说，你妹！装逼！我直接用canvas的context调用drawImage绘制游戏主面板不行么？又是管理器又是类，用得着这么复杂吗？如果游戏中需要绘制的内容不是很多、游戏也不复杂的情况下确实可以调用drawImage直接绘制，但是一旦游戏中需要绘制的内容很多，这样做只会让你的代码烦杂，很难管理。

　　好了，最后让我们看看那两个管理器类的代码来结束今天的内容。首先看一下g_oShapeManage类的代码

　　这个类是用来管理不需要图片资源的对象，例如：线、矩形等，注意那个aShapes是一个保存shape对象（形状）的数组。我们接着看看shape类的代码

　　这个类目前的功能很简单，后续将不断完善它的功能。它只是一个父类，我们来看一个它的子类gxsBoardRectShape——棋盘边框

　　gxsExtendObj(gxsBoardRectShape,gxsShape);这一行代码是通过原型实现继承，我们看一下这个函数的代码

　　如果你不理解上述代码的含义，请查看《JavaScript高级程序设计》这本书。最后我们看看g_oUIManage管理器及相关类的代码

　　代码很简单，依次初始化每一个UI，然后将它们分别保存至aUIS数组中。初始化方法与g_oShapeManage类似。最后将今天所讲的内容录了一个视频，有些没有详细讲到的内容视频有提及，大家可以对照看一下视频。

数独游戏开发——显示游戏主界面

未完待续，后续更精彩，请继续关注，谢谢！