上节课初步实现了网页游戏连连看的显示内容和样式。
这节课说明如何实现关卡初始化以及点击事件和消除方块。


初始化随机生成关卡


前面函数已经做好了，设置的是一个固定的值。
将固定的值修改为随机函数，取值范围从1到难度设置的值。
例如难度设置第一关最多30种图形，则取值范围从1到30。第2关则取值范围从1到32。以此类推。
linklink.js修改如下：


刷新网页：


可以看到随机函数起作用了。

认真观察生成的图片情况，发现2个问题：
1.随机函数生成的时候，随意性太大，可能某个图片出现的次数太多而另外某个图片可能根本不出现，需要将这个出现次数的差异性尽量降低一些。
2.连连看游戏的规则要求图片都是成双成对的，如果相同的图片出现奇数个数，则游戏无法完成了。


控制每种图片最多出现的个数


根据关卡难度，每一关最多出现的图片的种类数，再根据总的棋盘的格子总数，可以计算出每种图片出现的次数的平均值。
然后将平均值向上取整，然后如果是奇数再加1变为偶数。就可以得到每种图片最多出现的次数。
然后做一个统计数组，里面每生成一个随机图片，就往统计数组对应的图片值加1，如果达到最多出现次数，则重新换一个随机图片。
这样的方式可以确保每种图片是平均出现的，不会出现的次数差异太大。
linklink.js修改如下：



刷新网页：


可以看到，图片出现的次数变的比较平均了。


要考虑成对出现的情况


再来解决每种图片出现的个数必须是偶数的情况。
图片生成之后，每种图片出现的次数分别统计，只可能是2种结果，要么是奇数，要么是偶数。
如果是偶数则不用管了，如果是奇数，则将这些奇数的情况放入一个列表中，存储的是图片序号。
很明显，这个列表的元素总数肯定是偶数，因为整个棋盘是偶数的。
那么这个列表进行循环，每次步进2个元素，将这个2个元素，一个做加1，一个做减1，结果必然就是2个对应图片都是偶数了。
具体就是根据这要减1的图片序号，去已生成的棋盘存储数据中找到相等的图片序号的位置，将此位置的图片序号改为加1的图片序号。
linklink.js修改如下：



刷新网页：


统计每一种图片个数，可以看到全部都是偶数了。


每一关单独测试


修改变量level的值，这样可以测试每一关，不同难度的数值，生成关卡数据是否有异常。
linklink.js修改如下：


刷新网页：


可以看到第2关的情况，出现了新的图片了。说明关卡不一样了。
多刷新几次网页，看看是否出现异常或者需要花费很长时间。
然后依次修改这个值，从3到9，测试每一关都能正常生成相应数据。


编写点击处理事件


初始化完成之后，来处理图片点击事件。
可以参照之前做算24点的做法，选中的图片修改css样式的名字。
新增2个参数为selectrow和selectcol，默认为-1，表示无选中。
如果没有选中图片，则修改样式为选中，并且将selectrow和selectcol设置为选中的行号和列号。
如果已经有一个选中图片，则判断当前点击的图片序号和之前选中的序号是否相同，不相同则切换选中焦点。
如果相同则需要判断是否可以连通，默认判断函数都是可连通的，后面再来编写判断函数。
如果连通的话，则将这2个位置的图片序号都设置为0，并修改图片的src属性。看起来就是图片消除了。
linklink.js修改如下：



刷新网页：


点击某个图片：


可以看到选中状态了，然后点击一个不同的图片：


可以看到选中的焦点切换到后面的图片，然后点击另外一个相同的图片：


可以看到2个相同图片消失了。同时选中焦点也消失了。


假设都是不连通情况的处理


刚才是将连通函数都是返回true，那么还有可能是false。
这种情况下的处理就是不消除图片，仅仅是将选中焦点清除。
linklink.js修改如下：



刷新网页：


选中一个图片：


然后点击另外一个相同的图片：


可以看到，没有消除这2个图片，仅仅是选中焦点消失了。
下节课，就来重点编写最核心的算法：判断是否可以连通函数。