使用Flash CC的HTML5 Canvas游戏中的HitTest

HitTest in HTML5 Canvas game using Flash CC

本文关键字：游戏 HitTest Canvas HTML5 Flash CC 使用      更新时间：2023-09-26

我正在Flash CC中制作HTML5 Canvas游戏。然而，我似乎不知道如何在两部电影之间创建一个hitTest。我在EaselJS网站上找到了一些代码，但它不起作用，或者我不明白它是如何工作的。

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

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

好的，所以我想Flash或EaselJS中还没有内置的功能，所以我想出了这个，它工作正常。但它只检查hitBox，矩形MovieClip边界，而不是形状中实际可见的像素。令人沮丧的是，在Flash for HTML5画布中，甚至连宽度和高度都不支持movieclip实例的属性，所以你只需要在属性面板中查找这些属性。不管怎样，以下是我的想法：

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;}
}
相关文章：