Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
Published
Edited
Oct 18, 2019
12 forks
Importers
85 stars
mutable ball = {
newgame;
return {r: scale * 0.7, x: w / 2, y: h - scale * 2, dx: 0, dy: -speed}
}
gameloop = {
let {r, x, y, dx, dy} = mutable ball;
while (!mutable gameover) {
// Move the ball.
x += dx, y += dy;
// Bounce off walls.
if (x < r + scale) dx = Math.abs(dx);
if (x + r > w - scale) dx = -Math.abs(dx);
if (y < r + scale) dy = speed;
// Bounce off paddle.
let px = mutable paddleX;
if (y + r > h - scale && x + r > px && x - r < px + paddleLength) {
dy = -speed;
dx = ((x - px) / paddleLength - 0.5) * Math.PI * speed;
}
// Bounce off bricks.
eachBrick(bricks, (brick, row, col) => {
let hit;
if (!(hit = collide(mutable ball, brick))) return;
bricks[row][col] = null;
mutable score += brick.points;
hit == "v" ? dy = -dy : dx = -dx;
return true;
});
mutable ball = {r, x, y, dx, dy};
if (y + r > h) mutable gameover = true;
yield true;
}
}
draw = {
gameloop;
// Draw the background.
c.fillStyle = "black";
c.fillRect(0, 0, w, h);
// Draw the walls.
c.fillStyle = "#444";
c.fillRect(0, 0, scale, h);
c.fillRect(0, 0, w, scale);
c.fillRect(w - scale, 0, scale, h);
// Draw the bricks.
eachBrick(bricks, (brick) => {
c.fillStyle = brick.color;
c.fillRect(brick.x, brick.y, brick.w, brick.h);
});
// Draw the paddle.
c.fillStyle = colors[0];
c.fillRect(mutable paddleX, h - scale, paddleLength, scale);
// Draw the ball.
const {r, x, y} = mutable ball;
c.beginPath();
c.fillStyle = colors[0];
c.arc(x, y, r, 0, 2 * Math.PI);
c.fill();
return true;
}
mutable paddleX = w / 2 - paddleLength / 2
mousemove = c.canvas.onmousemove = c.canvas.ontouchmove = e => {
e.preventDefault();
const cursor = e.changedTouches ? e.changedTouches[0] : e;
const left = c.canvas.getBoundingClientRect().left;
const x = cursor.pageX - left;
mutable paddleX = Math.min(Math.max(scale, x - paddleLength / 2), w - paddleLength - scale)
}
function collide(ball, brick) {
const {x, y, r, dx, dy} = ball;
let hit = x + r > brick.x && x - r < brick.x + brick.w &&
y + r > brick.y && y - r < brick.y + brick.h;
if (!hit) return false;
if (y - dy + r <= brick.y || y - dy - r >= brick.y + brick.h) return "v";
if (x - dx + r <= brick.x || x - dx - r >= brick.x + brick.w) return "h";
}
bricks = {
newgame;
const rows = 6, columns = Math.floor(w / 50);
const padding = 3, top = 70;
const width = (w - (padding * (columns + 1)) - scale * 2) / columns;
let bricks = new Array(rows).fill(1).map(() => new Array(columns).fill(1));
eachBrick(bricks, (b, row, col) => {
bricks[row][col] = {
w: width,
h: scale,
x: col * (width + padding) + padding + scale,
y: row * (scale + padding) + top,
color: colors[row],
points: brickPoints[row]
};
});
return bricks;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
