box-o-sand/mdn-breakout/script.js

(function() {
  var canvas = document.getElementById("myCanvas"),
      ctx = canvas.getContext("2d"),
      ballRadius = 10,
      ballColor = '#0095DD',
      paddleHeight = 7,
      paddleWidth = 119,
      paddleX = (canvas.width-paddleWidth)/2,
      paddleSpeed = 7,
      rightPressed = false,
      leftPressed = false,
      x = canvas.width/2,
      y = canvas.height-randInt(10, 50),
      dx = 2,
      dy = -2,
      score = 0,
      scoreStep = 1,
      lives = 3,
      isPaused = false,
      isOver = false,
      brickRowCount = 3,
      brickColumnCount = 5,
      brickWidth = 75,
      brickHeight = 20,
      brickPadding = 10,
      brickOffsetTop = 30,
      brickOffsetLeft = 30,
      bricks = [];

  (function() {
    for(var c=0; c<brickColumnCount; c++) {
      bricks[c] = [];
      for(var r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
      }
    }
  })();

  function randInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }

  function randColor() {
    return 'rgba(' + ([
      randInt(0, 255),
      randInt(0, 255),
      randInt(0, 255)
    ].map(function(elem, i) { return '' + elem; }).join(',')) + ', 1.0)'
  }

  function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = ballColor;
    ctx.fill();
    ctx.closePath();
  }

  function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
  }

  function drawBricks() {
    for(var c=0; c<brickColumnCount; c++) {
      for(var r=0; r<brickRowCount; r++) {
        if(bricks[c][r].status != 1) {
          continue;
        }
        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 = "#0095DD";
        ctx.fill();
        ctx.closePath();
      }
    }
  }

  function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
      for(var r=0; r<brickRowCount; r++) {
        var b = bricks[c][r];
        if(b.status != 1) {
          continue;
        }
        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
          dy = -dy;
          b.status = 0;
          score += scoreStep;
          // scoreStep++;
          if(score >= (brickRowCount*brickColumnCount*scoreStep)) {
            isOver = true;
            pauseWithMessage("YOU WIN! FINAL SCORE "+score+"!");
            // document.location.reload();
          }
        }
      }
    }
  }

  function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
  }

  function drawLives() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
  }

  function draw() {
    if(isPaused || isOver) {
      return;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    collisionDetection();

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
      dx = -dx;
      ballColor = randColor();
    }
    if(y + dy < ballRadius) {
      dy = -dy;
      ballColor = randColor();
    }
    else if(y + dy > canvas.height-ballRadius) {
      if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
        dx *= 1.01;
        dy *= 1.01;
      }
      else {
        lives--;
        if(!lives) {
          isOver = true;
          pauseWithMessage("GAME OVER");
        }
        else {
          x = canvas.width/2;
          y = canvas.height-randInt(10, 50);
          dx = 2;
          dy = -2;
          paddleX = (canvas.width-paddleWidth)/2;
        }
      }
    }

    if(rightPressed && paddleX < canvas.width-paddleWidth) {
      paddleX += paddleSpeed;
    }
    else if(leftPressed && paddleX > 0) {
      paddleX -= paddleSpeed;
    }

    x += dx;
    y += dy;
    requestAnimationFrame(draw);
  }

  function pauseWithMessage(msg) {
    isPaused = true;
    ctx.font = "16px Arial";
    ctx.fillStyle = "#FF3333";
    ctx.fillText(msg, 150, 200);
  }

  function keyDownHandler(e) {
    if(e.keyCode == 39) {
      rightPressed = true;
    }
    else if(e.keyCode == 37) {
      leftPressed = true;
    }
  }

  function keyUpHandler(e) {
    if(e.keyCode == 39) {
      rightPressed = false;
    }
    else if(e.keyCode == 37) {
      leftPressed = false;
    }
    else if(e.keyCode == 27 && !isOver) {
      if(isPaused) {
        isPaused = false;
      } else {
        pauseWithMessage("PAUSE (ESC)");
      }
    }
  }

  function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > paddleWidth/2 &&
       relativeX < (canvas.width-(paddleWidth/2))) {
      paddleX = relativeX - paddleWidth/2;
    }
  }

  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);
  document.addEventListener("mousemove", mouseMoveHandler, false);
  draw();
})();