0050 游戏连连看的初始化以及点击事件

频道:游戏攻略 日期:

游戏连连看2.5

上节课初步实现了网页游戏连连看的显示内容和样式。

这节课说明如何实现关卡初始化以及点击事件和消除方块。

初始化随机生成关卡

前面函数已经做好了,设置的是一个固定的值。

将固定的值修改为随机函数,取值范围从1到难度设置的值。

例如难度设置第一关最多30种图形,则取值范围从1到30。第2关则取值范围从1到32。以此类推。

linklink.js修改如下:

0050 游戏连连看的初始化以及点击事件

刷新网页:

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

认真观察生成的图片情况,发现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个图片,仅仅是选中焦点消失了。

下节课,就来重点编写最核心的算法:判断是否可以连通函数。