easyljs检测冲突两个矩形

Question

即时消息试图检测与用easyljs创建的两个形状的碰撞：但每次-在日志控制台中都为假！ 有人可以描述为什么吗？ 以及检测碰撞侧（左|右|上|下）的最佳方法是什么。

 <!DOCTYPE html> <html> <head> <title>EaselJS collision detection test</title> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script type="text/javascript"> var stage; var moveheld = 0; var KEYCODE_LEFT = 37, KEYCODE_RIGHT = 39, KEYCODE_UP = 38, KEYCODE_DOWN = 40; var turnright, turnleft, turnup, turndown; turnright = turnleft = turndown = turnup = false; function init() { stage = new createjs.Stage(document.getElementById("testCanvas")); var gran = new createjs.Graphics().beginFill("#000").drawRect(40, 384, 12, 12); var grant = new createjs.Shape(gran); var graphics = new createjs.Graphics().beginFill("#cce").drawRect(48, 384, 12, 12); var shape = new createjs.Shape(graphics); stage.addChild(shape); stage.addChild(grant); createjs.Ticker.timingMode = createjs.Ticker.setFPS(10); createjs.Ticker.addEventListener("tick", stage); createjs.Ticker.addEventListener("tick", tick); moveheld = 0; this.document.onkeydown = keyPressed; function tick(event) { console.log(collis()); shape.setBounds(48, 384, 12, 12); grant.setBounds(grant.x, grant.y, 32, 32); if (moveheld <= 0) {} else { moveheld--; if (turndown == true) { grant.y += 3; } else if (turnup == true) { grant.y -= 3; } else if (turnleft == true) { grant.x -= 3, 5; } else if (turnright == true) { grant.x += 3, 5; } }; timer = createjs.Ticker.getTicks(); stage.update(); } stage.update(); function makerunright() { moveheld = 4; if (moveheld >= 0) { turnright = true; turndown = turnleft = turnup = false; } } function makerunleft() { moveheld = 4; if (moveheld >= 0) { turnleft = true; turndown = turnup = turnright = false; } } function makerunup() { moveheld = 4; if (moveheld >= 0) { turnup = true; turndown = turnleft = turnright = false; } } function makerundown() { turndown = true; turnup = turnleft = turnright = false; moveheld = 4; if (moveheld >= 0) {} } function keyPressed(event) { switch (event.keyCode) { case KEYCODE_RIGHT: if (moveheld <= 0) { makerunright(); } break; case KEYCODE_LEFT: if (moveheld <= 0) { makerunleft(); } break; case KEYCODE_UP: if (moveheld <= 0) { makerunup(); } break; case KEYCODE_DOWN: if (moveheld <= 0) { makerundown(); } break; } } function collis() { if (grant.getBounds.x < shape.getBounds.x + shape.getBounds.width && grant.getBounds.x + grant.getBounds.width > shape.getBounds.x && grant.getBounds.y < shape.getBounds.y + shape.getBounds.height && grant.getBounds.height + grant.getBounds.y > shape.getBounds.y) { return true; } else { return false; } } } </script> </head> <body onload="init();"> <canvas id="testCanvas" width="960" height="408"></canvas> </body> </html>

Answer 1

默认情况下，图形没有边界，因为它们确实非常昂贵且计算复杂。 如果在制作Shape时知道边界，则可以自行设置它们，否则，它将返回null。

还要注意，要获取DisplayObject的边界，您必须调用getBounds 方法，而不是属性。 为了进行碰撞比较，我建议一次查找每个对象的边界，然后在if语句中比较它们的值。

例如：

// Draw the shape
var gran = new createjs.Graphics().beginFill("#000").drawRect(40, 384, 12, 12);
var grant = new createjs.Shape(gran);

// Set some bounds based on what you know
// This gets more difficult as your contents get more complex.
grant.setBounds(40, 384, 12, 12);

// Store bounds (faster than looking it up each time)
var b1 = grant.getBounds();
var b2 = shape.getBounds();

// Check Collision (code not tested, just ported from your example)
if (b1.x < b2.x + b2.width &&
          b1.x + b1.width > b2.x &&
          b1.y < b2.y + b2.height &&
          b1.height + b1.y > b2.y) {
    return true;
} else {
    return false;
}

我还建议将矩形图形的位置设置为0,0，然后设置形状的x和y ，而不是平移drawRect坐标（除非您有充分的理由这样做）。 这种方式使用元素更容易。

var gran = new createjs.Graphics().beginFill("#000").drawRect(0, 0, 12, 12);
var grant = new createjs.Shape(gran).set({x:40, y:384});

这显然会影响setBounds调用。

grant.setBounds(0, 0, 12, 12);

希望这可以帮助！

easyljs检测冲突两个矩形

问题描述

1 个解决方案

解决方案1
1 2016-01-02 03:19:15

easyljs检测冲突两个矩形

问题描述

1 个解决方案

解决方案1 1 2016-01-02 03:19:15

解决方案1
1 2016-01-02 03:19:15