我在网上看了许多的别踩白块的代码,最终选择了蓝桥的写法,感觉更符合新手理解(因为我是新手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玩的比较好的都能看明白