Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you just want your player to stop when the reach a wall, you can apply some math:</p> <p>For example: assume your player is a 10px by 10px rectangle and the right wall's X position is 200.</p> <p>The X position of the right side of the rectangle is calculated like this:</p> <pre><code>var playerRightSide = player.x + player.width; </code></pre> <p>You can test if the player has reached the wall like this:</p> <pre><code>if( playerRightSide &gt;= 200 ) </code></pre> <p>If the user tries to push their player beyond the wall, you would hold the player to the left of the wall using the players X position.</p> <pre><code>if( playerRightSide &gt;= 200 ) { player.x = 190; } </code></pre> <p>The 190 is the wall's X position (200) minus the player's width (10).</p> <p>Read further if you're interested in doing more advanced collision testing.</p> <p><strong>Many basic game collisions can be classified into 3 types:</strong></p> <ul> <li>Circle versus Circle collision</li> <li>Rectangle versus Rectangle collision</li> <li>Rectangle versus Circle collision</li> </ul> <p>Here’s an illustration of how to detect each of these common collisions.</p> <p>Assume you define a circle like this:</p> <pre><code>var circle1={ x:30, y:30, r:10 }; </code></pre> <p>Assume you define a rectangle like this:</p> <pre><code>var rect1={ x:20, y:100, w:20, h:20 }; </code></pre> <p>You can detect Circle vs Circle collisions like this...</p> <p><img src="https://i.stack.imgur.com/JwR9D.png" alt="enter image description here"></p> <p>...Using this Circle vs Circle collision-test code:</p> <pre><code> // return true if the 2 circles are colliding // c1 and c2 are circles as defined above function CirclesColliding(c1,c2){ var dx=c2.x-c1.x; var dy=c2.y-c1.y; var rSum=c1.r+c2.r; return(dx*dx+dy*dy&lt;=rSum*rSum); } </code></pre> <p>You can detect Rectangle vs Rectangle collisions like this...</p> <p><img src="https://i.stack.imgur.com/2L3cA.png" alt="enter image description here"></p> <p>...Using this Rectangle vs Rectangle collision-test code:</p> <pre><code> // return true if the 2 rectangles are colliding // r1 and r2 are rectangles as defined above function RectsColliding(r1,r2){ return !(r1.x&gt;r2.x+r2.w || r1.x+r1.w&lt;r2.x || r1.y&gt;r2.y+r2.h || r1.y+r1.h&lt;r2.y); } </code></pre> <p>You can detect Rectangle vs Circle collisions like this...</p> <p><img src="https://i.stack.imgur.com/IFxPz.png" alt="enter image description here"></p> <p>...Using this Rectangle vs Circle collision-test code:</p> <pre><code> // return true if the rectangle and circle are colliding // rect and circle are a rectangle and a circle as defined above function RectCircleColliding(rect,circle){ var dx=Math.abs(circle.x-(rect.x+rect.w/2)); var dy=Math.abs(circle.y-(rect.y+rect.y/2)); if( dx &gt; circle.r+rect.w2 ){ return(false); } if( dy &gt; circle.r+rect.h2 ){ return(false); } if( dx &lt;= rect.w ){ return(true); } if( dy &lt;= rect.h ){ return(true); } var dx=dx-rect.w; var dy=dy-rect.h return(dx*dx+dy*dy&lt;=circle.r*circle.r); } </code></pre> <p>For example, you can use these collision tests to respond to a player touching a power-up cube:</p> <pre><code> // create a circular player object // that's located at [30,30] and has a radius of 10px var player={x:30,y:30,r:10}; // create a rectangular power-up at position [200,30] var powerup={x:200, y:30, w:20, h:20}; // Let's say the user keys the player to coordinate [200,35] // (touching the power-up) player.x = 220; player.y = 35; // you can test if the circular player is touching the rectangular power-up if( RectCircleColliding(powerup,player) ) { // the player has collided with the power-up, give bonus power! player.power += 100; } </code></pre> <p>Here is code and a Fiddle: <a href="http://jsfiddle.net/m1erickson/u6t48/" rel="noreferrer">http://jsfiddle.net/m1erickson/u6t48/</a></p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /&gt; &lt;!-- reset css --&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt; body{ background-color: ivory; padding:20px; } canvas{border:1px solid red;} &lt;/style&gt; &lt;script&gt; $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); ctx.fillStyle="lightgray"; ctx.strokeStyle="skyblue"; // top collision circle vs circle var circle1={x:30,y:30,r:10}; var circle2={x:70,y:40,r:10}; var circle3={x:100,y:30,r:10}; var direction1=1; // middle collision rect vs rect var rect1={x:20,y:100,w:20,h:20}; var rect2={x:50,y:110,w:20,h:20}; var rect3={x:90,y:100,w:20,h:20}; var direction2=1; // bottom collision rect vs circle var circle4={x:30,y:200,r:10}; var rect4={x:50,y:205,w:20,h:20}; var circle5={x:100,y:200,r:10}; var direction3=1; function drawAll(){ ctx.clearRect(0,0,canvas.width,canvas.height); drawCircle(circle1); drawCircle(circle2); drawCircle(circle3); drawCircle(circle4); drawCircle(circle5); drawRect(rect1); drawRect(rect2); drawRect(rect3); drawRect(rect4); } function drawCircle(c){ ctx.beginPath(); ctx.arc(c.x,c.y,c.r,0,Math.PI*2,false); ctx.closePath(); ctx.fill(); ctx.stroke(); } function drawRect(r){ ctx.beginPath(); ctx.rect(r.x,r.y,r.w,r.h); ctx.closePath(); ctx.fill(); ctx.stroke(); } // return true if the 2 circles are colliding function CirclesColliding(c1,c2){ var dx=c2.x-c1.x; var dy=c2.y-c1.y; var rSum=c1.r+c2.r; return(dx*dx+dy*dy&lt;=rSum*rSum); } // return true if the 2 rectangles are colliding function RectsColliding(r1,r2){ return !(r1.x&gt;r2.x+r2.w || r1.x+r1.w&lt;r2.x || r1.y&gt;r2.y+r2.h || r1.y+r1.h&lt;r2.y); } // return true if the rectangle and circle are colliding function RectCircleColliding(rect,circle){ var dx=Math.abs(circle.x-(rect.x+rect.w/2)); var dy=Math.abs(circle.y-(rect.y+rect.h/2)); if( dx &gt; circle.r+rect.w/2 ){ return(false); } if( dy &gt; circle.r+rect.h/2 ){ return(false); } if( dx &lt;= rect.w ){ return(true); } if( dy &lt;= rect.h ){ return(true); } var dx=dx-rect.w; var dy=dy-rect.h return(dx*dx+dy*dy&lt;=circle.r*circle.r); } var fps = 15; function animate() { setTimeout(function() { requestAnimFrame(animate); // circle vs circle circle2.x = circle2.x+direction1; if( CirclesColliding(circle2,circle1) || CirclesColliding(circle2,circle3) ){ direction1=-direction1; } // rect vs rect rect2.x = rect2.x+direction2; if( RectsColliding(rect2,rect1) || RectsColliding(rect2,rect3) ){ direction2=-direction2; } // rect vs circle rect4.x = rect4.x+direction3; if( RectCircleColliding(rect4,circle4) || RectCircleColliding(rect4,circle5) ){ direction3=-direction3; } drawAll(); }, 1000 / fps); } animate(); }); // end $(function(){}); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. PO2d html5 canvas collision, howto
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmarkE
    1. USmarkE
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO2d html5 canvas collision, howto
      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. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHey I know this topic is old but I am having troubles again, I have collision between blocks set up where if the "player" hits the "object", the "player" stops to the Left of the "object". But I want the "player" to be able to hit the same "object" From any side (left,top,bottom,right), and stop appropriately. Any pointers for a newby? Oh i forgot to mention, thanks for your response :)
      singulars
      1. PO
      1. USuser2582299
    2. COThe collision functions I posted will handle collisions from all sides. Check out this Fiddle: http://jsfiddle.net/m1erickson/EKCRJ/
      singulars
      1. PO
      1. USmarkE
    3. COThankyou for your quick replys! I am reading over your commented link, I could be wrong but I'm not sure it's exactly what I'm trying to do. I have a question from earlier today explaining myself better if you wouldn't mind taking a look?: http://stackoverflow.com/questions/17932679/how-do-i-create-2d-object-collision-from-every-sidetop-left-bottom-right-prope
      singulars
      1. PO
      1. USuser2582299
 

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