H5实现俄罗斯方块（四）

图片加载的js：

(function (window) {

    'use strict';
   //定义缓存的Map对象
  var cacheMap = new Map();
  //资源的总数量
  var resourceTotalCount = 1;
 //当前加载资源的数量
  var currentLoaded = 0; 

   //判断是否都是加载成功
 var isAddLoaded = function () {
    //当前的数量  +1
      currentLoaded += 1;
     //当前的数量是否等于我们的总量 判断是否为函数
   if (currentLoaded === resourceTotalCount && typeof window.ResourceManager.onResourceLoaded === 'function') {
      window.ResourceManager.onResourceLoaded();
    }
  };
   //加载资源的方法
   var init = function () {
     //定义图片的对象
   var image = new Image();
      //加载时的回调函数
   image.onload = function () {
        //把对象进行存储
     cacheMap.set('blocks', image);
      isAddLoaded();
    };
     //指定加载的路径
     image.src = 'images/blocks.png';
  };

var getResource = function (key) {
      //返回资源
    return cacheMap.get(key);
  };
 //ResourceManager  挂在到window上
   window.ResourceManager = {
    getResource: getResource,
    init: init,
    onResourceLoaded: null // 资源加载完成回调
  };
})(window);

当前得分的js：

(function (window) {
  'use strict';
   //得分的面板
  function Score() {
    this.canvas = new Canvas('score', 100, 70);
     //得分
   this.score = 0;

    this._init();
  }

 Score.prototype = {
    constructor: Score,
    _init: function () {
      this._render();
    },
     //绘制得分
    _render: function () {
      this.canvas.drawText(this.score);
    },
     //分数的变化
     addScore:function(value){
       this.score+=value;
       //渲染
     this._render();
     //返回当前的得分
     return this.score;
     }
   };

   window.Score=Score;
})(window);

方块的调整js：

(function (window) {
  'use strict';
  //布局
var shapeLayouts=[
        [[0,1,0],[1,1,1]],
        [[1,1,1,1]],
        [[1,1],[1,1]],
        [[0,1],[1,1],[1,0]],
        [[1,0],[1,1],[0,1]],
        [[1,0,1],[1,1,1]],
        [[0,1],[1,1]],
        [[1,1]],
        [[1,1],[1,0],[1,0]],
        [[1,1],[0,1],[0,1]],
];

   //生成随机数的方法(通过最小值和最大值随机生成数据)
    var random=function(minValue,maxValue){
    return  minValue+ Math.floor(Math.random()*maxValue);//产生随机数  从0到1  （包含0，不包含1）
      };
       //定义颜色总类
      var styleCount=7;

  function Shape() {
     this.x = 0;
    this.y = 0;
    //随机生成颜色
    this.blockType=random(1,styleCount);
    this.block = new Block(this.blockType);

   this.layout=shapeLayouts[random(0,shapeLayouts.length)];
  }

  Shape.prototype = {
    constructor: Shape,
    draw: function (context,size) {
      for (var i = 0; i < this.layout.length; i++) {
        for (var j = 0; j < this.layout[i].length; j++) {
          if (this.layout[i][j]) {
            this.block.draw(context, j + this.x, i + this.y,undefined,size);
          }
        }
      }
    },

    //反转算法
     rotate:function () {
       var newLayout=[];
        //交换行和列
        for (var y = 0; y < this.layout[0].length; y++) {
        newLayout[y] = [];
          for (var x = 0; x < this.layout.length; x++) {
          newLayout[y][x] = this.layout[this.layout.length - 1 - x][y];
        }
        }
        //覆盖
        this.layout=newLayout;
        //不在外部反问 旋转时超过边界的处理
       this._setLayout();
     },
  _setLayout: function () {
      if (this.x < 0) {
        this.x = 0;
      }
      if (this.y < 0) {
        this.y = 0;
      }
      if (this.x + this.layout[0].length > TetrisConfig.cols) {
        this.x = TetrisConfig.cols - this.layout[0].length;
      }
      if (this.y + this.layout.length > TetrisConfig.rows) {
        this.y = TetrisConfig.rows - this.layout.length;
      }
    },

   //算出最大的cols
   _getMaxCols:function(){
        var max=0;
        for(var y=0;y<this.layout.length;y++)
        {
          max=Math.max(max,this.layout[y].length);
        }
        return max;
   },
   _getMaxRos:function(){
     return this.layout.length;
   },
    //ignoreRows 主面板和小面板显示的效果
    setPosition:function(cols,rows,ignoreRows){
     this.x=Math.floor((cols- this._getMaxCols()) /2);
      if(!ignoreRows){
        this.y=Math.floor((rows-this._getMaxRos())/2);
      }
    }
  };

  window.Shape = Shape;
})(window);

整个文件加载js：

(function (window) {
  'use strict';

  //计时器的id
  /** var intervalId;
var speed=200;*/

function Tetris() {

    this.board = new Board(this);
    //成绩
    this.score=new Score();
    //时间
      this.timer = new Timer();
      this.level=new Level();
      //下一方块
       this.nextshape=new NextShape();
       //最高分
     this.highscore = new HighScore();

   this._sound;
   this._state='playing'; 

    //启动键盘事件
    (new keyboard()).init(this.board);
}

Tetris.prototype ={

     constructor: Tetris,
     _initAudio:function(){
     this._sound =new Howl({
         src:['audio/bg.wav'],
         loop:true,
         //音量
         volume:0.3,
       });

     this._playSound();
     },

_playSound:function(){
 if(window.TetrisConfig.config.enableSound){
 this._sound.play();
      }
},

//重复利用的方法进行封装
_startTick(){
var self=this;
      var self=this;
  window.TetrisConfig.intervalId = window.setInterval(function(){
       //每次调用他的tick
       self.board.tick();
     }, TetrisConfig.speed);
},
   //取消tick的公用方法
_stopTick:function(){
    window.clearInterval(window.TetrisConfig.intervalId);
},

   //开始
    startGame: function(){
     //初始化音频
     this._initAudio();
     //开始tick方法
     this._startTick();
   },

   //结束
   endGame:function(){
    //停止声音播放   找到声音实例  停止
    this._sound.stop();
    //停止Tick
    this._stopTick();
    //停止计时
    this.Timer.stop();

   },
   pause:function(){
     if(this._state==='over'){
       return;
     }
     //暂停播放音乐
     this._sound.pause();
     //暂停事件响应
     this._state='pause';

     //取消tick
    this._stopTick();
    //暂停计时器
    this.timer.pause();
   },
   resume:function(){
     //避免再次生效
     if(this._state==='over'){
       return;
     }
   //this._sound.play();
   this._playSound();
   this._state='playing';
   //恢复tick方法
   this._startTick();
   //重新激活
   this.timer.resume(); 

   } 

};

  window.Tetris = Tetris;

})(window);

计时器的js：

(function (window) {
  'use strict'
  function Timer() {
    this.canvas=new Canvas('timer',100,70);
    //毫秒数
    this.time=0;
    //存储时间的Inver
    this.timerId;

    this._init();
  };

 Timer.prototype = {
    constructor: Timer,
    _init: function () {
       var self=this;
       this._render();
      //时间的累加
      this.resume();
    },
    //处理time的值
    _format:function(seconds){
       //取出毫秒数  小时
      var hours=Math.floor(seconds/(3600));
      seconds=seconds-hours*3600;
      //分钟
      var minutes=Math.floor(seconds/ 60);
      seconds=seconds-minutes*60;
      if(hours<10){
        //补零
        hours='0'+hours;
      }
      if(minutes<10){
        minutes='0'+minutes;
      }
      if(seconds<10){
        seconds='0'+seconds;
      }
      return hours+':'+minutes+':'+seconds;
    },
    _render: function () {
      this.canvas.drawText(this._format(this.time));
    },
    pause:function(){
      window.clearInterval(this.timerId)
    },
    resume:function(){
       //恢复时激活
       var self=this;
       this.timerId=window.setInterval(function(){
         self.time += 1;
         self._render();
       },1000);
    },
    stop:function(){
        this.pause();
    }
  };

  window.Timer = Timer;
})(window);

开发工具vscode