Question

如何使用Createjs来编写HTML5游戏TweenJS和Tick动画

Answer 1

CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。

一个简单的tick动画看起来是这样的：

var stage, circle;  
   function init(){  
       stage = new createjs.Stage(document.getElementById('game'));  
       createjs.Ticker.addEventListener("tick", handleTick);  
       createjs.Ticker.setFPS(60);  
       circle = new createjs.Shape();  
       circle.graphics.f("red").dc(0,0,50);  
       circle.x = 0;  
       circle.y = 100;  
       stage.addChild(circle);  
  
       circle.addEventListener("click", function(event){  
           createjs.Ticker.setPaused(!createjs.Ticker.getPaused());  
       });  
  
   }  
  
   function handleTick(event){  
   if(!event.paused){  
       circle.x +=5;  
       if(circle.x > 1000){  
           circle.x = 0;  
       }  
   }  
       stage.update();  
   }