使用原生js做一个别踩白块的小游戏

时间:2024-03-14 15:56:36

学习了几天原生js后,一直想要做点东西出来,最后从b站,知乎 ,github 上面找到了这个别踩白块的项目,下面是一下体会和说明,源码先放在超链接。GitHub链接别踩白块链接

介绍一下别踩白块的构建过程:
1、创建html文件:
使用原生js做一个别踩白块的小游戏
页面的主要组成部分:
游戏最上面的cont部分,游戏下面的计分count部分
cont部分由main和go两个部分组成,其中main是主要的游戏部分。
2、有了html 下面用css来进行页面的排布:
使用原生js做一个别踩白块的小游戏
这个并非完整的css,源码部分将会在github中给出。

3、下面是最重要的js部分:
首先 抓取到dom元素,方便我们操作dom元素
使用原生js做一个别踩白块的小游戏
接下来 写一个创建div的方法:
使用原生js做一个别踩白块的小游戏
3、将div移动起来:
使用原生js做一个别踩白块的小游戏

最后 说一下整个代码的运行过程:
1、先将整个html页面渲染到浏览器中
2、js获取到dom元素
3、点击游戏开始,开始运行move() 方法 ,运行对象为main这个div,运行过程中不断添加div即不断调用CDiv() 方法加入到main这个div中去。
4、判断游戏是否结束的方法:1、如果存在非白块没有点击,即main中的div超过六个就会失败 2、如果点击了白块也会失败

说明: 点击后的非白块会通过操作dom的方法将其清除
白块有加速的功能,通过更改speed实现