使用原生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实现

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值