纯js 别踩白块游戏解析与源码

本文详细解析了纯JavaScript实现别踩白块游戏的思路,包括如何创建游戏对象、生成随机黑块、实现滑块的无缝交替、以及游戏逻辑的优化。重点介绍了对象创建、事件监听、动态生成元素和CSS定位等技术,帮助读者理解游戏的实现过程。
摘要由CSDN通过智能技术生成

(一)别踩白块

1、考虑游戏中有哪些对象,属性和方法?
   别踩白块游戏仔细想想如果非要对象的话,游戏显示界面可以算是一个对象,下滑的区域算一个对象(每个小方格算对象的属性对象吧)
2、这里主要要思考怎样在每一行产生一个随机位置的小黑块,并能标识它,以备游戏当中被正确点到或者未被点到时做记录,还要思考怎样做才能让滑动块不间断?
   滑动块的不间断首先想到的肯定是定位,给游戏显示界面一个相对定位,滑动块绝对定位先将第一个定位在游戏显示界面,然后动态创建一个放在游戏界面的最上方,处于隐藏,两个滑动块根据top值增大同步向下(定时),当第一个滑块滑出界面的时候删除此滑块,同时创建一个新滑块定位在界面的最上方隐藏出,向下滑动,这样界面上始终会有两个滑块在交替被删除被创建

3、对象的创建是应用与同一对象被多次使用,根据对此游戏的分析,我选择直接用函数实现每个功能即可
(1)由于我在界面用HTML已经产生了一个滑块,所以可以先单独写个方法为其滑块添加内部小方块
(2)添加小方块的方法,由于这里用到的是6*4的滑块,所以需要24个小块,用for循环创建并设置其id属性,让id名中有数组下标索引,以便之后判断是否点击正确,将小块依次加入滑块中,要想做到div同行出现,必须让每个小块进行左浮动方便之后根据随机产生值,遍历所有div小块,根据下标索引,找到与随机值相等的,设置其class属性为背景为黑色的类名,否则则设置为背景为白色

(3)随机产生黑色块下标的方法,因为滑块大小的相对值为6*4,所以定义一个长度为6的数组,存放6个小方块的位置,数组下标为0的位置值为随机数(0-3第一行),为下标为1的位置让随机数(4-7第二行)依次完成六行的小方块位置

(4)俩滑块交替删除再创建的方法,设置两个滑块的class名都相同,这样每次进入此函数根据class名获得的类数组,第一个都是最先滑出的滑块,所以只需判断类名获得元素数组下标为0的滑块top值是否越界,若越界直接删除再创建,创建的滑块就变成了后面的元素,所以这样循环交替就可以做到
4、注意事项及难点

 (1)每行只出现一个黑块,所以存放黑块位置时要想清楚存放的值不能出现在同一行
 (2)俩滑块进行删除再创建时一定要注意其无缝对接
 (3)一个全局数组存放每个黑块的唯一标识,第二个滑块中每个小黑块的位置数组需连接在全局数组的后面,以防发生冲突

5、代码不足以及优化

  第一个滑块的子方块要单独设置函数来填充,此处代码也重复出现,可以进行优化使其两个滑块更加统一

  游戏分数的显示,以及关卡的设置等未设置,可以为游戏添加更多丰富多彩的效果

6、收获

   最大的收获是学会了两种表现

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值