游戏连连看2.5
上节课初步实现了网页游戏连连看的显示内容和样式。
这节课说明如何实现关卡初始化以及点击事件和消除方块。
初始化随机生成关卡前面函数已经做好了，设置的是一个固定的值。
将固定的值修改为随机函数，取值范围从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个图片，仅仅是选中焦点消失了。
下节课，就来重点编写最核心的算法：判断是否可以连通函数。