[CreateJS] ドラッグ (2)

CreateJSを使って、ドラッグを学習するよ。 :bouzu:

ひよこちゃんをドラッグさせて移動させてみるよ。 :piyo:
点線で囲まれた位置に移動させるんだよ。 :boy:

createjs_drag2

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MouseEvent [drag] | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:600px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var piyo;
var point;
var areas;

function init() {
  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = "fixed";
  stats.domElement.style.right = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);

  canvas = document.getElementById("canvas");

  stage = new createjs.Stage(canvas);

  background();
  setup();
  initialize();

  piyo = new lib.Piyo();
  stage.addChild(piyo);
  piyo.x = canvas.width/2;
  piyo.y = 210;
  piyo.mouseChildren = false;

  piyo.addEventListener("mouseover", mouseover);
  piyo.addEventListener("mousedown", press);

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.enableMouseOver(10);
  stage.update();
}
function setup() {
  var area1 = new createjs.Shape();
  area1.graphics.setStrokeStyle(2).beginStroke("#FFFFFF");
  area1.graphics.setStrokeDash([6, 4], 0);
  area1.graphics.beginFill("rgba(51, 204, 255, 0.4)");
  area1.graphics.drawEllipse(-40, -16, 80, 32);
  stage.addChild(area1);
  area1.x = 100;
  area1.y = 210;
  var area2 = new createjs.Shape();
  area2.graphics.setStrokeStyle(2).beginStroke("#FFFFFF");
  area2.graphics.setStrokeDash([6, 4], 0);
  area2.graphics.beginFill("rgba(255, 153, 204, 0.4)");
  area2.graphics.drawEllipse(-40, -16, 80, 32);
  stage.addChild(area2);
  area2.x = 500;
  area2.y = 210;
  areas = [area1, area2];
}
function initialize() {
  createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
  piyo.update();
  stage.update();

  stats.update();
}
function mouseover(event) {
  event.target.cursor = "pointer";
}
function press(event) {
  event.target.removeEventListener("mousedown", press);
  event.target.addEventListener("pressmove", drag);
  event.target.addEventListener("pressup", release);
  point = new createjs.Point(event.localX, event.localY);
}
function drag(event) {
  event.target.x = event.stageX - point.x;
  event.target.y = event.stageY - point.y;
}
function release(event) {
  event.target.removeEventListener("pressmove", drag);
  event.target.removeEventListener("pressup", release);
  event.target.addEventListener("mousedown", press);
  drop(event.target);
}
function drop(target) {
  var fixed = false;
  for (var n = 0; n < 2; n++) {
    var area = areas[n];
    var pt = area.globalToLocal(target.x, target.y);
    if (area.hitTest(pt.x, pt.y)) {
      fix(target, area.x, area.y);
      fixed = true;
      break;
    }
  }
  if (!fixed) {
    reset(target);
  }
}
function fix(target, px, py) {
  createjs.Tween.get(target, {override: true})
    .to({x: px, y: py}, 200, createjs.Ease.quadOut);
}
function reset(target) {
  if (target.y > 180) return;
  createjs.Tween.get(target, {override: true})
    .to({x: 300, y: 210}, 400, createjs.Ease.quadOut);
}
function background() {
  var sky = new createjs.Shape();
  stage.addChild(sky);
  sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 180);
  sky.graphics.drawRect(0, 0, 600, 180);

  var ground = new createjs.Shape();
  stage.addChild(ground);
  ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 180, 0, 240);
  ground.graphics.drawRect(0, 180, 600, 60);

  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Myriad Pro", "#FFFFFF");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var title = new createjs.Text("MouseEvent", "24px Myriad Pro", "#FFFFFF");
  stage.addChild(title);
  title.textAlign = "center";
  title.textBaseline = "bottom";
  title.x = canvas.width/2;
  title.y = 65;
  title.alpha = 0.6;
  var subtitle = new createjs.Text("drag", "20px Myriad Pro", "#FFFFFF");
  stage.addChild(subtitle);
  subtitle.textAlign = "center";
  subtitle.textBaseline = "bottom";
  subtitle.x = canvas.width/2;
  subtitle.y = 110;
  subtitle.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#FFFFFF");
  stage.addChild(publish);
  publish.textAlign = "right";
  publish.textBaseline = "bottom";
  publish.x = canvas.width - 10;
  publish.y = 20;
  publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <canvas id="canvas" width="600" height="240" style="background-color:#FFFFFF"></canvas>
  <div id="footer"></div>
</body>
</html>