Question

我试图检测与使用easeljs创建的两个形状的碰撞：但每次 - 在日志控制台中变得虚假！有人可以形容为什么？什么是检测碰撞一侧的最佳方法（左|右|顶部|底部）谢谢。

＆＃13;

<!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>

＆＃13;

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);

希望这有帮助！

easeljs检测碰撞两个矩形

1 个答案: