Gists/breakout.coffee/breakout.js

// Generated by CoffeeScript 2.3.2
(function() {
  var ballRadius, brickColumnCount, brickHeight, brickOffsetLeft, brickOffsetTop, brickPadding, brickRowCount, brickWidth, bricks, c, canvas, collisionDetection, ctx, drawBall, drawBricks, drawLives, drawPaddle, drawScore, dx, dy, gameLoop, i, j, keyDownHandler, keyUpHandler, leftPressed, lives, mouseMoveHandler, paddleHeight, paddleWidth, paddleX, r, ref, ref1, rightPressed, score, x, y;

  canvas = document.getElementById("myCanvas");

  ctx = canvas.getContext("2d");

  // Player
  score = 0;

  lives = 3;

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

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

  // Ball
  x = canvas.width / 2;

  y = canvas.height - 30;

  dx = 2;

  dy = -2;

  ballRadius = 10;

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

  // Paddle
  paddleHeight = 10;

  paddleWidth = 75;

  paddleX = (canvas.width - paddleWidth) / 2;

  rightPressed = false;

  leftPressed = false;

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

  // Bricks
  brickRowCount = 3;

  brickColumnCount = 5;

  brickWidth = 75;

  brickHeight = 20;

  brickPadding = 10;

  brickOffsetTop = 30;

  brickOffsetLeft = 30;

  bricks = [];

  for (c = i = 0, ref = brickColumnCount; (0 <= ref ? i < ref : i > ref); c = 0 <= ref ? ++i : --i) {
    bricks[c] = [];
    for (r = j = 0, ref1 = brickRowCount; (0 <= ref1 ? j < ref1 : j > ref1); r = 0 <= ref1 ? ++j : --j) {
      bricks[c][r] = {
        x: (c * (brickWidth + brickPadding)) + brickOffsetLeft,
        y: (r * (brickHeight + brickPadding)) + brickOffsetTop,
        active: true
      };
    }
  }

  drawBricks = function() {
    var b, col, drawSingleBrick, k, len, results;
    drawSingleBrick = function(brick) {
      ctx.beginPath();
      ctx.rect(brick.x, brick.y, brickWidth, brickHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      return ctx.closePath();
    };
    results = [];
    for (k = 0, len = bricks.length; k < len; k++) {
      col = bricks[k];
      results.push((function() {
        var l, len1, results1;
        results1 = [];
        for (l = 0, len1 = col.length; l < len1; l++) {
          b = col[l];
          if (b.active) {
            results1.push(drawSingleBrick(b));
          } else {
            results1.push(void 0);
          }
        }
        return results1;
      })());
    }
    return results;
  };

  collisionDetection = function() {
    var b, col, k, len, results;
    results = [];
    for (k = 0, len = bricks.length; k < len; k++) {
      col = bricks[k];
      results.push((function() {
        var l, len1, results1;
        results1 = [];
        for (l = 0, len1 = col.length; l < len1; l++) {
          b = col[l];
          if (b.active && x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
            dy = -dy;
            b.active = false;
            score++;
            if (score === brickRowCount * brickColumnCount) {
              alert("A winner is you!");
              results1.push(document.location.reload());
            } else {
              results1.push(void 0);
            }
          } else {
            results1.push(void 0);
          }
        }
        return results1;
      })());
    }
    return results;
  };

  // Game loop
  gameLoop = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    collisionDetection();
    x += dx;
    y += dy;
    if ((x + dx > canvas.width - ballRadius) || (x + dx < ballRadius)) {
      dx = -dx;
    }
    if (y + dy < ballRadius) {
      dy = -dy;
    }
    if (y + dy > canvas.height - ballRadius) {
      if (x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy - 0.25;
        if (dx >= 0) {
          dx += 0.25;
        } else {
          dx -= 0.25;
        }
      } else {
        lives--;
        if (!lives) {
          alert("Game over, man!");
          document.location.reload();
        } else {
          x = canvas.width / 2;
          y = canvas.height - 30;
          dx = 2;
          dy = -2;
          paddleX = (canvas.width - paddleWidth) / 2;
        }
      }
    }
    if (rightPressed && paddleX < canvas.width - paddleWidth) {
      paddleX += 7;
    }
    if (leftPressed && paddleX > 0) {
      paddleX -= 7;
    }
    return requestAnimationFrame(gameLoop);
  };

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

  keyUpHandler = function(e) {
    if (e.keyCode === 39) {
      return rightPressed = false;
    } else if (e.keyCode === 37) {
      return leftPressed = false;
    }
  };

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

  // Initialization
  document.addEventListener("keydown", keyDownHandler, false);

  document.addEventListener("keyup", keyUpHandler, false);

  document.addEventListener("mousemove", mouseMoveHandler, false);

  gameLoop();

}).call(this);