Added 10 more gists.
This commit is contained in:
Miguel Astor
1
breakout.coffee/README.md
Normal file
1
breakout.coffee/README.md
Normal file
@@ -0,0 +1 @@
|
||||
Coffeescript implementation of the MDN Breakout tutorial from [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)
|
||||
155
breakout.coffee/breakout.coffee
Normal file
155
breakout.coffee/breakout.coffee
Normal file
@@ -0,0 +1,155 @@
|
||||
canvas = document.getElementById "myCanvas"
|
||||
ctx = canvas.getContext "2d"
|
||||
|
||||
# Player
|
||||
|
||||
score = 0
|
||||
lives = 3
|
||||
|
||||
drawScore = ->
|
||||
ctx.font = "16px Arial"
|
||||
ctx.fillStyle = "#0095DD"
|
||||
ctx.fillText "Score: " + score, 8, 20
|
||||
|
||||
drawLives = ->
|
||||
ctx.font = "16px Arial"
|
||||
ctx.fillStyle = "#0095DD"
|
||||
ctx.fillText "Lives: " + lives, canvas.width - 65, 20
|
||||
|
||||
# Ball
|
||||
|
||||
x = canvas.width / 2
|
||||
y = canvas.height - 30
|
||||
dx = 2
|
||||
dy = -2
|
||||
ballRadius = 10
|
||||
|
||||
drawBall = ->
|
||||
do ctx.beginPath
|
||||
ctx.arc x, y, ballRadius, 0, Math.PI * 2
|
||||
ctx.fillStyle = "#0095DD"
|
||||
do ctx.fill
|
||||
do ctx.closePath
|
||||
|
||||
# Paddle
|
||||
|
||||
paddleHeight = 10
|
||||
paddleWidth = 75
|
||||
paddleX = (canvas.width - paddleWidth) / 2
|
||||
rightPressed = false
|
||||
leftPressed = false
|
||||
|
||||
drawPaddle = ->
|
||||
do ctx.beginPath
|
||||
ctx.rect paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight
|
||||
ctx.fillStyle = "#0095DD"
|
||||
do ctx.fill
|
||||
do ctx.closePath
|
||||
|
||||
# Bricks
|
||||
|
||||
brickRowCount = 3
|
||||
brickColumnCount = 5
|
||||
brickWidth = 75
|
||||
brickHeight = 20
|
||||
brickPadding = 10
|
||||
brickOffsetTop = 30
|
||||
brickOffsetLeft = 30
|
||||
bricks = []
|
||||
|
||||
for c in [0 ... brickColumnCount]
|
||||
bricks[c] = []
|
||||
for r in [0 ... brickRowCount]
|
||||
bricks[c][r] =
|
||||
x: (c * (brickWidth + brickPadding)) + brickOffsetLeft,
|
||||
y: (r * (brickHeight + brickPadding)) + brickOffsetTop,
|
||||
active: true
|
||||
|
||||
drawBricks = ->
|
||||
drawSingleBrick = (brick) ->
|
||||
do ctx.beginPath
|
||||
ctx.rect brick.x, brick.y, brickWidth, brickHeight
|
||||
ctx.fillStyle = "#0095DD"
|
||||
do ctx.fill
|
||||
do ctx.closePath
|
||||
|
||||
for col in bricks
|
||||
for b in col
|
||||
drawSingleBrick b if b.active
|
||||
|
||||
collisionDetection = ->
|
||||
for col in bricks
|
||||
for b in col
|
||||
if b.active and x > b.x and x < b.x + brickWidth and y > b.y and y < b.y + brickHeight
|
||||
dy = -dy
|
||||
b.active = false
|
||||
score++
|
||||
if score == brickRowCount * brickColumnCount
|
||||
alert "A winner is you!"
|
||||
do document.location.reload
|
||||
|
||||
# Game loop
|
||||
|
||||
gameLoop = ->
|
||||
ctx.clearRect 0, 0, canvas.width, canvas.height
|
||||
do drawBricks
|
||||
do drawBall
|
||||
do drawPaddle
|
||||
do drawScore
|
||||
do drawLives
|
||||
|
||||
do collisionDetection
|
||||
|
||||
x += dx
|
||||
y += dy
|
||||
|
||||
dx = -dx if (x + dx > canvas.width - ballRadius) or (x + dx < ballRadius)
|
||||
dy = -dy if (y + dy < ballRadius)
|
||||
|
||||
if y + dy > canvas.height - ballRadius
|
||||
if x > paddleX and x < paddleX + paddleWidth
|
||||
dy = -dy - 0.25
|
||||
if dx >= 0 then dx += 0.25 else dx -= 0.25
|
||||
else
|
||||
lives--
|
||||
if not lives
|
||||
alert "Game over, man!"
|
||||
do document.location.reload
|
||||
else
|
||||
x = canvas.width / 2
|
||||
y = canvas.height - 30
|
||||
dx = 2
|
||||
dy = -2
|
||||
paddleX = (canvas.width - paddleWidth) / 2
|
||||
|
||||
paddleX += 7 if rightPressed and paddleX < canvas.width - paddleWidth
|
||||
paddleX -= 7 if leftPressed and paddleX > 0
|
||||
|
||||
requestAnimationFrame gameLoop
|
||||
|
||||
# Input handlers
|
||||
|
||||
keyDownHandler = (e) ->
|
||||
if e.keyCode == 39
|
||||
rightPressed = true
|
||||
else if e.keyCode == 37
|
||||
leftPressed = true
|
||||
|
||||
keyUpHandler = (e) ->
|
||||
if e.keyCode == 39
|
||||
rightPressed = false
|
||||
else if e.keyCode == 37
|
||||
leftPressed = false
|
||||
|
||||
mouseMoveHandler = (e) ->
|
||||
hw = (paddleWidth / 2)
|
||||
relativeX = e.clientX - canvas.offsetLeft
|
||||
paddleX = relativeX - hw if relativeX > hw and relativeX < canvas.width - hw
|
||||
|
||||
# Initialization
|
||||
|
||||
document.addEventListener "keydown", keyDownHandler, false
|
||||
document.addEventListener "keyup", keyUpHandler, false
|
||||
document.addEventListener "mousemove", mouseMoveHandler, false
|
||||
|
||||
do gameLoop
|
||||
234
breakout.coffee/breakout.js
Normal file
234
breakout.coffee/breakout.js
Normal file
@@ -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);
|
||||
15
breakout.coffee/index.html
Normal file
15
breakout.coffee/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Gamedev Canvas Workshop</title>
|
||||
<style>
|
||||
* { padding: 0; margin: 0; }
|
||||
canvas { background: #eee; display: block; margin: 0 auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="480" height="320"></canvas>
|
||||
<script src="breakout.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user