title: how to create a solid object in javascript
body: <p>i am working on a simple game but i am stuck i have created 2 squares one that you can move and the other is supposed to be impassable but i cant find the code to make it a solid object. i need this as the second square will be a shelf on which the 1st square (the player) will jump on. this is just the start that i came across this problem and this game is no where near finished as i can not figure out how to do this many thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;head&gt;
      &lt;title&gt;Something fancy&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h3&gt;Arrow keys to move, and space to jump&lt;/h3&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
   &lt;style&gt;
   canvas{border:1px solid black;}
   &lt;/style&gt;
   &lt;script&gt;
   (function() {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
  })();
  
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      width = 800,
      height = 500,
   shelf = {
        x : width/20,
        y : height - 50,
        width : 60,
        height : 50
      };
      player = {
        x : width/2,
        y : height - 5,
        width : 50,
        height : 50,
        speed: 5,
        velX: 0,
        velY: 0,
        jumping: false
      },
      keys = [],
      friction = 0.8,
      gravity = 0.8;
   
  
   
  canvas.width = width;
  canvas.height = height;
  
  function update(){
    // check keys
      if (keys[38] || keys[32]) {
          // up arrow or space
        if(!player.jumping){
         player.jumping = true;
         player.velY = -player.speed*2;
        }
      }
      if (keys[39]) {
          // right arrow
          if (player.velX &lt; player.speed) {
              player.velX++;
          }
      }
      if (keys[37]) {
          // left arrow
          if (player.velX &gt; -player.speed) {
              player.velX--;
          }
      }
     
      player.velX *= friction;
     
      player.velY += gravity;
    
      player.x += player.velX;
      player.y += player.velY;
      
      if (player.x &gt;= width-player.width) {
          player.x = width-player.width;
      } else if (player.x &lt;= 0) {
          player.x = 0;
      }
    
      if(player.y &gt;= height-player.height){
          player.y = height - player.height;
          player.jumping = false;
      }
    
    ctx.clearRect(0,0,width,height);
    ctx.fillStyle = " #BA004B";
    ctx.fillRect(player.x, player.y, player.width, player.height);
    
  if(createjs.Bitmap.prototype.getBoundingRect == null){
      createjs.Bitmap.prototype.getBoundingRect = function(){
          return new createjs.Rectangle(
                  this.x - this.image.width/2,
                  this.y - this.image.height/2,
                  this.image.width,
                  this.image.height);
      }
  }
  
  if(createjs.Rectangle.prototype.intersects == null){
      createjs.Rectangle.prototype.intersects = function(rect){
          return (this.x &lt;= rect.x + rect.width &amp;&amp;
                  rect.x &lt;= this.x + this.width &amp;&amp;
                  this.y &lt;= rect.y + rect.height &amp;&amp;
                  rect.y &lt;= this.y + this.height);
      }
  }
  
      
   // draw a small red box, which will eventually become our block.
   ctx.fillStyle = "red";
   ctx.fillRect(shelf.x, shelf.y, shelf.width, shelf.height); 
  
    requestAnimationFrame(update);
  }
  
  
  
  document.body.addEventListener("keydown", function(e) {
      keys[e.keyCode] = true;
  });
  
  document.body.addEventListener("keyup", function(e) {
      keys[e.keyCode] = false;
  });
  
  
  window.addEventListener("load",function(){
      update();
  });
  
  
  
   &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>