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

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

介绍一下别踩白块的构建过程：
1、创建html文件：

页面的主要组成部分：
游戏最上面的cont部分，游戏下面的计分count部分
cont部分由main和go两个部分组成，其中main是主要的游戏部分。
2、有了html 下面用css来进行页面的排布：

这个并非完整的css，源码部分将会在github中给出。

3、下面是最重要的js部分：
首先 抓取到dom元素，方便我们操作dom元素

接下来 写一个创建div的方法：

3、将div移动起来：

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

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

• 点赞
• 收藏
• 分享
• • 文章举报

konggeg 发布了15 篇原创文章 · 获赞 18 · 访问量 536 私信 关注

标签：白块,游戏,dom,js,小游戏,div,main
来源： https://blog.csdn.net/kongge123456/article/details/104060653