Need help for some javascript/html5 collision

[JavascriptNoob]

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

[ragnarok]

I'm afraid that's a little sparse on information. What do you want to archieve? Grab a sprite with the mouse and throw it at another sprite?

 

If you already have a Programm, perhaps post it on jsfiddle http://jsfiddle.net/ so we can see what you want to archieve.

[d13]

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

[JavascriptNoob]

Hello agian! i have uploaded the code to Jsfiddle  http://jsfiddle.net/CoffeC0der/pAD8d/ ,,, what i want i simple too make the item solid so the mySprite/player can't get throw it.

[ragnarok]

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;    }}