Educational

An explorer has to cross gaps, and to do that you put number blocks together until they form a bridge exactly as long as the gap. Adding is not a question before the game, it is how you play. If you overshoot, the game tells you right away by how much, and the difficulty goes up or down depending on how you are doing.

Made with Kaplay, in about 199 lines of JavaScript.

How it's made

1. Setup and controls

   The game is created and virtual buttons are defined to start, undo and pick blocks from the keyboard, although clicking or tapping is the main input. UNIT turns numbers into pixels, which is what makes a block worth 3 three times as long as a block worth 1.

   kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [28, 36, 56],
     // Played with the mouse or a finger; keys 1 to 6 pick a block, Backspace undoes.
     buttons: {
       start: { keyboard: ["space", "enter"] },
       undo: { keyboard: ["backspace", "z"] },
       pick1: { keyboard: ["1"] }, pick2: { keyboard: ["2"] }, pick3: { keyboard: ["3"] },
       pick4: { keyboard: ["4"] }, pick5: { keyboard: ["5"] }, pick6: { keyboard: ["6"] },
     },
   });
   
   const UNIT = 24; // pixels per unit: a block worth 3 is 3 units long
   const GAP_X = 80; // where the gap starts
   const GROUND_Y = 180; // top of the cliffs
   const BRIDGES = 8; // bridges to cross to win

2. Levels and solvable problems

   Each level sets the size of the numbers and which aids are shown. makePuzzle guarantees there is always a solution: it takes two or three random blocks, their sum is the gap and the remaining blocks are distractors. An educational game must never ask for something impossible.

   // Higher levels ask for bigger numbers and remove help: first the unit
   // marks, then the running sum, and finally the far edge hides in the fog.
   const LEVELS = [
     { min: 5, max: 10, blocks: 4, top: 5, marks: true, sum: true, fog: false },
     { min: 8, max: 14, blocks: 5, top: 7, marks: false, sum: true, fog: false },
     { min: 10, max: 17, blocks: 6, top: 9, marks: false, sum: false, fog: false },
     { min: 12, max: 20, blocks: 6, top: 9, marks: false, sum: false, fog: true },
   ];
   
   // There is always a solution: the target is the sum of 2 or 3 of the
   // blocks; the rest are distractors.
   function makePuzzle(lv) {
     for (;;) {
       const values = Array.from({ length: lv.blocks }, () => randi(1, lv.top + 1));
       const target = values.slice(0, randi(2, 4)).reduce((a, b) => a + b, 0);
       if (target >= lv.min && target <= lv.max) return { target, values: shuffle(values) };
     }
   }

3. The gap is the question

   The problem is not written, it is drawn: the far cliff sits «target × UNIT» pixels away. So the same number shows up in two ways, as a figure and as a distance, and the unit marks work like a ruler.

   // The gap is the question: it is exactly `target` units wide.
   add([rect(width(), 120), pos(0, GROUND_Y + 30), color(40, 92, 140)]);
   add([rect(width(), 82), pos(0, 278), color(20, 26, 42), z(1)]);
   add([rect(GAP_X, 90), pos(0, GROUND_Y), color(112, 92, 70), "cliff"]);
   const farCliff = add([rect(width(), 90), pos(0, GROUND_Y), color(112, 92, 70), "cliff"]);
   const explorer = add([rect(16, 28, { radius: 3 }), pos(GAP_X - 26, GROUND_Y), anchor("bot"), color(250, 200, 90), z(5)]);
   const fog = add([rect(width(), 110), pos(0, GROUND_Y - 30), color(190, 200, 215), opacity(0), z(3)]);
   const fogLabel = fog.add([text("", { size: 13, font: FONT }), pos(12, 92), color(60, 70, 90)]);
   const targetLabel = add([text("", { size: 22, font: FONT }), pos(GAP_X, 92), color(255, 235, 170), z(6)]);
   const sumLabel = add([text("", { size: 16, font: FONT }), pos(GAP_X, 124), color(190, 220, 255), z(6)]);
   const hud = add([text("", { size: 15, font: FONT }), pos(16, 12)]);
   const notice = add([text("", { size: 15, font: FONT, width: 600 }), pos(16, 40), color(255, 210, 120)]);
   const notify = (s, c = rgb(255, 210, 120)) => ((notice.text = s), (notice.color = c));
   // Unit marks: a ruler under the gap, only on the easiest level.
   const marks = [];
   for (let i = 0; i <= 20; i++)
     marks.push(add([rect(2, 10), pos(GAP_X + i * UNIT - 1, GROUND_Y + 14), color(220, 230, 255), opacity(0), z(2)]));

4. Blocks you build with

   Each block shows its number and a bar of its length. When picked, it becomes a piece of the bridge with that length. The answer is built instead of being chosen from a list, and that is where intrinsic integration lies.

   // The answer is built, not chosen: each tile is a piece of bridge as long
   // as its number. A short bar under the digit shows that length too.
   const tiles = [];
   const placedSum = () => placed.reduce((a, tile) => a + tile.value, 0);
   function makeTiles() {
     tiles.forEach(destroy);
     tiles.length = 0;
     puzzle.values.forEach((value, i) => {
       const tile = add([rect(80, 58, { radius: 6 }), pos(28 + i * 100, 288), color(70, 80, 120), area(), z(2), "tile", { value, used: false }]);
       tile.add([text(String(value), { size: 26, font: FONT }), pos(40, 22), anchor("center")]);
       tile.add([rect(value * 8, 6), pos(40 - value * 4, 44), color(250, 200, 90)]);
       tile.onClick(() => pick(tile));
       tiles.push(tile);
     });
   }
   for (let i = 0; i < 6; i++) onButtonPress(`pick${i + 1}`, () => tiles[i] && pick(tiles[i]));

5. Immediate feedback

   Every action gets an answer straight away: the bridge grows and the message says how much is left. If you overshoot, the last piece falls and the message explains the sum («over by 2: 9 + 4 = 13, and the gap is 11»). The mistake does not end the game but gives you information for the next try.

   // Every move answers at once: the bridge grows, and if it is too long the
   // last piece falls and the game says by how much and why.
   function pick(tile) {
     if (busy || tile.used) return;
     const start = placedSum();
     tile.used = true;
     tile.opacity = 0.3;
     const piece = add([rect(tile.value * UNIT - 2, 14, { radius: 2 }), pos(GAP_X + start * UNIT + 1, GROUND_Y), color(196, 150, 96), area(), z(4), "piece", { tile }]);
     piece.add([text(String(tile.value), { size: 12, font: FONT }), pos((tile.value * UNIT) / 2 - 1, 7), anchor("center"), color(40, 30, 20)]);
     piece.onClick(() => removePiece(piece));
     placed.push(tile);
     tile.piece = piece;
     const sum = placedSum();
     updateLabels();
     if (sum > puzzle.target) return overshoot(piece, start, tile.value);
     if (sum === puzzle.target) return complete();
     notify(t({ es: `Faltan ${puzzle.target - sum}.`, en: `${puzzle.target - sum} to go.` }), rgb(190, 220, 255));
   }
   function removePiece(piece) {
     if (busy) return;
     destroy(piece);
     placed = placed.filter((tile) => tile !== piece.tile);
     piece.tile.used = false;
     piece.tile.opacity = 1;
     // The pieces after the removed one slide back to close the hole.
     let x = 0;
     for (const tile of placed) (tile.piece.pos.x = GAP_X + x * UNIT + 1), (x += tile.value);
     updateLabels();
   }
   onButtonPress("undo", () => placed.length && removePiece(placed[placed.length - 1].piece));
   
   function overshoot(piece, start, value) {
     errorsHere++;
     mistakes++;
     piece.color = rgb(220, 80, 70);
     notify(t({
       es: `Te pasaste por ${start + value - puzzle.target}: ${start} + ${value} = ${start + value}, y el hueco mide ${puzzle.target}.`,
       en: `Over by ${start + value - puzzle.target}: ${start} + ${value} = ${start + value}, and the gap is ${puzzle.target}.`,
     }), rgb(255, 140, 120));
     busy = true;
     tween(piece.pos.y, height() + 20, 0.6, (y) => (piece.pos.y = y)).onEnd(() => {
       busy = false;
       removePiece(piece);
       adapt(false);
     });
   }

6. Adaptive difficulty and scaffolding

   Two clean bridges in a row raise the level, and each level removes an aid: first the unit marks, then the on-screen sum and finally the fog, which hides the edge so you calculate without measuring by eye. Two mistakes on the same bridge drop a level and bring the aid back. This is called scaffolding: support is withdrawn as you stop needing it.

   // The difficulty follows the player: two clean bridges in a row raise the
   // level (fewer aids); two mistakes on the same bridge lower it again.
   function adapt(solved) {
     if (solved) {
       streak = errorsHere === 0 ? streak + 1 : 0;
       if (streak >= 2 && level < LEVELS.length - 1) {
         level++;
         streak = 0;
         return t({ es: " Subes de nivel: menos ayudas.", en: " Level up: fewer aids." });
       }
       return "";
     }
     streak = 0;
     if (errorsHere % 2 === 0 && level > 0) {
       level--;
       applyAids();
       notify(notice.text + t({ es: " Bajamos un nivel: vuelven las ayudas.", en: " One level down: the aids come back." }), rgb(255, 140, 120));
     }
     updateLabels();
     return "";
   }
   function applyAids() {
     const lv = LEVELS[level];
     marks.forEach((m, i) => (m.opacity = lv.marks && i <= puzzle.target ? 0.8 : 0));
     fog.opacity = lv.fog ? 1 : 0;
     fog.pos.x = GAP_X + 5 * UNIT;
     fogLabel.text = lv.fog ? t({ es: "Niebla: calcula sin mirar el borde.", en: "Fog: work it out without seeing the edge." }) : "";
   }

7. Progress and checking

   The counter shows the bridge, the level and the mistakes. When a bridge is complete, the fog lifts so the answer is checked in plain view, and the explorer crosses. Then a new problem arrives with the level already adjusted.

   function updateLabels() {
     const lv = LEVELS[level];
     const sum = placedSum();
     targetLabel.text = t({ es: `El hueco mide ${puzzle.target}`, en: `The gap is ${puzzle.target} long` });
     sumLabel.text = !lv.sum ? t({ es: "Suma: la llevas tú", en: "Sum: keep it in your head" })
       : placed.length ? `${placed.map((tile) => tile.value).join(" + ")} = ${sum}` : "0";
     hud.text = t({ es: `Puente ${crossed + 1}/${BRIDGES}   Nivel ${level + 1}/${LEVELS.length}   Errores: ${mistakes}`,
       en: `Bridge ${crossed + 1}/${BRIDGES}   Level ${level + 1}/${LEVELS.length}   Mistakes: ${mistakes}` });
   }
   function complete() {
     busy = true;
     const extra = adapt(true);
     best = Math.max(best, level + 1);
     notify(t({ es: `¡Exacto! ${placed.map((tile) => tile.value).join(" + ")} = ${puzzle.target}.`, en: `Exactly! ${placed.map((tile) => tile.value).join(" + ")} = ${puzzle.target}.` }) + extra, rgb(150, 230, 150));
     fog.opacity = 0; // reveal the far edge: the answer is checked in plain view
     const goal = GAP_X + puzzle.target * UNIT + 30;
     tween(explorer.pos.x, goal, 1.2, (x) => (explorer.pos.x = x)).onEnd(() => {
       crossed++;
       if (crossed >= BRIDGES) go("end", mistakes, best);
       else newBridge();
     });
   }
   function newBridge() {
     destroyAll("piece");
     placed = [];
     errorsHere = 0;
     busy = false;
     puzzle = makePuzzle(LEVELS[level]);
     farCliff.pos.x = GAP_X + puzzle.target * UNIT;
     explorer.pos.x = GAP_X - 26;
     makeTiles();
     applyAids();
     updateLabels();
   }
   newBridge();
   notify(t({ es: "Toca bloques para construir un puente que mida justo lo que el hueco.", en: "Tap blocks to build a bridge exactly as long as the gap." }), rgb(190, 220, 255));

8. Scenes

   Three scenes (title, game and end). The last one sums up bridges, mistakes and the highest level, and presents mistakes as part of learning.

   function screen(title, subtitle, next) {
     add([text(title, { size: 32, font: FONT, align: "center" }), pos(center().sub(0, 60)), anchor("center")]);
     add([text(subtitle, { size: 15, font: FONT, align: "center", width: 560 }), pos(center().add(0, 30)), anchor("center"), color(210, 220, 255)]);
     onButtonPress("start", next);
     onClick(next);
   }
   
   scene("title", () =>
     screen(
       t({ es: "Construye el puente", en: "Build the bridge" }),
       t({
         es: `El explorador cruza si el puente mide exactamente lo que el hueco.\nHaz clic en los bloques (o pulsa 1–6) para sumarlos; clic en una pieza o Retroceso para quitarla.\nSi aciertas seguido, el juego sube de nivel y quita ayudas; si te equivocas, las devuelve.\nCruza ${BRIDGES} puentes. Clic o espacio para empezar.`,
         en: `The explorer crosses if the bridge is exactly as long as the gap.\nClick the blocks (or press 1–6) to add them; click a piece or Backspace to remove it.\nGet it right in a row and the game levels up and removes aids; make mistakes and it brings them back.\nCross ${BRIDGES} bridges. Click or press space to start.`,
       }),
       () => go("game"),
     ),
   );
   
   scene("end", (mistakes, best) =>
     screen(
       t({ es: "¡Llegaste al otro lado!", en: "You made it across!" }),
       t({
         es: `${BRIDGES} puentes, ${mistakes} errores, nivel máximo ${best}/${LEVELS.length}.\nCada error te dijo cuánto sobraba: así se aprende sumando. Clic para repetir.`,
         en: `${BRIDGES} bridges, ${mistakes} mistakes, top level ${best}/${LEVELS.length}.\nEach mistake told you how much was left over: that is how adding is learned. Click to play again.`,
       }),
       () => go("game"),
     ),
   );
   
   go("title");

What we simplified

• There is only addition of small whole numbers; a real game would cover a whole syllabus (subtraction, fractions, multiplication).
• Adaptation uses a simple rule (two clean bridges in a row go up a level and two mistakes on the same bridge go down one). Real games estimate the mastery of each skill with more data.
• It does not save progress or produce a report for the teacher.

To modify it

• Change the mechanic to subtraction, so that the bridge starts too long and you have to remove blocks until it fits. What changes in the feedback?
• Make a «quiz with a prize» version (an addition question and, if you get it right, the bridge appears by itself) and compare how much thinking each one requires.
• Record which sums cause the most mistakes and make makePuzzle offer them more often.

// Educational game demo: build the bridge
// Engine: Kaplay 3001 (https://kaplayjs.com). MIT licence.
import kaplay from "../../vendor/kaplay.mjs";
import { t, FONT, pixelDensity } from "../common.js";

// #region setup
kaplay({
  width: 640,
  height: 360,
  letterbox: true, pixelDensity,
  background: [28, 36, 56],
  // Played with the mouse or a finger; keys 1 to 6 pick a block, Backspace undoes.
  buttons: {
    start: { keyboard: ["space", "enter"] },
    undo: { keyboard: ["backspace", "z"] },
    pick1: { keyboard: ["1"] }, pick2: { keyboard: ["2"] }, pick3: { keyboard: ["3"] },
    pick4: { keyboard: ["4"] }, pick5: { keyboard: ["5"] }, pick6: { keyboard: ["6"] },
  },
});

const UNIT = 24; // pixels per unit: a block worth 3 is 3 units long
const GAP_X = 80; // where the gap starts
const GROUND_Y = 180; // top of the cliffs
const BRIDGES = 8; // bridges to cross to win
// #endregion

// #region levels
// Higher levels ask for bigger numbers and remove help: first the unit
// marks, then the running sum, and finally the far edge hides in the fog.
const LEVELS = [
  { min: 5, max: 10, blocks: 4, top: 5, marks: true, sum: true, fog: false },
  { min: 8, max: 14, blocks: 5, top: 7, marks: false, sum: true, fog: false },
  { min: 10, max: 17, blocks: 6, top: 9, marks: false, sum: false, fog: false },
  { min: 12, max: 20, blocks: 6, top: 9, marks: false, sum: false, fog: true },
];

// There is always a solution: the target is the sum of 2 or 3 of the
// blocks; the rest are distractors.
function makePuzzle(lv) {
  for (;;) {
    const values = Array.from({ length: lv.blocks }, () => randi(1, lv.top + 1));
    const target = values.slice(0, randi(2, 4)).reduce((a, b) => a + b, 0);
    if (target >= lv.min && target <= lv.max) return { target, values: shuffle(values) };
  }
}
// #endregion

scene("game", () => {
  let level = 0; // index in LEVELS
  let streak = 0; // bridges in a row without mistakes
  let [crossed, mistakes, best, errorsHere] = [0, 0, 0, 0];
  let puzzle = null;
  let placed = []; // tiles used in the bridge, in order
  let busy = false; // true while a piece falls or the explorer walks

  // #region world
  // The gap is the question: it is exactly `target` units wide.
  add([rect(width(), 120), pos(0, GROUND_Y + 30), color(40, 92, 140)]);
  add([rect(width(), 82), pos(0, 278), color(20, 26, 42), z(1)]);
  add([rect(GAP_X, 90), pos(0, GROUND_Y), color(112, 92, 70), "cliff"]);
  const farCliff = add([rect(width(), 90), pos(0, GROUND_Y), color(112, 92, 70), "cliff"]);
  const explorer = add([rect(16, 28, { radius: 3 }), pos(GAP_X - 26, GROUND_Y), anchor("bot"), color(250, 200, 90), z(5)]);
  const fog = add([rect(width(), 110), pos(0, GROUND_Y - 30), color(190, 200, 215), opacity(0), z(3)]);
  const fogLabel = fog.add([text("", { size: 13, font: FONT }), pos(12, 92), color(60, 70, 90)]);
  const targetLabel = add([text("", { size: 22, font: FONT }), pos(GAP_X, 92), color(255, 235, 170), z(6)]);
  const sumLabel = add([text("", { size: 16, font: FONT }), pos(GAP_X, 124), color(190, 220, 255), z(6)]);
  const hud = add([text("", { size: 15, font: FONT }), pos(16, 12)]);
  const notice = add([text("", { size: 15, font: FONT, width: 600 }), pos(16, 40), color(255, 210, 120)]);
  const notify = (s, c = rgb(255, 210, 120)) => ((notice.text = s), (notice.color = c));
  // Unit marks: a ruler under the gap, only on the easiest level.
  const marks = [];
  for (let i = 0; i <= 20; i++)
    marks.push(add([rect(2, 10), pos(GAP_X + i * UNIT - 1, GROUND_Y + 14), color(220, 230, 255), opacity(0), z(2)]));
  // #endregion

  // #region tiles
  // The answer is built, not chosen: each tile is a piece of bridge as long
  // as its number. A short bar under the digit shows that length too.
  const tiles = [];
  const placedSum = () => placed.reduce((a, tile) => a + tile.value, 0);
  function makeTiles() {
    tiles.forEach(destroy);
    tiles.length = 0;
    puzzle.values.forEach((value, i) => {
      const tile = add([rect(80, 58, { radius: 6 }), pos(28 + i * 100, 288), color(70, 80, 120), area(), z(2), "tile", { value, used: false }]);
      tile.add([text(String(value), { size: 26, font: FONT }), pos(40, 22), anchor("center")]);
      tile.add([rect(value * 8, 6), pos(40 - value * 4, 44), color(250, 200, 90)]);
      tile.onClick(() => pick(tile));
      tiles.push(tile);
    });
  }
  for (let i = 0; i < 6; i++) onButtonPress(`pick${i + 1}`, () => tiles[i] && pick(tiles[i]));
  // #endregion

  // #region feedback
  // Every move answers at once: the bridge grows, and if it is too long the
  // last piece falls and the game says by how much and why.
  function pick(tile) {
    if (busy || tile.used) return;
    const start = placedSum();
    tile.used = true;
    tile.opacity = 0.3;
    const piece = add([rect(tile.value * UNIT - 2, 14, { radius: 2 }), pos(GAP_X + start * UNIT + 1, GROUND_Y), color(196, 150, 96), area(), z(4), "piece", { tile }]);
    piece.add([text(String(tile.value), { size: 12, font: FONT }), pos((tile.value * UNIT) / 2 - 1, 7), anchor("center"), color(40, 30, 20)]);
    piece.onClick(() => removePiece(piece));
    placed.push(tile);
    tile.piece = piece;
    const sum = placedSum();
    updateLabels();
    if (sum > puzzle.target) return overshoot(piece, start, tile.value);
    if (sum === puzzle.target) return complete();
    notify(t({ es: `Faltan ${puzzle.target - sum}.`, en: `${puzzle.target - sum} to go.` }), rgb(190, 220, 255));
  }
  function removePiece(piece) {
    if (busy) return;
    destroy(piece);
    placed = placed.filter((tile) => tile !== piece.tile);
    piece.tile.used = false;
    piece.tile.opacity = 1;
    // The pieces after the removed one slide back to close the hole.
    let x = 0;
    for (const tile of placed) (tile.piece.pos.x = GAP_X + x * UNIT + 1), (x += tile.value);
    updateLabels();
  }
  onButtonPress("undo", () => placed.length && removePiece(placed[placed.length - 1].piece));

  function overshoot(piece, start, value) {
    errorsHere++;
    mistakes++;
    piece.color = rgb(220, 80, 70);
    notify(t({
      es: `Te pasaste por ${start + value - puzzle.target}: ${start} + ${value} = ${start + value}, y el hueco mide ${puzzle.target}.`,
      en: `Over by ${start + value - puzzle.target}: ${start} + ${value} = ${start + value}, and the gap is ${puzzle.target}.`,
    }), rgb(255, 140, 120));
    busy = true;
    tween(piece.pos.y, height() + 20, 0.6, (y) => (piece.pos.y = y)).onEnd(() => {
      busy = false;
      removePiece(piece);
      adapt(false);
    });
  }
  // #endregion

  // #region adaptive
  // The difficulty follows the player: two clean bridges in a row raise the
  // level (fewer aids); two mistakes on the same bridge lower it again.
  function adapt(solved) {
    if (solved) {
      streak = errorsHere === 0 ? streak + 1 : 0;
      if (streak >= 2 && level < LEVELS.length - 1) {
        level++;
        streak = 0;
        return t({ es: " Subes de nivel: menos ayudas.", en: " Level up: fewer aids." });
      }
      return "";
    }
    streak = 0;
    if (errorsHere % 2 === 0 && level > 0) {
      level--;
      applyAids();
      notify(notice.text + t({ es: " Bajamos un nivel: vuelven las ayudas.", en: " One level down: the aids come back." }), rgb(255, 140, 120));
    }
    updateLabels();
    return "";
  }
  function applyAids() {
    const lv = LEVELS[level];
    marks.forEach((m, i) => (m.opacity = lv.marks && i <= puzzle.target ? 0.8 : 0));
    fog.opacity = lv.fog ? 1 : 0;
    fog.pos.x = GAP_X + 5 * UNIT;
    fogLabel.text = lv.fog ? t({ es: "Niebla: calcula sin mirar el borde.", en: "Fog: work it out without seeing the edge." }) : "";
  }
  // #endregion

  // #region progress
  function updateLabels() {
    const lv = LEVELS[level];
    const sum = placedSum();
    targetLabel.text = t({ es: `El hueco mide ${puzzle.target}`, en: `The gap is ${puzzle.target} long` });
    sumLabel.text = !lv.sum ? t({ es: "Suma: la llevas tú", en: "Sum: keep it in your head" })
      : placed.length ? `${placed.map((tile) => tile.value).join(" + ")} = ${sum}` : "0";
    hud.text = t({ es: `Puente ${crossed + 1}/${BRIDGES}   Nivel ${level + 1}/${LEVELS.length}   Errores: ${mistakes}`,
      en: `Bridge ${crossed + 1}/${BRIDGES}   Level ${level + 1}/${LEVELS.length}   Mistakes: ${mistakes}` });
  }
  function complete() {
    busy = true;
    const extra = adapt(true);
    best = Math.max(best, level + 1);
    notify(t({ es: `¡Exacto! ${placed.map((tile) => tile.value).join(" + ")} = ${puzzle.target}.`, en: `Exactly! ${placed.map((tile) => tile.value).join(" + ")} = ${puzzle.target}.` }) + extra, rgb(150, 230, 150));
    fog.opacity = 0; // reveal the far edge: the answer is checked in plain view
    const goal = GAP_X + puzzle.target * UNIT + 30;
    tween(explorer.pos.x, goal, 1.2, (x) => (explorer.pos.x = x)).onEnd(() => {
      crossed++;
      if (crossed >= BRIDGES) go("end", mistakes, best);
      else newBridge();
    });
  }
  function newBridge() {
    destroyAll("piece");
    placed = [];
    errorsHere = 0;
    busy = false;
    puzzle = makePuzzle(LEVELS[level]);
    farCliff.pos.x = GAP_X + puzzle.target * UNIT;
    explorer.pos.x = GAP_X - 26;
    makeTiles();
    applyAids();
    updateLabels();
  }
  newBridge();
  notify(t({ es: "Toca bloques para construir un puente que mida justo lo que el hueco.", en: "Tap blocks to build a bridge exactly as long as the gap." }), rgb(190, 220, 255));
  // #endregion
});

// #region scenes
function screen(title, subtitle, next) {
  add([text(title, { size: 32, font: FONT, align: "center" }), pos(center().sub(0, 60)), anchor("center")]);
  add([text(subtitle, { size: 15, font: FONT, align: "center", width: 560 }), pos(center().add(0, 30)), anchor("center"), color(210, 220, 255)]);
  onButtonPress("start", next);
  onClick(next);
}

scene("title", () =>
  screen(
    t({ es: "Construye el puente", en: "Build the bridge" }),
    t({
      es: `El explorador cruza si el puente mide exactamente lo que el hueco.\nHaz clic en los bloques (o pulsa 1–6) para sumarlos; clic en una pieza o Retroceso para quitarla.\nSi aciertas seguido, el juego sube de nivel y quita ayudas; si te equivocas, las devuelve.\nCruza ${BRIDGES} puentes. Clic o espacio para empezar.`,
      en: `The explorer crosses if the bridge is exactly as long as the gap.\nClick the blocks (or press 1–6) to add them; click a piece or Backspace to remove it.\nGet it right in a row and the game levels up and removes aids; make mistakes and it brings them back.\nCross ${BRIDGES} bridges. Click or press space to start.`,
    }),
    () => go("game"),
  ),
);

scene("end", (mistakes, best) =>
  screen(
    t({ es: "¡Llegaste al otro lado!", en: "You made it across!" }),
    t({
      es: `${BRIDGES} puentes, ${mistakes} errores, nivel máximo ${best}/${LEVELS.length}.\nCada error te dijo cuánto sobraba: así se aprende sumando. Clic para repetir.`,
      en: `${BRIDGES} bridges, ${mistakes} mistakes, top level ${best}/${LEVELS.length}.\nEach mistake told you how much was left over: that is how adding is learned. Click to play again.`,
    }),
    () => go("game"),
  ),
);

go("title");
// #endregion