Help debugging collision detection in a shooter game

I am working on a little game and I am having a hard time with collision detection.

The entire code is here :http://codepen.io/willydev/pen/EgwYRZ

I am trying to check wether the shot and the ennemy are in the same square (Aa or Ab,etc.). The idea is that every time either the shot or the ennemy is moving its position is logged inside the grid object. Then the detectP1 checks whether they are in same square. The problem is I am under the impression that their are two versions of the grid objects, because when I use console.log in both this.move function the shotconstruct returns a version where it is logged, and the same thing goes for the ennemyconstruct. They never are in the grid object at the same time.

Do you guys know how to debug this?

 

Is there a legitimate reason for the grid, like you're going to have walls aligned to it or something?

Not sure why you're not just using normal bounding-box behaviors... if they were A and B...

	(A.bottom > B.top) &&
	(A.top < B.bottom) &&
	(A.right > B.left) &&
	(A.left < B.right)

Code (markup):

No need to get more complex than that until you get down to the mask or shape check as the next step. Masking is often the easiest and fastest code-wise for the "are they really touching" though tricky to set up in the first place in JS since "Herpaderp too stoopid fur typecasting"...

I mean, unless there's a REALLY good reason for that grid, lose the grid as part of the check.

 

Your link doesn't work anymore. Did you get to fix it yet ?