title: Collision detection in Javascript Falling Rocks game
body: <p>So I'm supposed to do a Javascript version of the falling rocks game for a university project.
  The player controls a rectangle that is supposed to move from left to right without getting hit by the falling objects. Reaching each side increases the score, while getting hit decreases it. Game over is at 0 points. </p>
  
  <p>I seem to be stuck at the collision detection part. I'm trying to use the coordinates of each objects as criteria for the collision, but what I have so far does nothing. If someone can check to see what I'm doing wrong, I would really appreciate it.</p>
  
  <p>Image size for the player block is x=30px, y=15px, while the falling objects are 15 by 15 pixels.</p>
  
  <p>Full code so far:</p>
  
  <pre><code>//canvas setup
  var canvas = document.createElement("canvas");
  canvas.style.background = "white";
  canvas.style.height = "95%";
  canvas.style.width = "99%";
  document.body.appendChild(canvas);
  canvas.style.border="1px solid black";
  var ctx = canvas.getContext("2d");
  
  // block image
  var blockImg = new Image();
  var t;
  var block= 
      {
          blockSpeed : 0  
      }
  block.x=0;
  blockImg.style.height=15;
  blockImg.style.width=30;
  blockImg.src = "squareche.jpg";
  //draw block
  blockImg.onload = function()
      {
       ctx.drawImage(blockImg, block.x,canvas.height-15);
      }
  function drawBlockProgress(pos)
  {
      ctx.drawImage(blockImg, block.x, canvas.height-15);
  }   
  //Background image
  var bckg = new Image();
  bckg.src = "background.png";
  function drawBackground()
  {  
          ctx.drawImage(bckg, 0, 0);
  }
  //score
  function drawScore()
  {
      ctx.font = "14px Times New Roman";
      ctx.fillText("Score: " + score, 230, 25);
  }
  
  //score, position, and a bool flag for getting points on reaching either end
  var score=50;
  var pos = 0;
  var flag = true;
  
  //left and right keypush event handlers
  document.onkeydown = function(event){
      if(event.keyCode==39)
      {
          pos+=10;
          block.x=block.blockSpeed+pos;
          if(pos&gt;=270)
          {
              if(flag)
              {
                  flag=!flag;
                  score+=10;
              }
          pos=270;
          block.x=270;
  
          drawBlockProgress(pos);
  
          }
          else
          {
              drawBlockProgress(pos);     
          }
      }
      else if(event.keyCode == 37)
      {
          pos-=10;
          block.x=block.blockSpeed+pos;
          if(pos&lt;=0)
          {
              if(!flag)
              {
                  flag=!flag;
                  score+=10;
              }
              pos=0;
              block.x=0;
              drawBlockProgress(pos);
          }
          else{
              drawBlockProgress(pos);
          }
      }
  }
  //set up the falling rocks
  var imgRocks;
  var x=0;
  var y= 0;
  var totalRocks = 10;
  var rocks=[];
  var speed = 0.2;
  
  //generate the falling objects
  function draw()
  {
  for(var i=0;i&lt;totalRocks;i++)
      {
          drawBackground();
          drawBlockProgress(pos);
          drawScore();
          ctx.drawImage(rocks[i].image, rocks[i].x, rocks[i].y);
          rocks[i].y+=rocks[i].speed;
          if(rocks[i].y &gt; canvas.height-15)
          {
              rocks[i].y=-17;
              rocks[i].x=Math.floor(Math.random()*300 + 1);
          }
      //collision check
          if(block.x &lt;= (rocks[i].x + 15)
          &amp;&amp; rocks[i].x &lt;= (block.x + 30)
          &amp;&amp; block.y &lt;= (rocks[i].y + 15)
          &amp;&amp; rocks[i].y &lt;= (block.y + 15))
          {
              // rocks[i].y=-15;
              // rocks[i].x=Math.floor(Math.random()*300 + 1);
              score -=10;
              // if(score == 0)
              // {
                  // break;
                  // clearInterval(t);
                  // alert("Game Over Dude !");
                  // window.close();
              // }
          }
      }
  }   
  function start()
  {   
      for (var i = 0; i &lt; totalRocks; i++) {
          var fallingRock = new Object();
          fallingRock["image"] =  new Image();
          rocksImg = new Image();
          rocksImg.src = "rocks.jpg";
          fallingRock.image.src = rocksImg.src;
          fallingRock["x"] = Math.floor(Math.random() * 200 + 1);
          fallingRock["y"] = Math.floor(Math.random() * 100 + 1);
          fallingRock["speed"] = speed;
          rocks.push(fallingRock);
          t = setInterval(draw,10);   
      }
  }
  start();
  </code></pre>