createjs simple hitTest

by Yanan Tian

HTML

<canvas width="400" height="300" id="mineCanvas"></canvas>
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

JavaScript

var stage = new createjs.Stage("mineCanvas"),
    canvas = stage.canvas,
    CW = canvas.width,
    CH = canvas.height;
  var circle, r = 50;
  var g_delta = 0;

  stage.addChild((circle = new createjs.Shape())).set({x: 2 * r, y: 2 * r}).graphics.f("red").dc(0, 0, r);
  circle.alpha = .1;

  createjs.Ticker.setFPS(60);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

  createjs.Ticker.on('tick', function (evt) {
    g_delta = evt.delta / 1000;
    stage.update(evt);
  });

  circle.on('tick', function () {
    this.x += CW * g_delta; //速度：每秒 CW 像素
    if (this.x - r >= CW) {
      this.x = -r;
    }

    //global to local
    var localPos = this.globalToLocal(stage.mouseX, stage.mouseY);
    //hit test
    this.alpha = this.hitTest(localPos.x, localPos.y) ? .5 : .1;
  });