Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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).</p> <p>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.</p> <p>Each direction will have a slightly different check.</p> <p><strong>UP</strong></p> <p>When attempting to move up all you have to do is check that the moving box's new top bound is <em>greater than</em> 0. <em>You can use <code>jQuery('#k').position().top</code> to determine the movable box's top bound.</em></p> <p><strong>Down</strong></p> <p>When attempting to move down all you have to do is check that the moving box's new bottom bound is <em>less than</em> the containing box's height. <em>You can use <code>jQuery('#k').position().top+jQuery('#k').height()</code> to determine the movable box's bottom bound. And <code>jQuery('#bob').height()</code> to determine the containing box's height.</em></p> <p><strong>Left</strong></p> <p>When attempting to move left all you have to do is check that the moving box's new left bound is <em>greater than</em> 0. <em>You can use <code>jQuery('#k').position().left</code> to determine the movable box's left bound.</em></p> <p><strong>Right</strong></p> <p>When attempting to move right all you have to do is check that the moving box's new right bound is <em>less than</em> the containing box's width. <em>You can use <code>jQuery('#k').position().left+jQuery('#k').width()</code> to determine the movable box's right bound. And <code>jQuery('#bob').width()</code> to determine the containing box's width.</em></p> <hr> <p><strong>Additional notes</strong></p> <ol> <li>You should probably make #bob <code>position:relative</code>. 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).</li> <li>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.</li> </ol> <hr> <p><strong>Background Information - HTML/jQuery Positioning</strong></p> <p>A diagram to help illustrate HTML/jQuery positioning: <a href="https://docs.google.com/drawings/d/121mfxpapfmcRD2UV7qoMY5RdoH-4womiheqDHtQ_YWY/edit" rel="nofollow">https://docs.google.com/drawings/d/121mfxpapfmcRD2UV7qoMY5RdoH-4womiheqDHtQ_YWY/edit</a></p> <p>Each element's coordinate originates from its top left corner.</p> <p>In HTML/jQuery the position of an absolutely positioned element is relative to its parent's origin <em>(overlooking position inheritance for simplicity sake at the moment)</em>. 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.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow would you detect a collision in this 2d game below, using javascript and jQuery?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMatt Rohland
    1. USMatt Rohland
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow would you detect a collision in this 2d game below, using javascript and jQuery?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks as well Matt, your methods seem to work. If possible, can you please explain to me how your method works. For example i don't understand why you need to check if the up bound is greater than 0. And where did you even get the 0 from?
      singulars
      1. PO
      1. This table or related slice is empty.
    2. COIs it possible for me to change the parent origin of a div element, cos i want to make a maze for the box by joining various div elements but if you have that whole parent hierarchy thing, it would get too complicated. Or would i then have to use something like canvas, to prevent that??
      singulars
      1. PO
      1. This table or related slice is empty.
    3. COIt sounds like you may be looking to do something a bit more complicated than just keeping a box contained within another box. At a high level what you're looking to do is insure that a variety of divs within a containing div never share the same space. If the only div that moves is your "player" you can run some logic checks similar to those described above (except now you want to prevent overlap rather than insure it). While none of this requires canvas, the more complicated the maze the more likely it is that you'll want to consider canvas or another medium to address performance issues.
      singulars
      1. PO
      1. USMatt Rohland
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload