上节课初步实现了网页游戏连连看的显示内容和样式。
这节课说明如何实现关卡初始化以及点击事件和消除方块。
初始化随机生成关卡
前面函数已经做好了,设置的是一个固定的值。
将固定的值修改为随机函数,取值范围从1到难度设置的值。
例如难度设置第一关最多30种图形,则取值范围从1到30。第2关则取值范围从1到32。以此类推。
linklink.js修改如下:
刷新网页:
3-9-2.jpg可以看到随机函数起作用了。
认真观察生成的图片情况,发现2个问题:
1.随机函数生成的时候,随意性太大,可能某个图片出现的次数太多而另外某个图片可能根本不出现,需要将这个出现次数的差异性尽量降低一些。
2.连连看游戏的规则要求图片都是成双成对的,如果相同的图片出现奇数个数,则游戏无法完成了。
控制每种图片最多出现的个数
根据关卡难度,每一关最多出现的图片的种类数,再根据总的棋盘的格子总数,可以计算出每种图片出现的次数的平均值。
然后将平均值向上取整,然后如果是奇数再加1变为偶数。就可以得到每种图片最多出现的次数。
然后做一个统计数组,里面每生成一个随机图片,就往统计数组对应的图片值加1,如果达到最多出现次数,则重新换一个随机图片。
这样的方式可以确保每种图片是平均出现的,不会出现的次数差异太大。
linklink.js修改如下:
刷新网页:
3-9-5.jpg可以看到,图片出现的次数变的比较平均了。
要考虑成对出现的情况
再来解决每种图片出现的个数必须是偶数的情况。
图片生成之后,每种图片出现的次数分别统计,只可能是2种结果,要么是奇数,要么是偶数。
如果是偶数则不用管了,如果是奇数,则将这些奇数的情况放入一个列表中,存储的是图片序号。
很明显,这个列表的元素总数肯定是偶数,因为整个棋盘是偶数的。
那么这个列表进行循环,每次步进2个元素,将这个2个元素,一个做加1,一个做减1,结果必然就是2个对应图片都是偶数了。
具体就是根据这要减1的图片序号,去已生成的棋盘存储数据中找到相等的图片序号的位置,将此位置的图片序号改为加1的图片序号。
linklink.js修改如下:
刷新网页:
3-9-8.jpg统计每一种图片个数,可以看到全部都是偶数了。
每一关单独测试
修改变量level的值,这样可以测试每一关,不同难度的数值,生成关卡数据是否有异常。
linklink.js修改如下:
刷新网页:
3-9-10.jpg可以看到第2关的情况,出现了新的图片了。说明关卡不一样了。
多刷新几次网页,看看是否出现异常或者需要花费很长时间。
然后依次修改这个值,从3到9,测试每一关都能正常生成相应数据。
编写点击处理事件
初始化完成之后,来处理图片点击事件。
可以参照之前做算24点的做法,选中的图片修改css样式的名字。
新增2个参数为selectrow和selectcol,默认为-1,表示无选中。
如果没有选中图片,则修改样式为选中,并且将selectrow和selectcol设置为选中的行号和列号。
如果已经有一个选中图片,则判断当前点击的图片序号和之前选中的序号是否相同,不相同则切换选中焦点。
如果相同则需要判断是否可以连通,默认判断函数都是可连通的,后面再来编写判断函数。
如果连通的话,则将这2个位置的图片序号都设置为0,并修改图片的src属性。看起来就是图片消除了。
linklink.js修改如下:
刷新网页:
3-9-13.jpg点击某个图片:
3-9-14.jpg可以看到选中状态了,然后点击一个不同的图片:
3-9-15.jpg可以看到选中的焦点切换到后面的图片,然后点击另外一个相同的图片:
3-9-16.jpg可以看到2个相同图片消失了。同时选中焦点也消失了。
假设都是不连通情况的处理
刚才是将连通函数都是返回true,那么还有可能是false。
这种情况下的处理就是不消除图片,仅仅是将选中焦点清除。
linklink.js修改如下:
刷新网页:
3-9-19.jpg选中一个图片:
3-9-20.jpg然后点击另外一个相同的图片:
3-9-21.jpg可以看到,没有消除这2个图片,仅仅是选中焦点消失了。
下节课,就来重点编写最核心的算法:判断是否可以连通函数。
网友评论