别踩白块小游戏

写作心路：??

1. 整个页面只有一个大块，其他元素DOM创建，同时使用flex布局，使用手机自适应模式。
2. 设置黑白块行列的数目，创建一个二维数组来存放行列。

 setshuzu: function () {
    for (var i = 0; i < this.H; i++) {
          this.Arrlist.push([]);
          var m=this.randomblack() ;
           // console.log(m);
          for (var k = 0; k < this.C; k++) {
              var lie = document.createElement ("div");
              lie.className = "perlie";
              lie.style.lineHeight =(game.viewheight /game.H)+"px";
              if(k ==m&& i<4){
                  lie.style.background ="black";
                  this.blackarr.unshift (lie);
              }?
             else{
                 lie.style.background ="white";
             }
             this.Arrlist [i].push(lie);
             }
        }
     },

3. 遍历二维数组，使用forEach（）遍历；创建元素，添加行，再遍历遍历二维数组里的每个子集合，将子集合里的每个div添加到每一行中；?

setele:function(){
       //foreach
    game.Bigblock .innerHTML ="";
    game.Arrlist.forEach(function(value,index){
      var hang=document.createElement("div");
       hang.className ="perhang";
       value.forEach (function(value1,index1) {
          hang.appendChild(value1);
       });
       game.Bigblock.appendChild(hang);
   })
}

4. 随机黑块事件，让每一行随机出现一个黑块，将事件添加到设置二维数组时，并且刚开始页面只让前4行出现黑块并且将出现的每个黑块添加到一个blackarr数组中，从数组前面添加，让最下面的黑块为该数组中的第一个元素。

      randomblack:function(){
       return  Math.floor(Math.random() * this.H);
      },

5. 让二维数组中的上下行元素交换位置（从最后一行遍历，将上一行的传递给下一行，实现黑块的下落），同时重新设置第一行，随机新的黑块出来。

     changeele:function(){
        game.lastblack ();
         for(var i=this.H-1;i>0;i--){
            this.Arrlist [i]=this.Arrlist [i-1];
         }
         game.firstH_set ();
         this. setele();
     },

???

        firstH_set :function(){
            this.Arrlist [0]=[];
            var m=this.randomblack ();
            for (var k = 0; k < this.C; k++) {
                var lie = document.createElement("div");
                lie.className = "perlie";
                lie.style.lineHeight = (game.viewheight / game.H) + "px";
                if (k == m ) {
                    lie.style.background = "black";
                    this.blackarr.push(lie);
                }
                else {
                    lie.style.background = "white";
                }
                this.Arrlist [0].push(lie);
            }
        },

6.最下面的黑块显示开始两个字 ，点击这个黑块，游戏开始，黑块变白，并且从黑块数组blackarr的前面删除这个元素。每点击一个黑块，黑块变为白色，会出现音乐，并且页面上面的分数会增加100，同时黑块下落的速度回逐渐增加。

 firstblackevent:function(){
            if(!game.blackarr.length) return;
            if(!game.isbegin ){
                game.blackarr [0].innerHTML ="开始";
            }
            game.blackarr[0].onclick=function(){
                game.blackarr [0].innerHTML =" ";
                game.isbegin =true;
                if(this.style.background =="black"){
                    console.log(game.music.length);
                    game.aid.src="mp3/"+game.music[Math.floor(Math.random () * game.music.length)];
                    game.aid.play();
                    game.score +=100;
                    game.addscore.innerHTML =game.score;
                    game.timedely -=10;
                    if(  game.timedely<=100){
                         game.timedely =100;
                    }
                }
                this.style.background ="#fff";
                game.blackarr.shift();
                game.firstblackevent ();

            }
        }

7. 设置计时器让整个块的元素交换起来，每行下落，第一行重新产生，游戏互动起来 window.requestAnimationFrame(game.clickstart );

        clickstart:function(){
           if(game.isbegin ){
                var newtime=new Date().getTime ();
                if(newtime-game.oldtime >=game.timedely){
                    game. changeele();
                    game.oldtime =newtime;
                     newtime =null;
                }
               game.firstblackevent ();
               game.whiteblock ();
            }
             window.requestAnimationFrame(game.clickstart );
        }

8. 当点击白块时游戏结束，同时这个白块变为红色，同时出现警告音乐。

        whiteblock:function(){
            var that=this;
            for(var i=0;i<that.H;i++){
                for(var k=0;k<that.C;k++){
                      if(that.Arrlist [i][k].style.backgroundColor =="white") {
                        console.log(that.Arrlist [i][k]);
                        that.Arrlist [i][k].onclick=function(){
                         this.style.backgroundColor ="red";
                         that.isbegin =false;
                          game.aid.src="mp3/mm.mp3";
                          game.aid.play();
                        }
                    }

                }
            }
        } ,

9. 当最后一行有黑块落下时，游戏结束，出现警告提示音乐。??

        lastblack:function(){
            for(var i=0;i<this.Arrlist.length;i++){
                if(this.Arrlist[4][i].style.backgroundColor =="black")
                {
                    game.isbegin =false;
                    this.Arrlist[3][i].style.backgroundColor="red";
               }
            }
        },

尊重劳动成果！！！????