The don-t-touch-white-blocks from ultrachicken

don-t-touch-white-blocks's Introduction

原生 JS 写别踩白块

我在网上看了许多的别踩白块的代码，最终选择了蓝桥的写法，感觉更符合新手理解（因为我是新手hhh）。

它把这个小游戏每个步骤都分成了各个函数，我个人觉得这样的写法在以后开发中对我们理解面向对象有点帮助。

首先，定义一个容器用来框住整个游戏的本体
其次，里面其实可以根据自己的想法填一些功能，比如我添加了计分功能和开始游戏功能,但别忘了里面得有个最重要的游戏内容盒子
之后的事情就好办了，游戏内容盒子里添加行，每一行里添加4个小块，我这里用的 div ，不过用**ul li问题不大。我图省事直接float：left了，要是想在手机上玩的兄弟，可以考虑flex布局**
JS 首先定义一个创建行列的函数，写完放在初始化函数里
之后就可以写让这个游戏内容盒子动起来的函数move()，通过调整盒子的top属性来达到动起来的目的。在初始化里使用**setInterval(move,[毫秒数])**达到动画效果。
- 注意不可以直接用 **obj.style.top**来获得top属性，这样写只能获得行内块的top可以采用 offsetTop 或者 window.getComputedStyle(element,null).top
每次move()就判断是否到底，到底了的话就在内容盒子的前面insert一行，底下的一行就删掉，让内容盒子向上top一个行的宽度就行，这样就达到了一直滚动的效果
后面的都是很简单的功能了，兄弟们如果DOM玩的比较好的都能看明白