title: how do I check & change brick`s status in Javascript?
body: <p>I make brick-breaker game.
  making brick`s row = 3, column = 5.</p>
  
  <p>I want to make bricks(their status = 2) in row[0] 
  and change their status, color if they collide with ball.
  (if their status = 2, change their status = 1 &amp; color = "gray tone")</p>
  
  <p>but my code does not correctly works. </p>
  
  <p>I am trying to fix it, but it does not easy.</p>
  
  <p>here is my code:
  (Omit variable declaration &amp; irrelevant function.)</p>
  
  <pre><code>function init(){
      canvas = document.getElementById("myCanvas");
      canvas.width = 500;
      canvas.height = 480;
       if (canvas == null || canvas.getContext == null) return;
      ctx = canvas.getContext("2d");
      ballColor = "black";
      ballRadius = "30";
      changeBallColor();
      changeBallRadius();
  
      x = canvas.width/2;
      y = canvas.height-30;
      dx = 3;
      dy = -3;
  
      paddleHeight = ballRadius;
      paddleWidth = 300;
      paddleX = (canvas.width-paddleWidth)/2;
      rightPressed = false;
      leftPressed = false;
  
      brickRowCount = 3;
      brickColumnCount = 5;
      brickWidth = 80;
      brickHeight = 40;
      brickPadding = 13;
      brickOffsetTop = 10;
      brickOffsetLeft = 20;
  
      bricks = [];
      for(var c=0; c&lt;brickColumnCount; c++) {
          bricks[c] = [];
          for(var r=0; r&lt;brickRowCount; r++) {
              bricks[c][r] = { x : 0, y : 0, status : 1 };
              if(r==0) {
                  bricks[c][r] = { x: 0, y : 0, status : 2 };
              }
          }
      }
  
      s = 0; //score.
      lives = 2;
  }
  
  function collisionDetection() {
    for(var c=0; c&lt;brickColumnCount; c++) {
      for(var r=0; r&lt;brickRowCount; r++) {
        var b = bricks[c][r];
        if(b.status == 2) {
          if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
            dy = -dy;
            b.status = 1;
          }
        }
        else if(b.status == 1) {
          if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
            dy = -dy;
            b.status = 0;
            s++;
            document.getElementById("score").innerHTML=s;
            if (s == 15) {
              level2();
            }
            if (s == 30) {
              level3();
            }
            if (s == 45) {
              gameClear();
            }
          }
        }
      }
    }
  }
  
  function drawBricks() {
    for(var c=0; c&lt;brickColumnCount; c++) {
      for(var r=0; r&lt;brickRowCount; r++) {
          var b = bricks[c][r];
        if(b.status == 2) {
          var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
          var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
          bricks[c][r].x = brickX;
          bricks[c][r].y = brickY;
          ctx.beginPath();
          ctx.rect(brickX, brickY, brickWidth, brickHeight);
          ctx.fillStyle = "red";
          ctx.fill();
          ctx.closePath();
        }
        else if(b.status == 1) {
          var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
          var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
          bricks[c][r].x = brickX;
          bricks[c][r].y = brickY;
          ctx.beginPath();
          ctx.rect(brickX, brickY, brickWidth, brickHeight);
          ctx.fillStyle = "EAEAEA";
          ctx.fill();
          ctx.closePath();
        }
      }
    }
  }
  
  function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
      drawBricks();
      collisionDetection();
  
      if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
      dx = -dx;
     }
  
     if(y + dy &lt; ballRadius) {
      dy = -dy;
     }
  
     else if(y + dy &gt; canvas.height-ballRadius) {
      if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
          dy = -dy;
      }
      else {
        lives--;
        if(!lives) {
          alert("GAME OVER.");
          document.location.reload();
        }
        else {
          x = canvas.width/2;
          y = canvas.height-30;
          dx = 3;
          dy = -3;
          paddleX = (canvas.width-paddleWidth)/2;
         }
       }
     }
  
     if(rightPressed &amp;&amp; paddleX &lt; canvas.width-paddleWidth) {
          paddleX += 5;
     }
     else if(leftPressed &amp;&amp; paddleX &gt; 0) {
          paddleX -= 5;
     }
  
      x += dx;
      y += dy;
  }
  
  ball = setInterval(draw, 10);
  </code></pre>