美文网首页零基础学编程互联网科技程序员
0050 游戏连连看的初始化以及点击事件

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

作者: 学哥量化交易学习 | 来源:发表于2017-07-27 09:52 被阅读80次

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

    初始化随机生成关卡

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

    3-9-1.jpg

    刷新网页:

    3-9-2.jpg

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

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

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

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

    3-9-3.jpg 3-9-4.jpg

    刷新网页:

    3-9-5.jpg

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

    要考虑成对出现的情况

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

    3-9-6.jpg 3-9-7.jpg

    刷新网页:

    3-9-8.jpg

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

    每一关单独测试

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

    3-9-9.jpg

    刷新网页:

    3-9-10.jpg

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

    编写点击处理事件

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

    3-9-11.jpg 3-9-12.jpg

    刷新网页:

    3-9-13.jpg

    点击某个图片:

    3-9-14.jpg

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

    3-9-15.jpg

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

    3-9-16.jpg

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

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

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

    3-9-17.jpg 3-9-18.jpg

    刷新网页:

    3-9-19.jpg

    选中一个图片:

    3-9-20.jpg

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

    3-9-21.jpg

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

    相关文章

      网友评论

        本文标题:0050 游戏连连看的初始化以及点击事件

        本文链接:https://www.haomeiwen.com/subject/umgakxtx.html