上次给大家介绍了如何实现资源加载进度条，资源加载完毕后就会进入游戏主界面。我们接着来实现游戏的功能——显示游戏主面板。
目前我们的数独游戏在资源加载完毕后就没有后续动作了，即游戏画面一直停留在进度条显示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类似。最后将今天所讲的内容录了一个视频，有些没有详细讲到的内容视频有提及，大家可以对照看一下视频。
未完待续，后续更精彩，请继续关注，谢谢！