Databases
StackOverflow2013
Postsdbo
POhtml5 canvas object collisions and physics
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml5 canvas object collisions and physics
    primarykey
    data
    text
    <p>I'm working on a simple html5 platformer, building of a previous game but having trouble with collisions and physics. below is a sample of code regarding the floor and how it handles collisions. the full code is here. <a href="http://www.ambitiongames.co.uk/dev/game.php" rel="nofollow">http://www.ambitiongames.co.uk/dev/game.php</a> with the game being here <a href="http://www.ambitiongames.co.uk/dev/" rel="nofollow">http://www.ambitiongames.co.uk/dev/</a> </p> <p>the problem I'm having is the collisions are based on events grabbing which sometimes leaves the player in the floor not on it. </p> <p>also, due to the way jumping and falling work there's no gravity, meaning a player can simply jump on a higher ledge and then walk off into the air. </p> <p>whats the a good way to set up a permanent state of gravity ? </p> <p>whats a good way to interact / collide with the floor or other objects ? </p> <pre><code> that.draw = function(){ try { ctx.drawImage(that.image, that.x, that.y, that.width, that.height); } catch (e) { } } return that; }; var nrOffloors = 40, floors = [], floorWidth = 20, floorHeight = 40; var generatefloor = function(){ for (var i = 0; i &lt; 10; i++) { floors[i] = new Floor(i * 20,280); } for (var i = 10; i &lt; 12; i++) { floors[i] = new Floor(i * 20,260); } }(); var checkCollisionfloor = function(){ floors.forEach(function(e, ind){ if ( (player.X &lt; e.x + floorWidth) &amp;&amp; (player.X + player.width &gt; e.x) &amp;&amp; (player.Y + player.height &gt; e.y) &amp;&amp; (player.Y + player.height &lt; e.y + floorHeight) ) { e.onCollide(); } }); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USRudiger Kidd
    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. This table or related slice is empty.
    1. COI can't load the game, and this is a pretty broad question, but you'll benefit extraordinarily from utilizing a traditional object-oriented approach when designing games like this. This way each object (player and/or anything else) can keep track of their own velocity and acceleration and the calculations for gravity should be pretty trivial. You essentially are just adding the constant negative acceleration due to gravity to the objects existing acceleration, and you can keep track of the player's `Y` position to ensure they don't fall below 0 (the ground)
      singulars
      1. POhtml5 canvas object collisions and physics
      1. USCecchi
    2. CO... To simulate hitting the ground you can invert their velocity, which will cause the player to bounce a bit, with gravity eventually holding them down.
      singulars
      1. POhtml5 canvas object collisions and physics
      1. USCecchi
    3. COi see what your saying so instead of var `Floor = function(x, y){ insert stuff here` it should be `var StartButton = new Object();` and add variables accordingly ?
      singulars
      1. POhtml5 canvas object collisions and physics
      1. USRudiger Kidd
 

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