CreateJS中2个移动对象之间的命中检测

Question

我们正在使用 createJS，现在我正在努力进行命中测试。

我收到此错误：

"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 位置，但一个是玩家控制的角色，另一个对象具有随机 x 值。

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

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;

希望有帮助！

Answer 2

问题来了：

function doCollisionChecking() {

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

}

将来通过函数传递参数而不是依赖全局对象可能会对您有所帮助。它们通过严格跟踪对数据的修改来帮助您。使用全局变量，任何东西都可以从任何地方修改 coins，如果您有 50 多个不同的函数编辑该变量，您将无法分辨它是什么函数。