Block breaker

Two levels of bricks with different strengths, a paddle that follows the pointer and a ball whose bounce depends on where you hit it. Just enough to feel what defines the genre, which is aiming with the paddle.

Made with Kaplay, in about 174 lines of JavaScript.

How it's made

1. Setup and controls

   The virtual buttons left, right and launch are defined. On touch screens they appear as buttons, although dragging your finger is more comfortable. The paddle size, ball speed and maximum bounce angle constants are the ones that most change how the game feels.

   const k = kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [20, 22, 48],
     buttons: {
       left: { keyboard: ["left", "a"] },
       right: { keyboard: ["right", "d"] },
       launch: { keyboard: ["space", "up", "enter"] },
     },
   });
   // On touch screens the paddle follows your finger; the buttons are an extra.
   touchControls(k, [
     { button: "left", label: "◀" },
     { button: "right", label: "▶" },
     { button: "launch", label: "●", side: "right" },
   ]);
   
   const PADDLE_W = 80;
   const PADDLE_Y = 330;
   const PADDLE_SPEED = 420;
   const BALL_R = 6;
   const BALL_SPEED = 300; // starting speed, in pixels per second
   const MAX_BALL_SPEED = 480;
   const MAX_ANGLE = 60; // degrees from vertical when the ball hits a paddle edge
   const LIVES = 3;

2. Levels as text

   Each level is a list of twelve-character strings. The digit says how many hits the brick can take (1, 2 or 3) and a dot leaves a gap. Each brick stores its remaining hits in a hits property, and its colour depends on it. Designing a new level means drawing it.

   // Each level is a text drawing. The digit is how many hits a brick takes;
   // a dot is an empty space. Twelve columns fit across the screen.
   const LEVELS = [
     [
       "............",
       "111111111111",
       "122222222221",
       "111111111111",
       "..11....11..",
     ],
     [
       "333333333333",
       "2..2.22.2..2",
       ".1111111111.",
       "22.2.33.2.22",
       "1.1.1..1.1.1",
     ],
   ];
   const BRICK_W = 48;
   const BRICK_H = 16;
   const COLORS = { 1: [110, 200, 140], 2: [240, 190, 80], 3: [230, 90, 90] };
   
   function buildBricks(map) {
     map.forEach((row, r) =>
       [...row].forEach((c, col) => {
         if (c === ".") return;
         const hits = Number(c);
         add([rect(BRICK_W - 4, BRICK_H - 4), pos(34 + col * BRICK_W, 40 + r * BRICK_H), color(...COLORS[hits]), { hits }, "brick"]);
       }),
     );
   }

3. The paddle

   The paddle copies the pointer's x (mouse or finger) and does not move on y. The arrow keys move it at a constant speed, and in both cases it is clamped so it cannot leave the screen. Direct control, with no momentum, is what makes the genre feel precise.

   // The paddle follows the pointer (mouse or finger) on the x axis only,
   // and the arrow keys move it too. It never leaves the screen.
   const paddle = add([rect(PADDLE_W, 10, { radius: 4 }), pos(width() / 2, PADDLE_Y), anchor("center"), color(140, 200, 255), "paddle"]);
   const clampPaddle = () => (paddle.pos.x = Math.min(Math.max(paddle.pos.x, PADDLE_W / 2), width() - PADDLE_W / 2));
   onMouseMove(() => {
     paddle.pos.x = mousePos().x;
     clampPaddle();
   });
   onButtonDown("left", () => {
     paddle.pos.x -= PADDLE_SPEED * dt();
     clampPaddle();
   });
   onButtonDown("right", () => {
     paddle.pos.x += PADDLE_SPEED * dt();
     clampPaddle();
   });

4. The ball and the angle

   The ball does not use the physics engine. Its position moves forward each frame according to its velocity. The key mechanic is bounceOffPaddle, where the distance between the impact point and the paddle's centre (from -1 to 1) becomes an angle of up to 60°. Hitting it with the centre sends it straight up and with an edge sends it diagonally. Without this the ball would just bounce like a mirror and the player could not aim.

   // The ball is moved by hand (no physics engine): position += velocity * dt.
   // Until it is launched it sits on the paddle.
   const ball = add([circle(BALL_R), pos(0, 0), anchor("center"), color(255, 255, 255), { vel: vec2(0, 0), speed: BALL_SPEED, stuck: true }, "ball"]);
   const launch = () => {
     if (!ball.stuck) return;
     ball.stuck = false;
     ball.vel = vec2(rand(-0.4, 0.4), -1).unit().scale(ball.speed);
   };
   onButtonPress("launch", launch);
   onMousePress(launch);
   
   // Hitting the paddle: the further from the centre, the wider the angle.
   // This is what gives the player aim instead of a ball that only bounces.
   function bounceOffPaddle() {
     const offset = (ball.pos.x - paddle.pos.x) / (PADDLE_W / 2); // -1 … 1
     const angle = (Math.max(-1, Math.min(1, offset)) * MAX_ANGLE * Math.PI) / 180;
     ball.vel = vec2(Math.sin(angle), -Math.cos(angle)).scale(ball.speed);
   }

5. Bricks and collision

   The ball moves first on x and checks whether it touches a brick, then does the same on y. The axis where the hit appeared is the one whose velocity flips, a simple way to tell whether the ball hit a side or the top or bottom face. Each hit takes away strength, adds points and speeds the ball up a little, as in Breakout.

   // Axis by axis: move in x and check for bricks, then the same in y.
   // Whichever axis produced the overlap is the one whose velocity flips.
   const overlaps = (b) =>
     ball.pos.x + BALL_R > b.pos.x && ball.pos.x - BALL_R < b.pos.x + b.width &&
     ball.pos.y + BALL_R > b.pos.y && ball.pos.y - BALL_R < b.pos.y + b.height;
   function hitBrick(b) {
     b.hits--;
     score += 10;
     ball.speed = Math.min(MAX_BALL_SPEED, ball.speed + 4); // each hit speeds the ball up
     if (b.hits <= 0) destroy(b);
     else b.color = rgb(...COLORS[b.hits]); // the colour shows how many hits are left
     updateHud();
   }
   function moveAxis(axis) {
     ball.pos[axis] += ball.vel[axis] * dt();
     const brick = get("brick").find(overlaps);
     if (!brick) return;
     ball.pos[axis] -= ball.vel[axis] * dt(); // step back out of the brick
     ball.vel[axis] = -ball.vel[axis];
     hitBrick(brick);
   }

6. Walls, lives and end of level

   Every frame the ball bounces off the side walls and the ceiling, and off the paddle only when it is coming down. If it falls below the screen you lose a life and it returns to the paddle at its starting speed; with no lives left, the game ends. When no bricks remain you move on to the next level, keeping your score and lives.

   // Every frame: move the ball, then apply the rules of the screen's edges.
   ball.onUpdate(() => {
     if (ball.stuck) {
       ball.pos = vec2(paddle.pos.x, PADDLE_Y - 5 - BALL_R);
       return;
     }
     moveAxis("x");
     moveAxis("y");
     // Walls on the left, right and top.
     if (ball.pos.x < BALL_R || ball.pos.x > width() - BALL_R) {
       ball.pos.x = Math.min(Math.max(ball.pos.x, BALL_R), width() - BALL_R);
       ball.vel.x = -ball.vel.x;
     }
     if (ball.pos.y < 30 + BALL_R) {
       ball.pos.y = 30 + BALL_R;
       ball.vel.y = Math.abs(ball.vel.y);
     }
     // The paddle: only when the ball is coming down onto it.
     const onPaddle = Math.abs(ball.pos.x - paddle.pos.x) < PADDLE_W / 2 + BALL_R && Math.abs(ball.pos.y - PADDLE_Y) < 5 + BALL_R;
     if (onPaddle && ball.vel.y > 0) bounceOffPaddle();
     // Missing the ball costs a life; with none left the game is over.
     if (ball.pos.y > height() + 20) {
       lives--;
       updateHud();
       if (lives <= 0) return go("end", false, score);
       ball.stuck = true;
       ball.speed = BALL_SPEED;
     }
     // No bricks left: next level, or the end if it was the last one.
     if (get("brick").length === 0) {
       if (levelIndex + 1 < LEVELS.length) go("game", levelIndex + 1, score, lives);
       else go("end", true, score);
     }
   });

7. Scenes

   There are three scenes, title, game and end. The game scene receives the level number, the score and the lives, so go("game", 1, score, lives) builds the next level without cleaning anything up by hand.

   function screen(title, subtitle, next) {
     add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 40)), anchor("center")]);
     add([
       text(subtitle, { size: 16, font: FONT, align: "center", width: 600 }),
       pos(center().add(0, 30)),
       anchor("center"),
       color(200, 210, 255),
     ]);
     let ready = false;
     wait(0.4, () => (ready = true)); // so the last click of a game does not skip this screen
     const start = () => ready && next();
     onButtonPress("launch", start);
     onClick(start);
   }
   
   scene("title", () =>
     screen(
       t({ es: "Rompebloques", en: "Block breaker" }),
       t({
         es: "Mueve la paleta con el ratón, el dedo o las flechas. Clic o espacio para lanzar la pelota.\nDonde golpea la paleta decide el ángulo. Rompe todos los ladrillos.\nPulsa espacio o toca para empezar.",
         en: "Move the paddle with the mouse, your finger or the arrows. Click or space to launch the ball.\nWhere it hits the paddle decides the angle. Break every brick.\nPress space or tap to start.",
       }),
       () => go("game"),
     ),
   );
   
   scene("end", (won, score) =>
     screen(
       won ? t({ es: "¡Muro despejado!", en: "Wall cleared!" }) : t({ es: "Sin vidas", en: "Out of lives" }),
       t({
         es: `Puntos: ${score}. Pulsa espacio o toca para jugar otra vez.`,
         en: `Score: ${score}. Press space or tap to play again.`,
       }),
       () => go("game"),
     ),
   );
   
   go("title");

What we simplified

• Everything is rectangles and a circle; there is no sound and no effect when a brick breaks.
• There are no power-ups (long paddle, multiple balls, cannons) and no enemies, which are what Arkanoid added.
• Collision treats the ball as a square and checks one axis at a time; at much higher speeds each step would have to be split into several smaller ones.

To modify it

• Change MAX_ANGLE to 20 and then to 80. Which one lets you aim best? Which one becomes unfair?
• Draw a third level in LEVELS and add a
• Make some bricks drop a capsule that, if you catch it with the paddle, makes it longer for ten seconds.

// Block breaker demo
// Engine: Kaplay 3001 (https://kaplayjs.com). MIT licence.
import kaplay from "../../vendor/kaplay.mjs";
import { t, FONT, touchControls, pixelDensity } from "../common.js";

// #region setup
const k = kaplay({
  width: 640,
  height: 360,
  letterbox: true, pixelDensity,
  background: [20, 22, 48],
  buttons: {
    left: { keyboard: ["left", "a"] },
    right: { keyboard: ["right", "d"] },
    launch: { keyboard: ["space", "up", "enter"] },
  },
});
// On touch screens the paddle follows your finger; the buttons are an extra.
touchControls(k, [
  { button: "left", label: "◀" },
  { button: "right", label: "▶" },
  { button: "launch", label: "●", side: "right" },
]);

const PADDLE_W = 80;
const PADDLE_Y = 330;
const PADDLE_SPEED = 420;
const BALL_R = 6;
const BALL_SPEED = 300; // starting speed, in pixels per second
const MAX_BALL_SPEED = 480;
const MAX_ANGLE = 60; // degrees from vertical when the ball hits a paddle edge
const LIVES = 3;
// #endregion

// #region levels
// Each level is a text drawing. The digit is how many hits a brick takes;
// a dot is an empty space. Twelve columns fit across the screen.
const LEVELS = [
  [
    "............",
    "111111111111",
    "122222222221",
    "111111111111",
    "..11....11..",
  ],
  [
    "333333333333",
    "2..2.22.2..2",
    ".1111111111.",
    "22.2.33.2.22",
    "1.1.1..1.1.1",
  ],
];
const BRICK_W = 48;
const BRICK_H = 16;
const COLORS = { 1: [110, 200, 140], 2: [240, 190, 80], 3: [230, 90, 90] };

function buildBricks(map) {
  map.forEach((row, r) =>
    [...row].forEach((c, col) => {
      if (c === ".") return;
      const hits = Number(c);
      add([rect(BRICK_W - 4, BRICK_H - 4), pos(34 + col * BRICK_W, 40 + r * BRICK_H), color(...COLORS[hits]), { hits }, "brick"]);
    }),
  );
}
// #endregion

scene("game", (levelIndex = 0, score = 0, lives = LIVES) => {
  buildBricks(LEVELS[levelIndex]);
  const hud = add([text("", { size: 16, font: FONT }), pos(12, 10), z(10)]);
  const updateHud = () =>
    (hud.text = t({
      es: `Nivel ${levelIndex + 1}   Puntos: ${score}   Vidas: ${lives}`,
      en: `Level ${levelIndex + 1}   Score: ${score}   Lives: ${lives}`,
    }));
  updateHud();

  // #region paddle
  // The paddle follows the pointer (mouse or finger) on the x axis only,
  // and the arrow keys move it too. It never leaves the screen.
  const paddle = add([rect(PADDLE_W, 10, { radius: 4 }), pos(width() / 2, PADDLE_Y), anchor("center"), color(140, 200, 255), "paddle"]);
  const clampPaddle = () => (paddle.pos.x = Math.min(Math.max(paddle.pos.x, PADDLE_W / 2), width() - PADDLE_W / 2));
  onMouseMove(() => {
    paddle.pos.x = mousePos().x;
    clampPaddle();
  });
  onButtonDown("left", () => {
    paddle.pos.x -= PADDLE_SPEED * dt();
    clampPaddle();
  });
  onButtonDown("right", () => {
    paddle.pos.x += PADDLE_SPEED * dt();
    clampPaddle();
  });
  // #endregion

  // #region ball
  // The ball is moved by hand (no physics engine): position += velocity * dt.
  // Until it is launched it sits on the paddle.
  const ball = add([circle(BALL_R), pos(0, 0), anchor("center"), color(255, 255, 255), { vel: vec2(0, 0), speed: BALL_SPEED, stuck: true }, "ball"]);
  const launch = () => {
    if (!ball.stuck) return;
    ball.stuck = false;
    ball.vel = vec2(rand(-0.4, 0.4), -1).unit().scale(ball.speed);
  };
  onButtonPress("launch", launch);
  onMousePress(launch);

  // Hitting the paddle: the further from the centre, the wider the angle.
  // This is what gives the player aim instead of a ball that only bounces.
  function bounceOffPaddle() {
    const offset = (ball.pos.x - paddle.pos.x) / (PADDLE_W / 2); // -1 … 1
    const angle = (Math.max(-1, Math.min(1, offset)) * MAX_ANGLE * Math.PI) / 180;
    ball.vel = vec2(Math.sin(angle), -Math.cos(angle)).scale(ball.speed);
  }
  // #endregion

  // #region bricks
  // Axis by axis: move in x and check for bricks, then the same in y.
  // Whichever axis produced the overlap is the one whose velocity flips.
  const overlaps = (b) =>
    ball.pos.x + BALL_R > b.pos.x && ball.pos.x - BALL_R < b.pos.x + b.width &&
    ball.pos.y + BALL_R > b.pos.y && ball.pos.y - BALL_R < b.pos.y + b.height;
  function hitBrick(b) {
    b.hits--;
    score += 10;
    ball.speed = Math.min(MAX_BALL_SPEED, ball.speed + 4); // each hit speeds the ball up
    if (b.hits <= 0) destroy(b);
    else b.color = rgb(...COLORS[b.hits]); // the colour shows how many hits are left
    updateHud();
  }
  function moveAxis(axis) {
    ball.pos[axis] += ball.vel[axis] * dt();
    const brick = get("brick").find(overlaps);
    if (!brick) return;
    ball.pos[axis] -= ball.vel[axis] * dt(); // step back out of the brick
    ball.vel[axis] = -ball.vel[axis];
    hitBrick(brick);
  }
  // #endregion

  // #region each-frame
  // Every frame: move the ball, then apply the rules of the screen's edges.
  ball.onUpdate(() => {
    if (ball.stuck) {
      ball.pos = vec2(paddle.pos.x, PADDLE_Y - 5 - BALL_R);
      return;
    }
    moveAxis("x");
    moveAxis("y");
    // Walls on the left, right and top.
    if (ball.pos.x < BALL_R || ball.pos.x > width() - BALL_R) {
      ball.pos.x = Math.min(Math.max(ball.pos.x, BALL_R), width() - BALL_R);
      ball.vel.x = -ball.vel.x;
    }
    if (ball.pos.y < 30 + BALL_R) {
      ball.pos.y = 30 + BALL_R;
      ball.vel.y = Math.abs(ball.vel.y);
    }
    // The paddle: only when the ball is coming down onto it.
    const onPaddle = Math.abs(ball.pos.x - paddle.pos.x) < PADDLE_W / 2 + BALL_R && Math.abs(ball.pos.y - PADDLE_Y) < 5 + BALL_R;
    if (onPaddle && ball.vel.y > 0) bounceOffPaddle();
    // Missing the ball costs a life; with none left the game is over.
    if (ball.pos.y > height() + 20) {
      lives--;
      updateHud();
      if (lives <= 0) return go("end", false, score);
      ball.stuck = true;
      ball.speed = BALL_SPEED;
    }
    // No bricks left: next level, or the end if it was the last one.
    if (get("brick").length === 0) {
      if (levelIndex + 1 < LEVELS.length) go("game", levelIndex + 1, score, lives);
      else go("end", true, score);
    }
  });
  // #endregion
});

// #region scenes
function screen(title, subtitle, next) {
  add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 40)), anchor("center")]);
  add([
    text(subtitle, { size: 16, font: FONT, align: "center", width: 600 }),
    pos(center().add(0, 30)),
    anchor("center"),
    color(200, 210, 255),
  ]);
  let ready = false;
  wait(0.4, () => (ready = true)); // so the last click of a game does not skip this screen
  const start = () => ready && next();
  onButtonPress("launch", start);
  onClick(start);
}

scene("title", () =>
  screen(
    t({ es: "Rompebloques", en: "Block breaker" }),
    t({
      es: "Mueve la paleta con el ratón, el dedo o las flechas. Clic o espacio para lanzar la pelota.\nDonde golpea la paleta decide el ángulo. Rompe todos los ladrillos.\nPulsa espacio o toca para empezar.",
      en: "Move the paddle with the mouse, your finger or the arrows. Click or space to launch the ball.\nWhere it hits the paddle decides the angle. Break every brick.\nPress space or tap to start.",
    }),
    () => go("game"),
  ),
);

scene("end", (won, score) =>
  screen(
    won ? t({ es: "¡Muro despejado!", en: "Wall cleared!" }) : t({ es: "Sin vidas", en: "Out of lives" }),
    t({
      es: `Puntos: ${score}. Pulsa espacio o toca para jugar otra vez.`,
      en: `Score: ${score}. Press space or tap to play again.`,
    }),
    () => go("game"),
  ),
);

go("title");
// #endregion