I made a simple game which allows you to move a purple box by pressing the arrow keys. The purple box is inside a blue perimeter. I want to be able to prevent the purple box from being able to breach the blue perimeter and stay inside, which i know involves collisions, however I don't seem to understand how that can be done. Here is the code I have written so far:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:pink;
}
#bob
{
width:400px;
height:500px;
padding:10px;
border:5px solid blue;
margin:0px;
}
</style>
</head>
<body>
<div id="bob">
<div id="k" style="background- color:purple;width:40px;height:40px;position:absolute" onkeydown="keydownControl(this)"/>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script>
$('html').keyup(function(e){
if(e.which==37)
{
$("#k").animate({left:"-=10px"},1);
}
if(e.which==39)
{
$("#k").animate({left:"+=10px"},1);
}
if(e.which==40)
{
$("#k").animate({top:"+=10px"},1);
}
if(e.which==38)
{
$("#k").animate({top:"-=10px"},1);
}
});
</script>
</body>
</html>
So lets say I am moving the purple box and it happens to touch the blue square. If that happens if has to stop moving in that direction, until it is no longer in contact with the blue square, thus preventing it from escaping the blue square. How would I do this, using JS and jQuery?
Hit detection is fairly straight forward, when working with boxes. It sounds like what you're attempting to do is contain 1 movable box (#k) within a static containing box (#bob).
The basic concept is to add some simple logic checks to each of your key up events that check if the position you're thinking of moving to is going to exit the bounds. If the check determines that the new position will exit the bounds, it doesn't bother animating.
Each direction will have a slightly different check.
UP
When attempting to move up all you have to do is check that the moving box's new top bound is greater than 0. You can use jQuery('#k').position().top to determine the movable box's top bound.
Down
When attempting to move down all you have to do is check that the moving box's new bottom bound is less than the containing box's height. You can use jQuery('#k').position().top+jQuery('#k').height() to determine the movable box's bottom bound. And jQuery('#bob').height() to determine the containing box's height.
Left
When attempting to move left all you have to do is check that the moving box's new left bound is greater than 0. You can use jQuery('#k').position().left to determine the movable box's left bound.
Right
When attempting to move right all you have to do is check that the moving box's new right bound is less than the containing box's width. You can use jQuery('#k').position().left+jQuery('#k').width() to determine the movable box's right bound. And jQuery('#bob').width() to determine the containing box's width.
Additional notes
position:relative. At the moment position will be calculated relative to the body tag's position not #bob's (they just happen to share the same coordinates right now).Background Information - HTML/jQuery Positioning
A diagram to help illustrate HTML/jQuery positioning: https://docs.google.com/drawings/d/121mfxpapfmcRD2UV7qoMY5RdoH-4womiheqDHtQ_YWY/edit
Each element's coordinate originates from its top left corner.
In HTML/jQuery the position of an absolutely positioned element is relative to its parent's origin (overlooking position inheritance for simplicity sake at the moment). If its top left corner is the same as its parent's top left corner its position will be (0,0). As it moves away from it's parent's top left corner it's coordinates become the horizontal (x) and vertical (y) gap between the 2 coordinates.