Added 10 more gists.

breakout.coffee/breakout.js

@@ -0,0 +1,234 @@
+// 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);