使用 Flash CC 在 HTML5 Canvas 游戏中的 HitTest答案

【问题标题】：HitTest in HTML5 Canvas game using Flash CC使用 Flash CC 在 HTML5 Canvas 游戏中的 HitTest
【发布时间】：2014-11-27 04:47:29
【问题描述】：

我正在使用 Flash CC 制作 HTML5 Canvas 游戏。但是，我似乎无法弄清楚如何在两个movieClips 之间创建一个hitTest。我在 EaselJS web 上找到了一些代码，但它不起作用，或者我不明白它是如何工作的。

这是我在操作面板中的代码：

this.addEventListener("tick",move.bind(this));
function move(){
  if (collision(this.bird, this.bar)){
    this.bird.play(5);
  }
}
function collision(a,b) {
  var locA  = a.globalToLocal(100,0);
  if (b.hitTest(locA.x, locA.y)) { 
    return true; 
  }
}

【问题讨论】：

对实际对象尝试 HitTest，而不仅仅是坐标if ( shapeA hitTest(shapeB) ) { trace"There Was A Hit..!!"; }
Shucks 刚刚意识到这是针对 HTML5 的。我不知道它是否可能，所以我出去了。但是，如果 HTML5 转换中缺少某些 Flash 功能，请不要感到惊讶...
我认为这是游戏开发的一个通用功能，应该有一种简单的方法。

标签： javascript html flash canvas easeljs

【解决方案1】：

好的，所以我猜在 Flash 或 EaselJS 中还没有内置功能，所以我想出了这个，它工作正常。但它只检查 hitBox、矩形 MovieClip 边界，而不是形状中实际可见的像素。令人沮丧的是，在 HTML5 画布的 Flash 中，甚至宽度和高度都不是支持的动画剪辑实例的属性，因此您只需在属性面板中查找这些属性。无论如何，这就是我想出的：

var objA = this.bullet ; // The selected MovieClip
var objA_width = 20; // enter selected Movieclip's width (you can't find out with script, duh!)
var objA_height = 10; // enter selected Movieclip's height

var objB = this.target; // The MovieClip to test collision with
var objB_width = 100; // enter it's width
var objB_height = 100; // ...and it's height


this.addEventListener("tick",hitTest.bind(this));

function hitTest(){
    if (collision(objA, objB, objA_width,objA_height,objB_width,objB_height)){
    //  code to run on collision;
    }
}

var mca = new Object();
var mcb = new Object();

function collision(a,b,aWidth,aHeight,bWidth,bHeight) {
    mca.xr = a.x + (aWidth/2); //the right edge of movieclip A
    mca.xl = a.x - (aWidth/2); //the left edge of movieclip A
    mca.yt = a.y - (aHeight/2); //the top edge of movieclip A
    mca.yb = a.y + (aHeight/2); //the bottom edge of movieclip A

    mcb.xr = b.x + (bWidth/2);
    mcb.xl = b.x - (bWidth/2);
    mcb.yt = b.y - (bHeight/2);
    mcb.yb = b.y + (bHeight/2);

    xHit = mca.xr > mcb.xl && mca.xl < mcb.xr; // returns true if the is any horisontal  overlappnig
    yHit = mca.yt < mcb.yb && mca.yb > mcb.yt; // returns true if the is any vertical overlapping

    if (xHit && yHit){return true;}
}

【讨论】：