Advertisement Jump to content
Sign in to follow this  
Georgie

2D collision not behaving in JavaScript

This topic is 1881 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello everyone,

 

I'm attempting to build some basic 2D collision detection using JavaScript and the HTML5 canvas. I'm well aware of the magnitude of full-fledged collision detection, but I'm hoping this problem isn't so significant.

 

Okay so basically I can do wall collision easily (if (x > screen.width), etc.) but I'm having a problem colliding with other objects on the stage. I can bounce a sprite back (away from the object) from both directions along the X-axis, but when it comes to adding in the Y-axis, problems start occurring such as the sprite hopping in to positions it shouldn't be in or getting "stuck" and having a fit whilst half-embedded in a box.

 

This is my collision code:

Arc.prototype.collision = function()
{
    for(var i = 0; i < game.sprites.length; i++)
    {
        if
        (
            // If the right side of the player is greater than the left side of the object.
            this.x + this.r > game.sprites[i].x &&
 
            // If the bottom of the player is greater than (meaning lower than) the top of the object.
            this.y + this.r > game.sprites[i].y &&
 
            // If the left side of the player is greater than the right side of the object.
            this.x - this.r < game.sprites[i].x + game.sprites[i].w &&
 
            // if the top of the player is greater than (meaning lower than) the bottom of the object.
            this.y - this.r < game.sprites[i].y + game.sprites[i].h
        )
        {
            // Invert speed depending on direction.
            // (Causes "sticking" of sprite on top of box).
            if(this.speed > 0)
            {
                //this.speed = -Math.abs(this.speed);
            }
            else
            {
                //this.speed = Math.abs(this.speed);
            }
 
            this.y = game.sprites[i].y - this.r;
            this.vy *= this.b;
 
            //console.log("Y:" + this.y + " R:" + this.r + " (" + parseInt(this.y + this.r) +") " + game.sprites[i].y);
        }
    }
}

In its current state the sprite can just roll right over the top of the box without being bounced back. If I alter the code to make it bounce back when it hits the box, the Y-axis collision suddenly stops working correctly. What will happen is the ball will "jump" to the top of the box before bouncing back, which produces an ugly result.

 

I've posted my project to JSFiddle for viewing if anybody could help me make it work the way it should: http://jsfiddle.net/Yzg2v/1/ (the keys are A, D and space).

 

 

Thanks.

Edited by Georgie

Share this post


Link to post
Share on other sites
Advertisement

I made a system too, some time ago. I would do it like this instead: 

  • Make a shape.xmax(), shape.xmin(), shape.ymax(), shape.ymin() functions instead of directly calculating the bounds.

This will make it easier later on to extend your collision detection to aabb collision detection. You will need aabb detection to determine which side of the boxes has been bunced on. This will in turn be needed to calculate the bouncing direction. To bounce, you multiply the movement component with -1: 

  • Bounce on left-right side: x is multiplied with -1
  • Bounce on top-bottom: y is multiploed with -1

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!