(一)别踩白块
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、收获
最大的收获是学会了两种表现