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

（一）别踩白块

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）    通过style设置好样式，只需动态创建元素，设置其属性就可以，简单方便，效果佳

（2）    subStr()截取一部分id值来当做一种判断依据也是绝了，学习到了

（3）    知识就在那，看你会用不会用了，更重要的是会不会巧用

（4）    BOM的知识看似简单，但还是要掌握，有些内置方法也是，掌握熟悉的内置方法越多，可能会为编程减少很多压力。

源码：

var box_arr=[];//存放黑色块的数字
var name=true;
var score=600;
var speed=500;
var count=0;
//随机产生一些数字用于标识黑块
function randomNum(){
var arr=[];
for(var i=0;i<6;i++){
var num=Math.floor(Math.random()*4+i*4);
arr.push(num);
}
return arr;
}
//判断被点击到黑块
function clickdown(){
var num=this.id.substr(3);
if(box_arr.pop()!=num){
clearTimeout(timer);
alert("游戏结束");
return;
}else{
this.style.background="#ffffff";
score+=100;
count++;
}
//加速
//console.log(count);
if(count!=0&&count%15==0){
clearInterval(timer);
speed=speed-100;
console.log(speed);
setInterval(moveDown,speed);
}
}
function showBox1(){
var box=document.getElementById("box1");
box.setAttribute("class","box1");
var arr=[];
arr=randomNum();//随机产生每行黑块位置放在数组里
box_arr=arr.concat(box_arr);//放入全局数组
for(var i=0;i<24;i++){
var sub_box=document.createElement("div");
sub_box.setAttribute("id","ele"+i);
if(arr.indexOf(i)>-1){
//如果数组中存在则标识为黑块 否则为白块
sub_box.setAttribute("class","subBlack");
}else{
sub_box.setAttribute("class","sub");
}
sub_box.addEventListener("click",clickdown,false);
box.appendChild(sub_box);
}

}
//产生两个box，互相替换
function createBox(){
var arr=[];
arr=randomNum();//随机产生每行黑块位置放在数组里
box_arr=arr.concat(box_arr);//放入全局数组
var box=document.createElement("div");
    box.setAttribute("class","box1");
//定位到最上面
box.style.position="absolute"
box.style.top="-600px";
//设置黑色块
for(var i=0;i<24;i++){
var sub_box=document.createElement("div");
sub_box.setAttribute("id","ele"+i);
if(arr.indexOf(i)>-1){
//如果数组中存在则标识为黑块 否则为白块
sub_box.setAttribute("class","subBlack");
}else{
sub_box.setAttribute("class","sub");
}
sub_box.addEventListener("click",clickdown,false);
box.appendChild(sub_box);
}
var show=document.getElementById("show");
console.log(box);
show.appendChild(box);
}
//滑动交替
function moveDown(){
var show=document.getElementById("show");
var box=document.getElementsByClassName("box1");
var top=[];
top[0]=parseInt(box[0].style.top);
top[1]=parseInt(box[1].style.top);
for(var i=0;i<2;i++){
top[i]+=15;
box[i].style.top=top[i]+"px";
}
if(top[0]==600){
show.removeChild(box[0]);
createBox();
}
score-=5;
if(score==0){
clearInterval(timer);
alert(游戏结束);
return;
}
}
window.onload=function(){
showBox1();
createBox();
timer=setInterval(moveDown,speed);
}