俄罗斯方块的生成方块

这次的特效大赛选择了做一个相对简单点的俄罗斯方块，
这个游戏最重要的就是生成不同的四个组成方块和落地 , 浏览过好几种大佬们的写法
最后整合下写出了如下方法，比较好理解点，也挺简洁的。

生成下落方块的方法
有四个参数，css样式，x,y为出现方块的对应坐标，shape哪种组成形式

    //全局变量 生成下落方块的7种形式     （用split方法分割成一个集合）
      var shapes =("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
    //游戏容器的行与列
      var row = 18;
      var col = 10;
      var size = 20;
      //这里就不全列出来了

//生成方法
function Tetris(css, x, y, shape) {   
           
    //判断是否传来的css类样式，没有的话就用默认的（因为方块落好的跟正在下落的颜色会不同）
    var myCss = css ? css : "c";                     

    // 这个是下落方块    里边创建四个div（小方块），并加上之前决定好的css类样式
    this.divs = [  createElm("div", myCss),  
                    createElm("div", myCss),
                    createElm("div", myCss), 
                    createElm("div", myCss) ];  
                         
    // 如果shape有传参，优先使用参数的，如果有预告，优先使用预告，都没有就自己生成 
 
    if(!shape) {            
    
        //这个是下次生成方块的预告栏
          this.divs2 = [
                createElm("div", myCss), 
                createElm("div", myCss), 
                createElm("div", myCss), 
                createElm("div", myCss)
          ];

          this.score = createElm("div", "g");
          this.score.style.top = 10 * size + "px";
          this.score.style.left = (col - -1) * size + "px";      
          this.score.innerHTML = "score:0";
     }
     this.container = null;
     this.refresh = function() {
     this.x = (typeof(x) != 'undefined') ? x : 3;
     this.y = (typeof(y) != 'undefined') ? y : 0;
     
     if(shape)             { this.shape = shape; }
     else if(this.shape2)  { this.shape = this.shape2; }
     else                  { this.shape = shape ? shape : shapes[Math.floor((Math.random() * shapes.length - 0.000000001))].split(",");
                            this.shape2 = shapes[Math.floor((Math.random() * shapes.length - 0.000000001))].split(",");
                           
     }

总结得不好，有的地方也不太清晰，还请见谅。
这次就先分享到这里，下次会把方块的下落和旋转分享一下。

俄罗斯方块的生成方块

猜你喜欢