Remove enemy when bullet hits enemy

For my education I have to make a basic game in HTML5 canvas. The game is a shooter game. When you can move left -> right and space is shoot. When I shoot the bullets will move up. The enemy moves down. When the bullet hits the enemy the enemy has to dissapear and it will gain +1 score. But the enemy will dissapear after it comes up the screen.

space = shoot + enemy shows up

This is my code:

            for (i=0;i<enemyX.length;i++) {

if(enemyX[i] > canvas.height) {

enemyY.splice(i,1);
enemyX.splice(i,1);
} else {

enemyY[i] += 5;
moveEnemy(enemyX[i],enemyY[i]);

}
}

for (i=0;i<bulletX.length;i++) {

if(bulletY[i] < 0) {
bulletY.splice(i,1);
bulletX.splice(i,1);
} else {

bulletY[i] -= 5;
moveBullet(bulletX[i],bulletY[i]);

for (ib=0;ib<enemyX.length;ib++) {

if(bulletX[i] + 50 < enemyX[ib] ||
enemyX[ib] + 50 < bulletX[i] ||
bulletY[i] + 50 < enemyY[ib] ||
enemyY[ib] + 50 < bulletY[i])
{
++score;
enemyY.splice(i,1);
enemyX.splice(i,1);
}
}
}
}


Objects:

        function moveBullet(posX,posY) {
//console.log(posY);
ctx.arc(posX, (posY-150), 10, 0 , 2 * Math.PI, false);

}

function moveEnemy(posX,posY) {

ctx.rect(posX, posY, 50, 50);
ctx.fillStyle = '#ffffff';
ctx.fill();
}

• I believe the problem is at if(enemyX[i] > canvas.height). Try replacing it with if(enemyY[i] > canvas.height). Dec 12, 2012 at 15:36
• See the FAQ about what kind of questions to ask here. This one is too localized, since it's a bug in your code somewhere. Dec 12, 2012 at 15:44

You really need to learn to use a debugger. Being able to set a break point and pause execution of the code when it triggers is invaluable. You can see the state of the variables when execution is stopped, this allows you to easily spot errors like this.

As for removing the enemy when the bullet hits it, you can implement a simple collision detection and remove the enemy when the bullet is near enough to the enemy. A simple approach would be to loop over all the enemies and all the bullets, if distance between them is less than the sum of their two radii, then consider them collided and remove both.

• 0 means top of the canvas . +5 means down. The problem is in the if statement. It doesn't move up it dissapears. I know how to debug, I use firebug javascript console. Dec 12, 2012 at 15:31
• OK, 0 is at the top. Fair enough, I don't use HTML 5. You should however, still set a break point where you remove the enemy. You'd find your problem that way. You'd find out if the problem was with your collision detection or from your edge detection. Dec 12, 2012 at 15:38
• As for bullets, don’t you have to check for the full path the bullet is taking? It could be too fast, so that you will not render it (nearly) hitting the enemy, but render it long before and long after. And in between both frames it would hit the enemy, so you would have to remove him in the second frame. At least I read that in a text about raytracing. Might be too difficult for jordi now, but it’s worth hearing it. Dec 12, 2012 at 21:01
• @Aufziehvogel I wouldn't do that unless I had to. If you looked at the demo provided in the question, the bullets are not all that fast. The simple approach I describe is well suited for someone just learning and for simple games like the one being created. Dec 12, 2012 at 21:04
• It's polite to explain down votes. Dec 14, 2012 at 17:59
if(bulletX[i] + 50 < enemyX[ib] ||
enemyX[ib] + 50 < bulletX[i] ||
bulletY[i] + 50 < enemyY[ib] ||
enemyY[ib] + 50 < bulletY[i])


Should be

if(bulletX[i] + 50 < enemyX[ib] &&
enemyX[ib] + 50 < bulletX[i] &&
bulletY[i] + 50 < enemyY[ib] &&
enemyY[ib] + 50 < bulletY[i])


Otherwise they just die as soon as the appear on screen