Databases
StackOverflow2013
Postsdbo
POjQuery Collision
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Collision
    primarykey
    data
    text
    <p>I have this game I'm writing with the jQuery Collision, and it uses keyboard keys to move a div, when a div touches another div, it should prevent overlapping.</p> <p>How on earth do I do that?</p> <p>HTML ----</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="style.css" rel="stylesheet" /&gt; &lt;script src="jquery.min.js" rel="javascript"&gt;&lt;/script&gt; &lt;script src="game.js" rel="javascript"&gt;&lt;/script&gt; &lt;script src="jquery-collision-1.0.1.js" rel="javascript"&gt;&lt;/script&gt; &lt;script src="jquery-ui-draggable-collision-1.0.1.js" rel="javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="office"&gt; &lt;div class="popup"&gt; &lt;p&gt;hello desk&lt;/p&gt; &lt;a class="close"&gt;X&lt;/a&gt; &lt;/div&gt; &lt;div class="chris"&gt;&lt;/div&gt; &lt;!--Rian, Peter, Chris, Christopher ---------------- DESK --&gt; &lt;div class="desk-full" style="position: absolute; right: 50px; top: 50px;"&gt; &lt;div class="christopher-stuff"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!--Adrian, Tatam, Ellize ---------------- DESK --&gt; &lt;div class="desk-full" style="position: absolute; right: 50px; top: 300px;"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>JAVASCRIPT----</p> <pre><code>$(document).ready(function(){ $(".chris").click(function(){ var KEY = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 } // a global object to store all global variable used for the game var office = { } // an array to remember which key is pressed and which is not. office.pressedKeys = []; $(function(){ // set interval to call gameloop every 30 milliseconds office.timer = setInterval(gameloop,30); // mark down what key is down and up into an array called "pressedKeys" $(document).keydown(function(e){ office.pressedKeys[e.keyCode] = true; }); $(document).keyup(function(e){ office.pressedKeys[e.keyCode] = false; }); }); // this function is called every 30 milliseconds function gameloop() { moveMe(); collideDetection(); } function moveMe() { if (office.pressedKeys[KEY.UP]) // arrow up { var direction = parseInt($(".chris").css("top")); $(".chris").css({ top: direction-5, background: "url(chris-top.gif) no-repeat !important", width: "43px", height: "44px" }); } if (office.pressedKeys[KEY.DOWN]) // arrow down { var direction = parseInt($(".chris").css("top")); $(".chris").css({ top: direction+5, background: "url(chris-down.png) no-repeat !important", width: "48px", height: "25px" }); } if (office.pressedKeys[KEY.LEFT]) // left { var direction = parseInt($(".chris").css("left")); $(".chris").css({ left: direction-5, background: "url(chris-left.gif) no-repeat !important", width: "43px", height: "44px" }); } if (office.pressedKeys[KEY.RIGHT]) // right { var direction = parseInt($(".chris").css("left")); $(".chris").css({ left: direction+5, background: "url(chris-right.gif) no-repeat !important", width: "43px", height: "44px" }); } if (office.pressedKeys[KEY.UP] &amp; office.pressedKeys[KEY.RIGHT]) // arrow up { $(".chris").css({ background: "url(chris-top-right.png) no-repeat left top !important", width: "43px", height: "44px" }); } if (office.pressedKeys[KEY.UP] &amp; office.pressedKeys[KEY.LEFT]) // arrow up { $(".chris").css({ background: "url(chris-top-left.png) no-repeat !important", width: "43px", height: "44px" }); } if (office.pressedKeys[KEY.DOWN] &amp; office.pressedKeys[KEY.RIGHT]) // arrow down { $(".chris").css({ background: "url(chris-down-right.png) no-repeat !important", width: "43px", height: "44px" }); } if (office.pressedKeys[KEY.DOWN] &amp; office.pressedKeys[KEY.LEFT]) // arrow down { $(".chris").css({ background: "url(chris-down-left.png) no-repeat !important", width: "43px", height: "44px" }); } } function collideDetection(){ var chrisY = parseInt($(".chris").css("top")); var chrisX = parseInt($(".chris").css("left")); var chrisY = chrisY + 50; var chrisX = chrisX + 50; // -------------------- jQuery Collision Dtection and Prevention of Overlapping --------------------- var hit_list = $(".chris").collision( { obstacle: ".desk-full", preventCollision: true } ); var officeHeight = parseInt($("#office").height()); var officeWidth = parseInt($("#office").width()); if(shipX &lt;= 0) { $(".chris").css({ left: "0", background: "url(chris-right.png) no-repeat !important", width: "25px", height: "48px" }); } if(chrisX &gt; officeWidth) { $(".chris").css({ left: "0px", background: "url(chris-left.png) no-repeat !important", width: "25px", height: "48px" }); } if(chrisX &lt;= 0) { $(".chris").css({ top: "0", background: "url(chris-down.png) no-repeat !important", width: "48px", height: "25px" }); } if(chrisY &gt; officeHeight) { $(".chris").css({ top: "0px", background: "url(chris-up.png) no-repeat !important", width: "48px", height: "25px" }); } } }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChristopher
    1. USChristopher
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Collision
      1. This table or related slice is empty.
      1. VTModeratorReview
    2. VO
      singulars
      1. POjQuery Collision
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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