Jump to content

Need help for some javascript/html5 collision


JavascriptNoob
 Share

Recommended Posts

Hello World! I'm new here so if i do something wrong please tell me.

 

 

I followed a tutorial on the internet about collision  detection and got it to work, my problem is that i have some code for the detction part but i do know how to make it solid so the player object can't get throw it

 

 

the code i have right know:

function collision(a,     {        if (a.x < b.x + b.width &&        a.x + a.width > b.x &&        a.y < b.y + b.height &&        a.y + a.height > b.y) return true;    }

hope you guys can help me out here, thanks :)

Link to comment
Share on other sites

Something like this `blockRectangle` function might help.

It will work if your sprites have x, y, width and height properties.

blockRectangle(sprite1, sprite2, false);function blockRectangle(r1, r2, bounce){  //Set bounce to a default value of false if it's not specified  if(typeof bounce === "undefined")  {    bounce = false;  }    //A variable to tell us which side the   //collision is occurring on  var collisionSide = "";    //Calculate the distance vector  r1.halfWidth = r1.width / 2;  r1.halfHeight = r1.height / 2;  r2.halfWidth = r2.width / 2;  r2.halfHeight = r2.height / 2;  r1.centerX = r1.x + r1.halfWidth;  r1.centerY = r1.y + r1.halfHeight;  r2.centerX = r2.x + r2.halfWidth;  r2.centerY = r2.y + r2.halfHeight;  var vx = r1.centerX - r2.centerX;  var vy = r1.centerY - r2.centerY;    //Figure out the combined half-widths and half-heights  var combinedHalfWidths = r1.halfWidth + r2.halfWidth;  var combinedHalfHeights = r1.halfHeight + r2.halfHeight;      //Check whether vx is less than the combined half widths   if(Math.abs(vx) < combinedHalfWidths)   {    //A collision might be occurring.     //Check whether vy is less than the combined half heights     if(Math.abs(vy) < combinedHalfHeights)    {      //A collision has occurred!      //Find out the size of the overlap on both the X and Y axes      var overlapX = combinedHalfWidths - Math.abs(vx);      var overlapY = combinedHalfHeights - Math.abs(vy);              //The collision has occurred on the axis with the      //*smallest* amount of overlap. Which axis is it?              if(overlapX >= overlapY)      {        //The collision is happening on the X axis         //But on which side? vy can tell us        if(vy > 0)        {          collisionSide = "top";          //Move the rectangle out of the collision          r1.y = r1.y + overlapY;        }        else         {          collisionSide = "bottom";          //Move the rectangle out of the collision          r1.y = r1.y - overlapY;        }        //Bounce        if(bounce)        {          r1.vy *= -1;        }      }       else       {        //The collision is happening on the Y axis         //But on which side? vx can tell us        if(vx > 0)        {          collisionSide = "left";          //Move the rectangle out of the collision          r1.x = r1.x + overlapX;        }        else         {          collisionSide = "right";          //Move the rectangle out of the collision          r1.x = r1.x - overlapX;        }        //Bounce        if(bounce)        {          r1.vx *= -1;        }      }     }    else     {      //No collision      collisionSide = "none";    }  }   else   {    //No collision    collisionSide = "none";  }  return collisionSide;}

I made some small changes, but this code is adaped from this book: 

http://www.amazon.com/Foundation-Game-Design-HTML5-JavaScript/dp/1430247169

Link to comment
Share on other sites

You could simply undo the movement that would have caused the collision:

function update(mod){	if (37 in keysDown) { mySprite.x -= mySprite.speed * mod; }	if (38 in keysDown) { mySprite.y -= mySprite.speed * mod; }	if (39 in keysDown) { mySprite.x += mySprite.speed * mod; }	if (40 in keysDown) { mySprite.y += mySprite.speed * mod; }        if(collision(mySprite,item)){        mySprite.color = "green";        //undo movement:    	if (37 in keysDown) { mySprite.x += mySprite.speed * mod; }    	if (38 in keysDown) { mySprite.y += mySprite.speed * mod; }	if (39 in keysDown) { mySprite.x -= mySprite.speed * mod; }	if (40 in keysDown) { mySprite.y -= mySprite.speed * mod; }            }else{        mySprite.color = "red";    }}

Or you could make something like a pre-colision-detection if that's to "dirty".

function preCollision(a, b, dir)    {        if (a.x + dir.x < b.x + b.width &&        a.x +dir.x+ a.width > b.x &&        a.y +dir.y< b.y + b.height &&        a.y +dir.y+ a.height > b.y) return true;    }function update(mod){    var dir={x:0,y:0}; //direction	if (37 in keysDown) { dir.x = -mySprite.speed * mod; }	if (38 in keysDown) { dir.y = -mySprite.speed * mod; }	if (39 in keysDown) { dir.x = mySprite.speed * mod; }	if (40 in keysDown) { dir.y = mySprite.speed * mod; }        if(preCollision(mySprite,item,dir)){        mySprite.color = "green";  	    }else{        mySprite.color = "red";        mySprite.x+=dir.x;        mySprite.y+=dir.y;    }}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...