console
var stage, arm;
function init() {
stage = new createjs.Stage("canvas");
target = stage.addChild(new createjs.Bitmap("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1783746658,4238382039&fm=26&gp=0.jpg"));
target.x = 50;
target.y = 180;
target.regX = target.getBounds().width / 5
target.regY = target.getBounds().height / 5
arm = stage.addChild(new createjs.Bitmap("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1783746658,4238382039&fm=26&gp=0.jpg"));
arm.x = 500;
arm.y = 180;
arm.regX = arm.getBounds().width / 5
arm.regY = arm.getBounds().height / 5
createjs.Ticker.on("tick", tick);
}
function tick(event) {
target.x += 1;
console.log(CollisionTest(target,arm))
stage.update(event);
}
function CollisionTest(ele1, ele2) {
var w1 = ele1.getBounds().width
var h1 = ele1.getBounds().height
var w2 = ele2.getBounds().width
var h2 = ele2.getBounds().height
var x1 = ele1.x - w1 / 2;
var x2 = ele1.x + w1 / 2;
var y1 = ele1.y - h1 / 2;
var y2 = ele1.y + h1 / 2;
var x3 = ele2.x - w2 / 2;
var x4 = ele2.x + w2 / 2;
var y3 = ele2.y - h2 / 2;
var y4 = ele2.y + h1 / 2;
var collX, collY
console.log('x1:', x1, 'x2:', x2, 'x3:', x3, 'x4:', x4)
if ((x3 > x1 && x3 < x2) || (x4 > x1 && x4 < x2)) {
collX = true;
} else {
collX = false;
}
if ((y3 > y1 && y3 < y2) || (y4 > y1 && y4 < y2)) {
collY = true;
} else {
collY = false;
}
return collX && collY
}
init()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="//cdn.bootcss.com/EaselJS/0.8.0/easeljs.min.js" charset="utf-8"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>