使用createjs制作小游戏

简介

createjs包含四个独立的模块：easeljs是最主要的部分，大部分都使用这个库来实现，其他三个是辅助的。Tweenjs是实现动画效果的库，preloadjs是做预加载的，soundjs是处理音频的，我这次做的游戏只有一个背景音乐，所以没有用上。下次可以试试。

模块分解

这次的小游戏有三页，根据其他教程，我用了三个js分别实现，然后在index页面实现三个页面的跳转，由于createjs没有专门场景切换的功能，我只能使用remove的方式来移除上一个页面，不知道是我没发现还是真没有。下面分别介绍三个页面

场景一

场景一比较简单是一个引导页，我做了一些简单的动画，然后就是一个按钮进入第二页，即正式页面，下面主要介绍一下封装，代码如下：

(function(){
  function screen1(){
    this.Container_constructor();
    this.timer = null;
    this.flag = 0;
    this.setup();
  }

  var p = createjs.extend(screen1, createjs.Container);

  p.setup = function(){
    var bg = new createjs.Bitmap(queue.getResult('bg1'));
    
    this.addChild(bg);

    createjs.Tween.get(light1, {loop: -1}).to({alpha: 0}, 200);
  };

  window.screen1 = createjs.promote(screen1, "Container");
}());

这里最createjs的一种封装方法，可以直接使用new screen1来调用了，里面涉及三个方面

var bg = new createjs.Bitmap(queue.getResult('bg1'));

这句是创建一个图片，其中queue.getResult(‘bg1’)是来自preloadjs的，可以用图片的具体地址代替

this.addChild(bg);

是将刚才的图片添加到舞台

createjs.Tween.get(light1, {loop: -1}).to({alpha: 0}, 200);

是使用Tweenjs来实现动画，这里的light1是自行创建的对象，loop属性是循环，to里面的alpha是将对象的alpha属性设为0，200是持续时间。

可以使用Tweenjs实现复杂的动画效果

场景二

场景二是主要页面，包含一个左右移动的爪子，点击按钮，爪子会下探，之后变成抓去一个礼盒，最后页面切换到第三页，主要代码如下

(function(window){
  function screen2(index){
    this.Container_constructor();
    this.ct;
    this.box = queue.getResult('box');
    this.stick = new createjs.Bitmap(queue.getResult('img01'));
    this.claw  = new createjs.Bitmap(queue.getResult('img02'));
    this.setup();
  }

  var p = createjs.extend(screen2, createjs.Container);

  p.setup = function(){
    var bgLeft = new createjs.Bitmap(queue.getResult('bg2'));
    bgLeft.sourceRect = new createjs.Rectangle(0, 0, 375, 1206);
    var bgRight = new createjs.Bitmap(queue.getResult('bg2'));
    bgRight.sourceRect = new createjs.Rectangle(375, 0, 375, 1206);
    
    btn.on("click", this.clawClick, this, true);
    this.addChild(bg);

    this.ct = createjs.Tween.get(theClaw, {loop: -1, bounce: true}).to({x:592}, 2000);
  };

  p.clawClick = function(){
    if (!this.ct.paused) {
      this.ct.paused = true;
    }
    createjs.Tween.get(this.claw)
      .to({y: 680}, 1000)
      .wait(500)
      .call(function(){
        this.image = box;
      })
      .to({y: 300}, 1000)
      .wait(1000)
      .call(function(){
        next2();
      });
  }

  window.screen2 = createjs.promote(screen2, "Container");
}(window));

这里使用了Bitmap的sourceRect功能用来做一个开门的动画，使用Tweenjs实现了爪子下拉然后抓取的效果

场景三

场景三只是简单的将微信图像和昵称放在图上，然后生成一张图片供用户保存

(function(window){
  function screen3(nickname){
    this.Container_constructor();
    this.nickname = nickname;
    this.setup();
  }

  var p = createjs.extend(screen3, createjs.Container);

  p.setup = function(){
    var bg = new createjs.Bitmap(queue.getResult('res'));
    
    this.addChild(bg);
    setTimeout(savePic, 1000);
  };

  window.screen3 = createjs.promote(screen3, "Container");
}(window));

调度

var canvas = document.getElementById("myCanvas");
canvas.style.position = "absolute";
var w = document.body.offsetWidth;
var h = document.body.offsetHeight;
var scale = w / canvas.width;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
canvas.style.left = 0;
canvas.style.top = 0;

var stage, s1, s2, nickname, bgm, musicRotation;
var music = document.getElementById('bgm');

stage = new createjs.Stage(canvas);
createjs.Touch.enable(stage);

var loading = new createjs.Bitmap('./images/loading.jpg');
var text = new createjs.Text("加载中 0%", "50px Arial", "#fff");
text.x = 255;
text.y = 590;
stage.addChild(loading);
stage.addChild(text);
stage.update();

var boxIndex = Math.ceil(Math.random() * 5);
var resIndex = Math.ceil(Math.random() * 30);

var queue = new createjs.LoadQueue(true, '', true);
queue.on("complete", handleComplete, this);
queue.on("fileprogress", handleProgress, this);
queue.loadManifest([
  {id: 'bg1', src: './images/bg1.jpg'},
  {id: 'bg2', src: './images/bg2.jpg'},
]);

function handleComplete(){
  stage.removeChild(loading);
  stage.removeChild(text);
  init();
}

function handleProgress(){
  text.text = '加载中 ' + Math.round(queue.progress * 100) + '%';
  stage.update();
}

function init(){
  s1 = new screen1();
  s1.on('click', next);
  stage.addChild(s1);

  bgm = new createjs.Bitmap(queue.getResult('music'));
  bgm.x = 695;
  bgm.y = 135;
  bgm.regX = 30;
  bgm.regY = 30;
  stage.addChild(bgm);
  bgm.on('click', toggleMusic);

  musicRotation = createjs.Tween.get(bgm, {loop: -1}).to({rotation: 360}, 1500);

  startGame();
}
function next(){
  createjs.Tween.get(s1).to({alpha: 0}, 1000).call(function(){
    s1.parent.removeChild(s1);
    s2 = new screen2(4);
    stage.addChild(s2);
    stage.setChildIndex(bgm, 1);
  })
}
function next2(){
  s2.removeChildAt(3, 4, 5, 6, 7);
  createjs.Tween.get(s2.getChildAt(1)).to({skewY: 90}, 1000);
  createjs.Tween.get(s2.getChildAt(2)).to({skewY: -90}, 1000).call(function(){
    s2.parent.removeChild(s2);
    s3 = new screen3(nickname);
    stage.addChild(s3);
  });
}
function savePic(){
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  document.body.appendChild(image);
  canvas.style.display = 'none';
}
function toggleMusic(){
  if (musicRotation.paused) {
    music.play();
    musicRotation.paused = false;
  }else{
    music.pause();
    musicRotation.paused = true;
  }
}
function startGame(){
  createjs.Ticker.addEventListener('tick', function(){
    stage.update();
  });
}

详情见https://github.com/mxm145/wawa