H5实现俄罗斯方块（三）

最高分的面板：

(function (window) {
  'use strict';
  function HighScore() {
    this.canvas = new Canvas('highscore', 100, 70);
    this.highScore = 0;

    this._init();
  }

  HighScore.prototype = {
    constructor: HighScore,
    _init: function () {
      //获取当前最高分
      this.highScore = this._getScore();
      this._render();
    },
    _render: function () {
      this.canvas.drawText(this.highScore);
    },
    _getScore: function () {
      return window.localStorage.getItem('high-score') || 0;
    },
    //存取值
    _setScore: function (value) {
      window.localStorage.setItem('high-score', value);
    },
    //检查的饭
    checkScore: function (score) {
      if (score > this.highScore) {
        //覆盖
        this.highScore = score;
        this._setScore(score);
        this._render();
      }
    }

  };

  window.HighScore = HighScore;
})(window);

键盘操作的事件：

(function (window){
    'use strict';
   var keys = {
    38: 'top',
    39: 'right',
    40: 'down',
    37: 'left'
  }; 

   function  keyboard(){
     this.boad;
   }

keyboard.prototype={
   constructor:keyboard,
   init:function (board) {
     var self=this;

     //注册事件   keydown  可以连续按
       self.board = board;
      document.addEventListener('keydown', function (evt) {
        self.processKeyDown(evt);
      });
   },

   processKeyDown:function (evt) {
     //做相应事件的拦截
     if(this.board.gameInst._state!=='playing'){
       return;
     }
    if (keys[evt.keyCode]) {
       this.press(keys[evt.keyCode]);
    }
   },

 press: function (key) {
   /**  console.log(key);*/
     //写一个标志性的变量
     var refresh=false;

      switch (key) {
        case 'top':
        //方块的反转
        this.board.shape.rotate();
        if(this.board.validMove(0,0)){
          refresh=true;
        }
          break;
        case 'right':
       if (this.board.validMove(1, 0)) {
            this.board.shape.x += 1;
            refresh=true;
          }
          break;
        case 'down':
          if (this.board.validMove(0, 1)) {
            this.board.shape.y += 1;
            refresh=true;
          }
          break;
        case 'left':
          if (this.board.validMove(-1, 0)) {
            this.board.shape.x -= 1;
            refresh=true;
          }
          break;
        }
        if(refresh){
          this.board.refresh();
          //重新绘制
            this.board.shape.draw(this.board.context);
         if (key === 'down') {
          var self = this;
          window.clearInterval(window.TetrisConfig.intervalId);
          window.TetrisConfig.intervalId = window.setInterval(function () {
            self.board.tick();
          }, TetrisConfig.speed);
          }
        }
      }

};
   window.keyboard=keyboard;
})(window);

等级的js：

(function (window) {
  'use strict';
  //自调用的函数
   var levelArr=(function(){
     var  arr=[0];
     //分数级别的计算  默认是个等级
     for(var i=0;i<10;i++){
       arr.push(Math.pow(2,i)*100);
     }
     return  arr;
   })();

   //得分的面板
  function Level() {
    this.canvas = new Canvas('level', 100, 70);
     //得分
   this.level = 1;

    this._init();
  }

 Level.prototype = {
    constructor: Level,
    _init: function () {
      this._render();
    },
     //绘制得分
    _render: function () {
      this.canvas.drawText('Level'+this.level);
    },
    //检查界别的方法
    checkLevel:function(score){
       if(score>=levelArr[this.level]){
         this.level++;
         this._render();
         //返回标示变量
         return this.level;
       }
       return 0;
    }
     //分数的变化
    /*** addScore:function(value){
       this.score+=value;
       //渲染
     this._render();
     }*/
   };

   window.Level=Level;
})(window);

下一方块的js：

(function (window) {
  'use strict';
   //得分的面板
  function NextShape() {
    this.canvas = new Canvas('nextshape', 100, 70);
    this._init();
  }

 NextShape.prototype = {
    constructor: NextShape,
    _init: function () {
      this.rows=4;
      this.cols=6;

    },
    //进行渲染
    render:function(shape){
     this.canvas.clear();
     //size加了参数
        shape.draw(this.canvas.context,16);
}
   };

   window.NextShape=NextShape;
})(window);