Hit detection between 2 moving objects in CreateJS

Question

We are using createJS and right now I am struggling with a hit test.

I get this error:

"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)"

I think the problem has to the with the 2 objects x position, but one is a player controlled character and the other object have random x value.

All the hit test example i found always consist of a static object and a moving, but this time they are both moving and i have no idea what to do.

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

Here's the problem:

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

}

It might help you in the future to pass arguments through the function instead of relying on global objects. They help you by keeping modifications to your data on tight track. With global variables, anything can modify coins from anywhere and you won't be able to tell what function it is if you have 50+ different functions editing that variable.

Answer 2

Clearly one of your elements is undefined (either circle or coins[k]). I would start with figuring out which one.

1. Open your debugger.
2. Turn on "Pause on Exceptions" and re-run your code. When the error happens, your debugger will pause and you can inspect your code
3. Determine what is undefined. This should shed some light on what is causing the error

One important thing I noticed is that you are looking for rect.width when collision checking. EaselJS elements don't have a width property, so you should instead use getBounds(), which will work with Bitmaps once they are loaded.

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

Hope that helps!