Snake6(结束),操作多个 div 之间不会互重叠,若铺满一行,便自动消除。

从七个基本方块中,随机取一个,以600毫秒的速度,匀速从容器顶部开始下落,每次下落 20px。
若方块的底部,触碰到容器的底部,或触碰到其他方块,便停下来并变成灰色。
若下落的方块正好铺满一行,便自动消除该行。
然后再从七个基本方块中,随机取一个继续下落,周而复始。

关键点一:碰到其他方块变成灰色

在check函数里面添加overlap标识是否碰到其他块。这个的原理就是,在方块变成灰色的时候,根据方块变灰在屏幕中的位置组合为键,在container里面存一个标记。这样一来,检查当前下落的方块图形是否碰到其他方块图形就很简单了,只要判断当前方块图形的所有方块的左上角坐标是否在container里面拥有标识,如果check之后当前正在下落的方块图形与存在标识的坐标一致,那么就说明会发送同一个块的左上角坐标重叠,也就是碰撞,此时检查不通过,overlap为true。
完成后的完整代码如下:




    Snake
    
    


    

有个隐藏的bug,就是一直按回车,方块会卡在空中。

关键点二:铺满一行就消除

添加findFull函数
思路就是前面我们在container存储了每个灰色左上角坐标的标识。我们遍历每一行,如果该行左上角坐标有在container对应的标识且达到列数,说明该行每一个方块都是灰色,于是调用removeLine函数清除该行。
注意:两大块的注释代码,我们在前面碰撞检测基础上继续添加消除功能,反而连碰撞检测效果都没了,于是有了两大块的注释代码。可以对比注释部分与非注释部分,比较区别。

完整源码:




    Snake
    
    


    

代码传送门:https://github.com/xiaohuacc/snake/blob/index006/index006.html

你可能感兴趣的:(Snake6(结束),操作多个 div 之间不会互重叠,若铺满一行,便自动消除。)