H5数独游戏开发数字填入及检验

　　上节课给大家介绍了数字面板如何响应鼠标点击事件，在控件台打印一条消息表示对鼠标点击的响应。在实际游戏中，用户点击数字面板空白处后将显示数字选择面板，用户点击数字选择面板上的数字按钮后，将点击的数字填入数字面板。我们规定以下两种情况下不显示数字选择面板：1、用户没有点击数字面板空白处；2、上次填入数字后检验出重复数字。运行效果如下图所示：
　　这个截图中用户在第四行、第四列的空白处填入了数字9，导致行、列、块预警，即同一行数字9重复，同一列数字9重复，3X3块内数字9重复。下面我们先介绍如何显示数字选择面板。数字选择面板是在数字面板的回调函数中实现，代码如下：
　　我们看看那个clickInNumBord()函数做了什么，它的代码如下：
　　这个函数主要做了这几件事，首先计算出数字面板的起始及结束坐标，然后判断点击位置是否在数字面板范围内，接着计算出点击位置在数字面板内的行、列号，然后判断点击的是不是固定数字，是的话返回false不变更游戏状态为4，否则调用setClcikPosition()函数保存点击位置的行、列号。我们来看看这个setClcikPosition()函数的代码，如下：
　　这个函数的作用我们最后再来介绍，先让我们回到数字面板的回调函数继续往下面讲解，接下来就是清除鼠标事件，然后将游戏状态值设置为4，表示显示数字选择面板，即响应用户点击后弹出数字选择面板。然后游戏进入等待用户点击数字面板上数字按钮的状态。那么用户点击的数字是怎样填入数字面板的呢？我来告诉大家吧，关键点就在控件参数初始化数组中每一个数字按钮的事件回调函数，我们以数字按钮1为例，看看它的回调函数代码：
　　先清除鼠标点击事件，然后填入数字1，最后恢复游戏状态值为2，即回到正常游戏状态，我们来看看填入数字的函数FillNum()的代码：
　　首先获取数字面板上点击的位置（行、列号），然后将点击处的数字标注为用户选择填入的数字，最后判断填入的数字是否合理，即判断在3X3块内，同一行内、同一列内是否有重复的数字，有的话设置数字重复预警状态为显示状态。这里check3X3BlockNum()、checkRowNum()和checkColNum()为数字重复检测函数，下面我们分别来看看它们的代码，首先看看check3X3BlockNum()的代码，如下：
　　首先调用calc3X3BlockRowCol()计算数字填入位置的3X3 块起始行、列号及结束行、列号，然后依次对3X3块内的每一数字检测是否有重复，这里有两种情况，一是当前数字是默认生成的固定数字，二是当前数字是用户输入的数字，如果是第二种情况，需要判断当前检测的位置是否与用户填入数字的位置一致，一致的话不算重复数字，至于为什么大家开动小脑筋想一下就明白了。下面我们看看那个calc3X3BlockRowCol()的代码，如下：
　　代码的作用很简单，一目了然，根据用户点击处的行、列号计算出点击位置所在3X3块的起始行、列号和结束行、列号。至于checkRowNum()和checkColNum()的代码并不复杂，与check3X3BlockNum()代码很相似，这里不展开讲了，可以查看本期视频。好了，到这里，数字已填入数字面板，并且进行了重复检测，如果数字有重复，将打开预警显示状态，数字面板会显示数字重复预警（即有重复数字的3X3块、行、列背景与相应大小的红色块进行alpha混合，并将混合的结果输出到相应的背景处），这个效果是如何实现的呢？让我们先来看看g_o3X3BlockWarning、g_oRowWarning和g_oColWarning这三个预警对象的实现代码，先介绍3X3块预警g_o3X3BlockWarning对象的实现代码
　　gxs3x3BlockWarning类继承自gxsShape，增加了一个表示是否显示的成员变量bShow，以及对此变更读写的两个成员函数getShow()和setShow()，除此之外，还有initParameter()和draw()两个成员函数，代码如下
　　这个函数将在形状初始化的时候被调用，返回当前形状的起始坐标及宽高。下面看看它的成员函数draw()，代码如下：
　　首先判断是否需要显示预警块，是的话计算块的起始位置及宽高，然后获取预警块所在区域的背景图像，依次将背景图像中的每一个像素与红色进行alpha混合，再将混合好的图像复制到预警块所在区域，这种效果就好像在数字面板相应区域放上了一块红色透明玻璃。为方便同时显示预警块，我将三种预警块的显示放在了一个叫做drawWarning()的函数内，代码如下：
　　那么请大家想一下，我们应该在什么地方调用此函数呢？想到没有？这个地方就是绘制游戏场景的函数内，即gxsGameObj的成员函数drawScene()，代码如下：
　　好了，到此用户已经可以填入数字了，并且一旦检测到数字重复会显示数字重复预警，我们规定，数字重复预警未清除的情况下，不允许用户点击数字面板空白处（即点击后不显示数字选择面板，除非用户点击的是导致预警的重复数字）。为此，我们还需要修改一下setClcikPosition()的代码，代码如下：
　　在判断出显示预警的情况下，在控件后打印一条提示消息，然后直接返回，否则保存当前点击的行、列位置。显然以控件台消息提示用户有数字重复预警未清除不够友好，下节课我们将以对话框的形式提示用户有数字重复预警未清除。最后，将今天的内容录了一个视频，文章未提到的地方可以参看视频。
　　H5数独游戏开发——数字填入及预警
　　未完待续，敬请关注！后续更精彩，谢谢大家！