title: How to make the objects fall in javascript?
body: <p>I am trying to make this game, you should not collide the falling object. I have the objects falling and I have my black square, but it flashes when I run it and Im not sure how to make the code stop when the two objects collide together.
  here is the code that I have so far!</p>
  
  <pre><code> &lt;html&gt;
          &lt;body&gt;
  
  &lt;canvas id="canvasRegn" width="600" height="450"style="margin:100px;"&gt;&lt;/canvas&gt;
  
              &lt;script&gt;
  
  
  
  
  var ctx;
  var imgBg;
  var imgDrops;
  
  var noOfDrops = 50;
  var fallingDrops = [];
  
  
      function drawBackground(){  
          ctx.drawImage(imgBg, 0, 0); //Background
      }
  
      function draw() {
          drawBackground();
  
          for (var i=0; i&lt; noOfDrops; i++)
          {
          ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop
  
          fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
          if (fallingDrops[i].y &gt; 480) {  //Repeat the raindrop when it falls out of view
          fallingDrops[i].y = -25 //Account for the image size
          fallingDrops[i].x = Math.random() * 800;    //Make it appear randomly along the width    
          }
  
          }
      }
  
      function setup() {
          var canvas = document.getElementById('canvasRegn');
  
          if (canvas.getContext) {
                  ctx = canvas.getContext('2d');
  
                      imgBg = new Image();
             imgBg.src = "http://www.hamdancommunications.com/HComm/img/wite%20square.png";
          setInterval(draw, 36);
          for (var i = 0; i &lt; noOfDrops; i++) {
              var fallingDr = new Object();
              fallingDr["image"] =  new Image();
          fallingDr.image.src = 'http://s18.postimg.org/o6jpmdf9x/Line1.jpg';
  
              fallingDr["x"] = Math.random() * 800;
              fallingDr["y"] = Math.random() * 5;
              fallingDr["speed"] = 3 + Math.random() * 5;
              fallingDrops.push(fallingDr);
              anotherGame();
  
              }
  
          }
      }
  
  setup();
  
          function anotherGame(){
  
  
                 var canvas = document.getElementById("canvasRegn");
              var ctx = canvas.getContext('2d');
              canvas.addEventListener("mousedown", clicked);
              canvas.addEventListener("mousemove", moved);
              canvas.addEventListener("mouseup", released);
  
              var isclicked = 0;
  
              var square = new Object();
              square.color = "black";
              square.x = 100;
              square.y = 100;
              square.w = 50;
              square.h = 50;
  
  
              var offX = 0;
              var offY = 0;
  
              function draw(){
                  ctx.clearRect(0,0,canvas.width,canvas.height);
  
                  ctx.fillStyle = square.color;
                  ctx.fillRect(square.x,square.y,square.w,square.h);
              }
  
  
              function game(){
              }
  
              function clicked(e){
                  var x = e.offsetX;
                  var y = e.offsetY;
                  if(x &gt;= square.x &amp;&amp; x &lt;= square.x + square.w &amp;&amp;
                      y &gt;= square.y &amp;&amp; y &lt;= square.y + square.h){
                      isclicked = 1;
                      offX = x - square.x;
                      offY = y - square.y;
                  }
                  }
  
              function moved(e){
                  if(isclicked == 1){
                      var x = e.offsetX;
                      var y = e.offsetY;
                      square.x = x - offX;
                      square.y = y - offY;
                  }
  
                  }
  
              function released(e){
                  var x = e.offsetX;
                  var y = e.offsetY;
                  isclicked = 0;
              }
  
              var drawtimer = setInterval(draw, 1000/30);
              var gametimer = setInterval(game, 1000/10);
  
  
  
  
          }
  
  
  
  
  
              &lt;/script&gt;
  
          &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>