easeljs检测碰撞两个矩形

即时通讯尝试检测与easeljs创建的两个形状的碰撞：但每次 - 在日志控制台中获取false！有人可以描述为什么？感谢碰撞的一方（左上方）的最佳方法是什么？easeljs检测碰撞两个矩形

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

来源

2015-12-31 user4023517

显卡在默认情况下没有界限，因为他们是真正昂贵和复杂的计算。如果您在制作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);

希望这有助于！

来源

2016-01-02 03:19:15 Lanny

easeljs检测碰撞两个矩形

回答

相关问题