圆线碰撞

by Tim Wu

HTML

<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
<link rel="stylesheet" href="https://wuzhiwei.net/libs/bootstrap/css/bootstrap.min.css">
<script src="https://wuzhiwei.net/libs/gsap/TweenMax.min.js"></script>
<script src="https://wuzhiwei.net/libs/ds/cl.js"></script>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">DEMO</div>
    <div class="panel-body">
      <canvas id="stage" class="center-block" width="400" height="220" style="border:1px black solid "></canvas>
    </div>
    <div class="panel-footer">
      <div id="author">Author: <a href="http://wuzhiwei.net/about/" target="_blank">Tim Wu</a>

      </div>
    </div>
  </div>
</div>

CSS

.panel {
  min-width: 450px;
}

.panel-heading {
  text-align: center;
}

#author {
  text-align: right;
}

.center-block {
  text-align: center;
}

#stage {
  margin-bottom: 12px;
}

#start {
  margin-left: 30px;
  margin-right: 30px;
}

JavaScript

var stage = new createjs.Stage('stage');
TweenLite.ticker.addEventListener("tick", stage.update, stage);

var circle = new createjs.Shape();
circle.graphics.beginFill("#FF0000").drawCircle(0, 0, 20);
circle.x = 200;
circle.y = 100;
stage.addChild(circle);

var walls = [{
  p0: {
    x: 0,
    y: 0
  },
  p1: {
    x: 400,
    y: 0
  },
  bf: 1,
  wf: 1
}, {
  p0: {
    x: 400,
    y: 0
  },
  p1: {
    x: 400,
    y: 220
  },
  bf: 1,
  wf: 1
}, {
  p0: {
    x: 400,
    y: 220
  },
  p1: {
    x: 0,
    y: 220
  },
  bf: 1,
  wf: 1
}, {
  p0: {
    x: 0,
    y: 220
  },
  p1: {
    x: 0,
    y: 0
  },
  bf: 1,
  wf: 1
}];

for (var i = 0; i < walls.length; ++i) {
  updateVector(walls[i], true);
}

var lastTime = 0;
var start = false;
var vx, vy;
var cv = {
  r: 20,
  p0: {
    x: 200,
    y: 100
  },
  vx: 100,
  vy: 100
};

circle.on("pressmove", function(evt) {
  start = false;
  vx = evt.stageX - evt.target.x;
  vy = evt.stageY - evt.target.y;
  evt.target.x = evt.stageX;
  evt.target.y = evt.stageY;
  cv.p0.x = evt.stageX;
  cv.p0.y = evt.stageY;
  cv.vx = vx * 10;
  cv.vy = vy * 10;
});

circle.on("pressup", function(evt) {
  console.log("pressup.");
  lastTime = new Date().getTime();
  start = true;
});

TweenLite.ticker.addEventListener("tick", function() {
  if (!start) return;
  var nowTime = new Date().getTime();
  var delta = (nowTime - lastTime) / 1000;
  lastTime = nowTime;
  updateObjPosByTime(cv, delta);
  checkWalls(cv, walls);
  circle.x = cv.p1.x;
  circle.y = cv.p1.y;
  cv.p0 = cv.p1;
  cv.vx /= cv.delta;
  cv.vy /= cv.delta;
});