Home/ Questions/Q 8898321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:35:02+00:00

I made a simple game which allows you to move a purple box by

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    1. You should probably make #bob 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).
    2. The reason there is extra logic on “down” and “right” is that position in the DOM is determined based on the top left corner. To compensate for this we must add in the height or width of the object respectively.

    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.

    • 0