Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

Demo: http://jordikroon.nl/test.html

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(); 
        }
share|improve this question
    
I believe the problem is at if(enemyX[i] > canvas.height). Try replacing it with if(enemyY[i] > canvas.height). –  Asakeron Dec 12 '12 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. –  Byte56 Dec 12 '12 at 15:44

2 Answers 2

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.

share|improve this answer
1  
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. –  jordi12100 Dec 12 '12 at 15:31
1  
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. –  Byte56 Dec 12 '12 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. –  Aufziehvogel Dec 12 '12 at 21:01
1  
@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. –  Byte56 Dec 12 '12 at 21:04
1  
It's polite to explain down votes. –  Byte56 Dec 14 '12 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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.