Databases
StackOverflow2013
Postsdbo
POStacking boxes on canvas html 5 have it working can't figure out minor fix with grid array and velocity
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStacking boxes on canvas html 5 have it working can't figure out minor fix with grid array and velocity
    primarykey
    data
    text
    <p>My code is below, and you can check it out here <a href="http://jsfiddle.net/ShaShads/S9Pc5/" rel="nofollow">http://jsfiddle.net/ShaShads/S9Pc5/</a></p> <pre><code>$(document).ready(function() { var canvas = $('canvas')[0]; // get the canvas element var ctx = canvas.getContext('2d'); // create the canvas context var engine = new engine(); // holds the game engine var blockActive = false; // whether a block is actively dropping function engine() { this.cellSize = 50; // the size of each side of a grid cell square this.cellX = canvas.width / this.cellSize; // the amount of columns along the x axis this.cellY = canvas.height / this.cellSize; // the amount of cells along the y axis this.totalCells = this.cellX * this.cellY; // the total amount of cells in the grid this.buildGrid = function() { // returns the grid which is dynamically built var arr = new Array(this.cellX); // array with the same length as number of cells on x axis for(var i = 0; i &lt; arr.length; ++i) { // iterate over the array arr[i] = new Array(this.cellY); // each value of array contains an array to the length of cells on y axis } return arr; }; this.grid = this.buildGrid(); // where the grid array is stored this.getGridX = function(x) { // returns the x coordinate of where an entity should be placed in the grid array return Math.ceil(x / this.cellSize); }; this.getGridY = function(y) { // returns the y coordinate of where an entity should be placed in the grid array return Math.ceil(y / this.cellSize); }; this.checkGridDown = function(x, y) { // check for collision on next block down if(y &gt;= (canvas.height - this.cellSize)) { // block has hit bottom of canvas return true; } if(this.grid[this.getGridX(x)][this.getGridY(y) + 1]) { // block has landed on top of another block return true; } return false; // no collisions found }; this.gridDraw = function() { // draws all the entities of the grid onto the canvas for(var i = 0; i &lt; this.grid.length; ++i) { // for each array in grid for(var i2 = 0; i2 &lt; this.grid[i].length; ++i2) { // for each array in array of grid if(this.grid[i][i2]) { // entity exists, paint it to the canvas ctx.fillStyle = this.grid[i][i2].color; ctx.fillRect(this.grid[i][i2].x, this.grid[i][i2].y, this.cellSize, this.cellSize); } } } }; } function block() { this.xStart = function() { // returns a random location of where a block should be inserted onto the grid var x = Math.floor(Math.random() * (engine.cellX - 1 + 1)) + 1; // generates random number between 1 and max column of grid return (x - 1) * engine.cellSize; // returns the x coordinate for the block }; this.x = this.xStart(); this.y = 0 - engine.cellSize; // the y coordinate for the block this.velocity = 10; // the speed at which the block will travel this.generateColor = function() { // returns a random color for the given block var colors = ['blue', 'red', 'green', 'black', 'orange']; // the colors a block can be return colors[Math.floor(Math.random() * colors.length)]; }; this.color = this.generateColor(); // the color of the block this.draw = function() { // draws the block onto the canvas ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, engine.cellSize, engine.cellSize); }; this.update = function() { // updates the blocks movements if(!engine.checkGridDown(this.x, this.y)) { // check for collision this.y += this.velocity; } else { // block has collided this.storeBlock(); // store the block in the allocated cell blockActive = false; // change the blockActive boolean } }; this.storeBlock = function() { // stores the block in the required cell of the grid engine.grid[engine.getGridX(this.x)][engine.getGridY(this.y)] = blockActive; }; } function clearCanvas() { ctx.fillStyle = '#eee'; ctx.fillRect(0, 0, canvas.width, canvas.height); } function gameLoop() { clearCanvas(); // clear the canvas background engine.gridDraw(); // draw all of the blocks stored in the grid if(!blockActive) { // no block is actively dropping blockActive = new block(); // create new block } else { // block is actively dropping blockActive.draw(); // draw the block blockActive.update(); // update the block } } setInterval(gameLoop, 16); // run the game }); </code></pre> <p>You will notice that I have managed to get the boxes stacking on top of each other successfully after the first box has landed and for some reason the first box is being saved in the wrong cell in the grid array. The difference in how the first box lands also depends on the velocity of which it travels.</p> <p>I have tried for 2 hours to figure it out but I cannot do it. I have only been learning this for 2 days so forgive me if it is simple!</p> <p><strong>EDIT</strong></p> <p>Changing the velocity to 20 better shows the problem.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USShaShads
    1. USShaShads
    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. 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