纯js 别踩白块游戏解析与源码

（一）别踩白块

1、考虑游戏中有哪些对象，属性和方法？
   别踩白块游戏仔细想想如果非要对象的话，游戏显示界面可以算是一个对象，下滑的区域算一个对象（每个小方格算对象的属性对象吧）
2、这里主要要思考怎样在每一行产生一个随机位置的小黑块，并能标识它，以备游戏当中被正确点到或者未被点到时做记录，还要思考怎样做才能让滑动块不间断？
   滑动块的不间断首先想到的肯定是定位，给游戏显示界面一个相对定位，滑动块绝对定位先将第一个定位在游戏显示界面，然后动态创建一个放在游戏界面的最上方，处于隐藏，两个滑动块根据top值增大同步向下（定时），当第一个滑块滑出界面的时候删除此滑块，同时创建一个新滑块定位在界面的最上方隐藏出，向下滑动，这样界面上始终会有两个滑块在交替被删除被创建

3、对象的创建是应用与同一对象被多次使用，根据对此游戏的分析，我选择直接用函数实现每个功能即可
（1）由于我在界面用HTML已经产生了一个滑块，所以可以先单独写个方法为其滑块添加内部小方块
（2）添加小方块的方法，由于这里用到的是6*4的滑块，所以需要24个小块，用for循环创建并设置其id属性，让id名中有数组下标索引，以便之后判断是否点击正确，将小块依次加入滑块中，要想做到div同行出现，必须让每个小块进行左浮动方便之后根据随机产生值，遍历所有div小块，根据下标索引，找到与随机值相等的，设置其class属性为背景为黑色的类名，否则则设置为背景为白色

（3）随机产生黑色块下标的方法，因为滑块大小的相对值为6*4，所以定义一个长度为6的数组，存放6个小方块的位置，数组下标为0的位置值为随机数（0-3第一行），为下标为1的位置让随机数（4-7第二行）依次完成六行的小方块位置

（4）俩滑块交替删除再创建的方法，设置两个滑块的class名都相同，这样每次进入此函数根据class名获得的类数组，第一个都是最先滑出的滑块，所以只需判断类名获得元素数组下标为0的滑块top值是否越界，若越界直接删除再创建，创建的滑块就变成了后面的元素，所以这样循环交替就可以做到
4、注意事项及难点

 （1）每行只出现一个黑块，所以存放黑块位置时要想清楚存放的值不能出现在同一行
 （2）俩滑块进行删除再创建时一定要注意其无缝对接
 （3）一个全局数组存放每个黑块的唯一标识，第二个滑块中每个小黑块的位置数组需连接在全局数组的后面，以防发生冲突

5、代码不足以及优化

  第一个滑块的子方块要单独设置函数来填充，此处代码也重复出现，可以进行优化使其两个滑块更加统一

  游戏分数的显示，以及关卡的设置等未设置，可以为游戏添加更多丰富多彩的效果

6、收获

   最大的收获是学会了两种表现