steel15.com/index/main.js

(function(global) {
	
  var canvasId = 'canvas-game';
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext('2d');
  var imgMethod = new ImgMethod();
  var imgObject = {};
  var width = document.body.clientWidth;
  var height = document.body.clientHeight;

  var coverScreenTimer = null;
  var coverInterval = 5;    // 定时器间隔
  var coverColor = '#ddd';  // 覆盖层背景色
  var fontSize = 40;        // 字体大小

  canvas.width = width;
  canvas.height = height;

  function ImgMethod() {
    var _this = this;
    var imageNum = 0;
    var readyImageNum = 0;

    this.isAllImageReady = false;
    this.checkTimer = null;
    this.getImage = getImage;
    this.checkImageIsAllReady = checkImageIsAllReady;
    this.imgObj = {
      // 'background': 'assets/background.jpg',
      // 'background2': 'assets/background2.jpg'
    }

    function getImage() {
      for (var imgName in _this.imgObj) {
        imageNum ++;
      }

      for (var imgName in _this.imgObj) {
        var img = new Image();
        img.src = _this.imgObj[imgName];
        img.onload = function () {
          imgObject[imgName] = img;
          readyImageNum ++;
        }
      }
    }

    function checkImageIsAllReady(callback) {
      clearInterval(_this.checkTimer);
      _this.checkTimer = setInterval(function () {
        if (readyImageNum >= imageNum) {
          clearInterval(_this.checkTimer);
          _this.isAllImageReady = true;
          callback && callback();
        }
      }, 10)
    }
  }

  function Score() {
    var _this = this;
    this.score = 0;
    this.textColor = '#000';

    this.computeScore = computeScore;
    this.resetScore = resetScore;
    this.draw = draw;

    function computeScore(number) {
      if (number) {
        _this.score = _this.score + number;
      }
      return _this.score;
    }

    function resetScore(number) {
      _this.score = number || 0;
    }

    function draw() {
      var textWidth = ctx.measureText('当前得分:' + _this.score).width + 5;
      ctx.beginPath();
      ctx.fillStyle = _this.textColor;
      ctx.font = fontSize + 'px Arial';
      ctx.fillText('当前得分:' + _this.score, canvas.width - textWidth, 5);
    }


  }

  function coverFullScreen(isCover, callback) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var coverBlockNum = 15;
    var stepHeight = canvasHeight / coverBlockNum;
    var currentCover = 0;
    var coverTotalTime = 300;          //单位ms
    var perCoverHeight = stepHeight * coverInterval / coverTotalTime;
    var coverStartPointArr = [];
    for (var i = 0; i < coverBlockNum; i ++) {
      coverStartPointArr.push(stepHeight * i);
    }
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.beginPath();

    isCover ? coverAll() : cancelCoverAll();

    function coverAll() {
      coverScreenTimer = setInterval(function () {
        ctx.fillStyle = coverColor;
        if (currentCover >= stepHeight) {
          clearInterval(coverScreenTimer);
          coverScreenTimer = null;
        }
        coverStartPointArr.forEach(function (positionY) {
          ctx.fillRect(0, positionY, canvasWidth, currentCover);
        });
        currentCover += perCoverHeight;
        currentCover = currentCover > stepHeight ? stepHeight : currentCover;
        if (currentCover >= stepHeight) {
          callback && callback();
        }
      }, coverInterval);
    }

    function cancelCoverAll() {
      ctx.fillStyle = coverColor;
      currentCover = stepHeight;

      coverScreenTimer = setInterval(function() {
        ctx.beginPath();
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.fillStyle = coverColor;
        if (currentCover <= 0) {
          clearInterval(coverScreenTimer);
          coverScreenTimer = null;

        }
        coverStartPointArr.forEach(function (positionY) {
          ctx.fillRect(0, positionY, canvasWidth, currentCover);
        });
        currentCover -= perCoverHeight;
        currentCover = currentCover < 0 ? 0 : currentCover;
        if (currentCover <= 0) {
          callback && callback();
        }
      }, coverInterval);
    }
  }

  function Help () {
    _this = this;
    this.showState = false;
    this.element = document.getElementById('help');

    this.changeHelpShowState = changeHelpShowState;
    this.changeHelpContent = changeHelpContent;

    function changeHelpShowState(state) {
      _this.showState = state;
      _this.element.style.display = state === true ? 'block' : 'none';
    }

    function changeHelpContent(content) {
      _this.element.innerHTML = content;
    }
  }
  
  global.score = new Score();
  global.canvas = canvas;
  global.ctx = ctx;
  global.game = {
    'controller': {
      'coverFullScreen': coverFullScreen,
    },
    'help': new Help()
  };

  global.img = {
    'imgMethod': imgMethod,
    'imgObject': imgObject
  };
})(window);