H5实现俄罗斯方块（二）

对应的js

1.封装操作dom的js：

(function (document) {
    //游戏的实例
    var gameInst;
   
   /**封装一个返回原型的DOM对象 */
   function DomObject(dom){
     this.dom=dom;
   }

   /**返回真正的dom元素 */
   DomObject.prototype.get=function () {
       return this.dom;
   };

   /**分装事件的注册 */
   DomObject.prototype.on=function (eventName,eventHandler) {
       this.get().addEventListener(eventName,eventHandler);
   };

  
   /**分装操作CSS样式的方法 */
   DomObject.prototype.css=function (stylekey,styleValue){
       this.get().style[stylekey]=styleValue;
   };

 /**能够操作以上对象的作法的方法 */
   function $(selector,context) {
       return  new DomObject((context||document).querySelector(selector));
   };

/**启动游戏的方法 */
function  startGame() {
    //注册一个时间  OK时 启动游戏
        ResourceManager.onResourceLoaded = function () {
      // new Board();   调用游戏的计时方法
    gameInst = new Tetris();
      gameInst.startGame();
    };
    ResourceManager.init();
}

  /**初始化的一个方法 */
   function  _init() {
       $('#btn-start').on('click',function (ev) {
           $('.start-container').css('display','none');
             $('.game-container').css('display', 'block');
             /**调用游戏启动的方法 */
             startGame();
       });

       $('#btn-setting').on('click', function(ev){
            // alert('You clicked the setting button.');
            $('.modal-dialog').css('display','block');
        
        });

     $('#btn-dialog-close').on('click',function () {
           $('.modal-dialog').css('display','none');
               gameInst && gameInst.resume();
     });

     $('#ck-sound').on('click',function () {
         var enable=$('#ck-sound').get().checked;
         window.TetrisConfig.config.enableSound=enable;
     });

     $('#btn-game-setting').on('click',function () {
            $('.modal-dialog').css('display','block');
            gameInst.pause();
     });
     //暂停和继续
  $('#btn-game-pause').on('click', function (evt) {
      var el = evt.target;
      if (el.innerText === '暂停') {
        el.innerText = '继续';
        gameInst.pause();
      } else {
        el.innerText = '暂停';
        gameInst.resume();
      }
    });
   }
   /**监听事件的方法 */
   document.addEventListener('DOMContentLoaded',function (ev) {
      _init(); 
   });
   
})(document);

 全局的配置：

(function (window) {
  window.TetrisConfig = {
    rows: 20,
    cols: 13,
    speed: 1000,
    constSpeed:1000,
    intervalId: 0,
    config:{
      
    }
  };
})(window);

 绘制方块的js：

(function (window) {
  'use strict';
  function Block(blockType) {
    this.blockType = blockType;
    this.size = 30;
    this.originalSize = 32;
    this.sprite = window.ResourceManager.getResource('blocks');
  }

  Block.prototype = {
    constructor: Block,
    draw: function (context, x, y,blockType,size) {
      size=size || this.size;
      context.drawImage(this.sprite, ((blockType || this.blockType) -1) * this.originalSize, 0, this.originalSize, this.originalSize, x * size, y * size, size, size);
    }
  };

  window.Block = Block;

})(window);

 放置游戏主元素的面板：

/**放置游戏主元素的面板 */
(function (window) {
  'use strict';

function  Board(gameInst) {
    //传递游戏的实例
    this.gameInst=gameInst;
    this.blockSize=30;
    this.rows=TetrisConfig.rows;
    this.cols=TetrisConfig.cols;
    /**拿到Canvas对象 */
     this.canvas = new Canvas('c_game_main', this.cols * this.blockSize, this.rows * this.blockSize);
    this.context=this.canvas.context;
    /**生成画布二维数组的数据 */
    this.boardList=[];

    //绘制方块的属性
      this.shape = new window.Shape();
    

    this._init();

    //验证是否成功
    var b = ResourceManager.getResource('blocks');
    console.log(b);
}

/**操作_init方法 */
Board.prototype={
   constructor:Board,
   _init:function(){
          this._buildGridData();
          this._initGrid();

         //初始化的时候绘制方块
      this.shape.draw(this.context);
      var self=this;
      setTimeout(function(){
        //调用构建下一步方块的方法
            self._buildNextShape();
      });
   },



//构建下一步方块的方法
 _buildNextShape: function () {
      this.nextShape = new window.Shape();
  this.nextShape.setPosition(this.gameInst.nextshape.cols, this.gameInst.nextshape.rows);
    //找到面板
  this.gameInst.nextshape.render(this.nextShape);
    },
 

   /**_init中的两个方法*/
  _buildGridData(){
      var i,j;
      for(i=0;i<this.rows;i++){
          this.boardList[i]=[];
          for(j=0;j<this.cols;j++){
              this.boardList[i][j]=0;
          }
      }
    //  console.log(this.boardList);
  },    
  /**绘制表格数据  */
  _initGrid(){
   /**设置画笔 */
      var i;
   this.context.strokeStyle='green';
   this.context.linewidth=0.5;

   //绘制线条的 笔迹
   for(i=0;i<this.rows;i++){
       /**找到起始点 ()*/
       this.context.moveTo(0,i*this.blockSize);
       this.context.lineTo(this.canvas.width,i*this.blockSize);
   }

   for(i=0;i<=this.cols;i++){
       this.context.moveTo(i*this.blockSize,0);
       this.context.lineTo(i*this.blockSize,this.canvas.height);
   }
    //绘制 线条
    this.context.stroke(); 
    
    //把数据进行缓存
    this.gridImageData=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);
  },
  tick:function(){
      //跳动一次加一个数
      if(this.validMove(0,1)){
            this.shape.y+=1;
      }else{
          //不能向下移动添加
          this.addShapeToBoardList();
          //游戏 
          if(this.gameInst._state==='over'){
              this.gameInst.endGame();
              return;
          }
          
          //执行清理方法
          this.clearFullRows();
         this.shape=this.nextShape;
         this.shape.setPosition(this.cols,this.rows,true);
         this._buildNextShape();
          //添加后重新实例化
         // this.shape=new window.Shape();
      }
   
     //画布刷新一次
     this.refresh();
     //画出方块
     this.shape.draw(this.context);

  },
  refresh:function(){
      this.canvas.clear();
      //把图像数据推送到Canvas中
      this.context.putImageData(this.gridImageData,0,0);
      //绘制方块
      this.drawBlocks();
  },

   //边际的检查算法
  validMove:function(moveX,moveY){
     //下一步的位置
     var  nextX=this.shape.x+moveX;
     var nextY=this.shape.y+moveY;

     //循环检查有没有越界  （越界的算法）
     for(var y=0;y<this.shape.layout.length;y++){
         for(var x=0;x<this.shape.layout[y].length;x++){
             //判断有没有方块
            if(this.shape.layout[y][x]){
               if (typeof this.boardList[nextY + y] === 'undefined'  //找不到行
              || typeof this.boardList[nextY + y][nextX + x] === 'undefined'    //找不到列
              ||this.boardList[nextY+y][nextX+x]    //当前位置已有方块
              ||nextX+x<0    //超出左边界
              ||nextX+x>=this.cols  //超出右边界
              ||nextY+y>=this.rows    //超出上边界
              ){
                return false;
              }
             
            }
         }
     }
    return true;
  },
    //添加堆积容器
  addShapeToBoardList:function(){
for(var y=0;y<this.shape.layout.length;y++){
         for(var x=0;x<this.shape.layout[y].length;x++){
         if(this.shape.layout[y][x]){
             var boardX=this.shape.x+x;
             var boardY=this.shape.y+y;
             if(this.boardList[boardY][boardX]){
                 //说明已经有了  状态的变化
                 this.gameInst._state='over';
                 return;
             }else{
                 //没有碰上默认等于1  让他显示出来
                 this.boardList[boardY][boardX]=this.shape.blockType;

             }
         }
         }
      }
  },
  //绘制方块
  drawBlocks:function(){
      for(var y=0;y<this.rows;y++){
          for(var x=0;x<this.cols;x++){
              if(this.boardList[y][x]){
                  this.shape.block.draw(this.context,x,y,this.boardList[y][x]);  
              }
          }
      }
  },

   //创建空行
   createEmptyRow(){
       var emptyArr=[];
       for(var i=0;i<this.cols;i++){
           emptyArr.push(0);
       }
       return emptyArr;
   },


  //消除行的方法
  clearFullRows:function(){
      var self=this;
      var  lines=0;
      //重下往上判断
  for(var y=this.rows-1;y>=0;y--){
      //全部填充
      var filled=this.boardList[y].filter(function(item){return item>0;}).length===this.cols;
      //做移除操作
      if(filled&&y){
          this.boardList.splice(y,1);
          //追加一行  用创建的新行进行填充
          this.boardList.unshift(this.createEmptyRow());
          lines++;
          y++;
      }
  }
   //计算出得分
   var score=lines*100*lines;  //清楚的行数  *  单行得分  *　　倍数
   //调用得分的方法
  var totalScore= this.gameInst.score.addScore(score); 
  //最高分
    this.gameInst.highscore.checkScore(totalScore);
  //当前的级别
  var currentLevel= this.gameInst.level.checkLevel(totalScore);
    if(currentLevel){
        //升级算法速度的变化
        window.TetrisConfig.speed= Math.floor(window.TetrisConfig.constSpeed *(1-(currentLevel-1) /10  ));
        //提示用户   1.暂停游戏
        this.gameInst.pause();
        setTimeout(function() {
            window.alert('恭喜您升级了！');
            self.gameInst.resume();
        });

    }


  }
};
  window.Board = Board;

})(window);

 绘制面板：

/**
 * @param  canvasId Canvas元素的ID 属性
 * @param  width  Canvas宽度
 * @param  height Canvas高度
 */

(function (window){
    'user strict';
    
  function Canvas(canvasId, width, height) {
    this.canvasId = canvasId;
      this.el = document.getElementById(canvasId);
    if(!this.el) {
       throw new Error ('Must provider a right canvas id.');
    }
    /**获取Canvas的上下文 */
    this.context=this.el.getContext('2d');
    this.width=width||window.innerWidth;
    this.height=height||window.innerHeight;
    this._init();
}

/**操作原型 */
Canvas.prototype={
    constructor:Canvas,
    _init :function(){
        /**style 中的宽高  赋值给参数中的值 */
      this.el.width=this.width;
      this.el.height=this.height;
    },

    clear:function(fromX,fromY,toX,toY){
        fromX=fromX||0;
        fromY=fromY||0;
        toX=toX||this.width;
        toY=toY||this.height;
     this.context.clearRect(fromX,fromY,toX,toY)
    },
    //绘制文本
     drawText: function (text, x, y) {
      //清理画布
     this.clear(0, 0);
      //设置画笔
      this.context.font = '25px Arial';
      this.context.fillStyle = 'purple';
      this.context.textAlign = 'center';
      this.context.fillText(text, x === undefined ? (this.width / 2) : x, y === undefined ? 45 : y);
    }
};

 window.Canvas=Canvas; 

})(window);