javascript - CreateJS 中 2 个移动物体之间的碰撞检测

Question

我们正在使用 createJS，现在我正在努力进行 HitTest 。

我收到此错误:

"ss.js:203 Uncaught TypeError: Cannot read property 'x' of undefined
at hitTest (ss.js:203)
at doCollisionChecking (ss.js:215)
at heartBeat (ss.js:238)
at Function.b._dispatchEvent (createjs-2015.11.26.min.js:12)
at Function.b.dispatchEvent (createjs-2015.11.26.min.js:12)
at Function.a._tick (createjs-2015.11.26.min.js:12)
at a._handleTimeout (createjs-2015.11.26.min.js:12)"

我认为问题出在 2 个对象的 x 位置上，但其中一个是玩家控制的 Angular 色，另一个对象具有随机的 x 值。

我发现的所有 HitTest 示例始终由一个静态对象和一个移动对象组成，但这次它们都在移动，我不知道该怎么做。

var stage, hero, queue, circle, coin;
var coins = [];
var Score, tekst1, tekst2;
var speed = 3;
var keys = {
u: false,
d: false,
l: false,
r: false
};
var settings = {
heroSpeed: 15
};

function preload() {
"use strict";
stage = new createjs.Stage("ss");
queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
queue.loadManifest([
    {
        id: 'Vacuum',
        src: "img/Vacuum.png"
    },
    {
        id: 'Dust',
        src: "img/dust.png"
    },
    {
        id: 'Pickup',
        src: "sounds/pickup.mp3"
    },
    {
        id: 'Suger',
        src: "sounds/suger.wav"
    },

  ]);
  queue.addEventListener('progress', function () {
    console.log("hi mom, preloading");
   });
   queue.addEventListener('complete', setup);
  }

 function setup() {
"use strict";

window.addEventListener('keyup', fingerUp);
window.addEventListener('keydown', fingerDown);

circle = new createjs.Bitmap("img/Vacuum.png");
circle.width = 40;
circle.height = 90;
stage.addChild(circle);
circle.y = 570;
circle.x = 460;


Score = new createjs.Text("0", "25px Impact", "white");
Score.x = 900;
Score.y = 680;
Score.textBaseline = "alphabetic";
stage.addChild(Score);

tekst1 = new createjs.Text("Score", "25px Impact", "white");
tekst1.x = 740;
tekst1.y = 680;
tekst1.textBaseline = "alphabetic";
stage.addChild(tekst1);

tekst2 = new createjs.Text("Bombs fallin", "40px Impact", "white");
tekst2.x = 10;
tekst2.y = 50;
tekst2.textBaseline = "alphabetic";
stage.addChild(tekst2);


createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', heartBeat)


}

function addCoins() {

coin = new createjs.Bitmap("img/dust.png");
coin.x = Math.random() * 900;
coin.width = 36;
coin.height = 50;
coins.push(coin);
stage.addChild(coin);

 }

function moveCoins() {
for (var i = 0; i < coins.length; i++) {
    coins[i].y += speed;
}

for (var j = 0; j < coins.length; j++) {

    if (coins[j].y > 650) {
        console.log("hejsa");
        stage.removeChild(coins[j]);
        coins.splice(j, 1);
    }
}
}

function maybeAddCoin() {

var rand = Math.random() * 500;
if (rand < 5) {
    addCoins();
}

}




 function fingerUp(e) {
"use strict";

//createjs.Sound.stop("Suger")

switch (e.keyCode) {
    case 37:
        keys.l = false;
        break;
    case 38:
        keys.u = false;
        break;
    case 39:
        keys.r = false;
        break;
    case 40:
        keys.d = false;
        break;
}
}

function fingerDown(e) {
"use strict";


switch (e.keyCode) {
    case 37:
        keys.l = true;
        break;
    case 38:
        keys.u = true;
        break;
    case 39:
        keys.r = true;
        break;
    case 40:
        keys.d = true;
        break;
 }
  }

function moveSlime() {
"use strict";

if (keys.l) {
    circle.x -= settings.heroSpeed;
    if (circle.x < 0) {
        circle.x = 0;
    }
    if (circle.currentDirection != "left") {
        circle.currentDirection = "left";

        //createjs.Sound.play("Suger");
        keys.u = false;
        keys.r = false;
        keys.d = false;

    }
 }
if (keys.r) {
    circle.x += settings.heroSpeed;

    if (circle.x > 960) {
        circle.x = 960;
    }


    if (circle.currentDirection != "right") {
        circle.currentDirection = "right";

        //createjs.Sound.play("Suger")
        keys.u = false;
        keys.l = false;
        keys.d = false;
    }
 }

 }


function hitTest(rect1, rect2) {
if (rect1.x >= rect2.x + rect2.width || rect1.x + rect1.width <= rect2.x ||
    rect1.y >= rect2.y + rect2.height || rect1.y + rect1.height <= rect2.y) 
{
    return false;
}
return true;
}



 function doCollisionChecking() {

for (var k = coins.length - 1; k >= 0; k--) {
    if (hitTest(circle, coin[k])) {
        console.log("ramt");
    }
}

}


 function scoreTimer() {

//Score.text = parseInt(Score.text + 10);

}







function heartBeat(e) {
"use strict";

doCollisionChecking()

maybeAddCoin()

//addCoins()

moveCoins()

scoreTimer()

moveSlime()

stage.update(e);




 }
 window.addEventListener('load', preload);

Answer 1

显然您的一个元素未定义(circle 或 coins[k])。我首先要弄清楚是哪一个。

1. 打开调试器。
2. 启用“异常时暂停”并重新运行您的代码。发生错误时，您的调试器将暂停，您可以检查代码
3. 确定未定义的内容。这应该可以阐明导致错误的原因

我注意到的一件重要的事情是，在碰撞检查时您正在寻找 rect.width。 EaselJS 元素 don't have a width property ，因此您应该使用 getBounds()，一旦位图加载，它将与位图一起使用。

// Example
var bounds = rect.getBounds();
var w = bounds.width, h = bounds.height;

希望有帮助!