Endless runner

The character runs on its own through a city that never ends. You only decide when to jump and when to slide, while the speed keeps rising. It is the minimum needed to feel what defines the genre, which is a single input, reaction and a difficulty that grows by itself.

Made with Kaplay, in about 133 lines of JavaScript.

How it's made

1. Setup and controls

   Two virtual buttons are defined, jump and slide, so the same game works with a keyboard or a touch screen. The starting speed, maximum speed and acceleration constants are the whole difficulty curve. The record (best) is declared outside the scenes so it survives each restart.

   const k = kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [24, 26, 52],
     // One main button (jump) and an optional one (slide).
     buttons: {
       jump: { keyboard: ["space", "up", "w"] },
       slide: { keyboard: ["down", "s"] },
     },
   });
   touchControls(k, [
     { button: "slide", label: "▼" },
     { button: "jump", label: "⤒", side: "right" },
   ]);
   
   const GROUND_Y = 300; // the top of the floor
   const GRAVITY = 2200;
   const JUMP_FORCE = 720;
   const START_SPEED = 300; // pixels per second at the start
   const MAX_SPEED = 760;
   const ACCELERATION = 9; // speed gained every second
   const PLAYER_X = 120;
   setGravity(GRAVITY);
   
   // The session record lives outside the scenes, so it survives restarts.
   let best = 0;

2. The world moves, not the player

   The genre's trick: the player stays still on x and everything else scrolls left at the current speed. The floor stripes move at game speed and the background buildings at a quarter of it (parallax), which gives a sense of depth. When something leaves on the left it comes back on the right, so the scenery never runs out.

   // The player never moves forward: the world moves left at `speed`.
   // Background blocks move slower than the floor (parallax) to suggest depth.
   add([rect(width(), height() - GROUND_Y), pos(0, GROUND_Y), color(70, 80, 120), area(), body({ isStatic: true })]);
   for (let i = 0; i < 8; i++) {
     const h = rand(60, 160);
     add([rect(70, h), pos(i * 90, GROUND_Y - h), color(44, 48, 86), z(-1), "skyline"]);
   }
   for (let i = 0; i < 12; i++) add([rect(24, 4), pos(i * 60, GROUND_Y + 20), color(110, 120, 170), "stripe"]);
   onUpdate("skyline", (b) => {
     b.move(-speed * 0.25, 0);
     if (b.pos.x < -80) b.pos.x += 8 * 90;
   });
   onUpdate("stripe", (s) => {
     s.move(-speed, 0);
     if (s.pos.x < -30) s.pos.x += 12 * 60;
   });

3. The player

   A rectangle with area() to collide and body() so gravity affects it. With anchor("bot") its position is that of its feet, which makes it easy to change its height when sliding.

   const player = add([rect(28, 44), color(120, 210, 255), pos(PLAYER_X, GROUND_Y), anchor("bot"), area(), body(), "player"]);

4. A single button

   Jumping is almost the whole interaction, so it must respond instantly and give some control. Releasing the button early cuts the rise short (variable jump), and a click or tap anywhere on the screen counts the same as the button, so it can be played with one hand.

   // A single button: press to jump, release early for a shorter jump.
   // Clicking or tapping anywhere works like the jump button.
   const jump = () => {
     if (player.isGrounded()) player.jump(JUMP_FORCE);
   };
   const cutJump = () => {
     if (player.vel.y < 0) player.vel.y *= 0.5;
   };
   onButtonPress("jump", jump);
   onButtonRelease("jump", cutJump);
   onMousePress(jump);
   onMouseRelease(cutJump);

5. Sliding

   While you hold slide on the ground, the player is half as tall and passes under the flying bars. In the air, the same button makes you fall faster. A second action adds variety, but the genre works even without it.

   // Optional second action: hold to slide under flying obstacles.
   // In the air it makes you fall faster, so you can land sooner.
   player.onUpdate(() => {
     const sliding = isButtonDown("slide");
     player.height = sliding && player.isGrounded() ? 20 : 44;
     if (sliding && !player.isGrounded()) player.vel.y += 3000 * dt();
   });

6. Procedural obstacles

   Each new obstacle is chosen at random (a low, tall or wide block, or a flying bar), so no two runs are the same. The key is the gap to the next one. It is not measured in pixels but in seconds of reaction, multiplied by the current speed. If the gap were fixed, at high speed the obstacles would arrive too close together and the game would become impossible.

   // Procedural generation: each new obstacle is chosen at random, and the gap
   // to the previous one depends on the speed. Measuring the gap in TIME
   // (seconds of reaction) keeps the game fair even when it is very fast.
   let nextGap = 0;
   function spawnObstacle() {
     if (chance(0.3) && distance > 300) {
       // Flying bar: jump over it with good timing or slide under it.
       add([rect(44, 22), pos(width(), GROUND_Y - 30), anchor("bot"), color(255, 120, 90), area(), "obstacle"]);
     } else {
       const w = choose([22, 30, 54]);
       const h = choose([30, 44, 56]);
       add([rect(w, h), pos(width(), GROUND_Y), anchor("bot"), color(255, 200, 80), area(), "obstacle"]);
     }
     const seconds = rand(0.9, 1.8); // reaction time until the next obstacle
     nextGap = seconds * speed;
   }
   let sinceLast = 0;
   onUpdate("obstacle", (o) => {
     o.move(-speed, 0);
     if (o.pos.x < -80) destroy(o);
   });
   onUpdate(() => {
     sinceLast += speed * dt();
     if (sinceLast >= nextGap) {
       spawnObstacle();
       sinceLast = 0;
     }
   });
   player.onCollide("obstacle", () => {
     shake(8);
     go("end", Math.floor(distance / 10));
   });

7. Rising difficulty

   Every second the speed rises a little, up to a cap. There are no levels. Difficulty grows by itself over time, which is why every run starts easy and ends, sooner or later, in a crash.

   // Difficulty grows on its own: the world speeds up every second, up to a cap.
   onUpdate(() => {
     speed = Math.min(MAX_SPEED, speed + ACCELERATION * dt());
     distance += speed * dt();
   });

8. Distance and record

   The score is the distance covered, one metre every 10 pixels. Next to it is the session record, which is what invites «just one more» run.

   // The score is the distance: one metre every 10 pixels.
   const hud = add([text("", { size: 18, font: FONT }), pos(16, 12), z(10)]);
   hud.onUpdate(() => {
     const metres = Math.floor(distance / 10);
     hud.text = t({ es: `Distancia: ${metres} m   Récord: ${best} m`, en: `Distance: ${metres} m   Best: ${best} m` });
   });

9. Scenes

   There are three scenes, title, game and end. The end screen compares the distance with the record and updates it. A short pause before accepting the key keeps you from skipping that screen by accident while the button is still held.

   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),
     ]);
     // A short pause stops a held key from skipping the screen.
     let ready = false;
     wait(0.4, () => (ready = true));
     const start = () => ready && next();
     onButtonPress("jump", start);
     onClick(start);
   }
   
   scene("title", () =>
     screen(
       t({ es: "Corredor sin fin", en: "Endless runner" }),
       t({
         es: "Corres solo. Espacio, flecha arriba o clic para saltar (mantén para saltar más alto).\nFlecha abajo para deslizarte. Llega lo más lejos que puedas.\nPulsa espacio o toca para empezar.",
         en: "You run on your own. Space, up arrow or click to jump (hold to jump higher).\nDown arrow to slide. Get as far as you can.\nPress space or tap to start.",
       }),
       () => go("game"),
     ),
   );
   
   scene("end", (metres) => {
     const record = metres > best;
     best = Math.max(best, metres);
     screen(
       record ? t({ es: "¡Nuevo récord!", en: "New record!" }) : t({ es: "Chocaste", en: "You crashed" }),
       t({
         es: `Distancia: ${metres} m. Récord de la sesión: ${best} m.\nPulsa espacio o toca para correr otra vez.`,
         en: `Distance: ${metres} m. Session best: ${best} m.\nPress space or tap to run again.`,
       }),
       () => go("game"),
     );
   });
   
   go("title");

What we simplified

• The character, the buildings and the obstacles are rectangles; there are no animations or sound.
• There are no coins, power-ups or missions, only distance. Coins and missions are what give long-term goals in commercial games.
• The record lasts while the page is open; it is not saved.

To modify it

• Change ACCELERATION and MAX_SPEED and note at what distance you usually crash. Which values make a run last about a minute?
• Gradually reduce the minimum reaction time between obstacles as the distance grows, and check that dodging them is still possible.
• Add coins in the air that give extra points, so you have to choose between playing safe and taking risks.

// Endless runner 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: [24, 26, 52],
  // One main button (jump) and an optional one (slide).
  buttons: {
    jump: { keyboard: ["space", "up", "w"] },
    slide: { keyboard: ["down", "s"] },
  },
});
touchControls(k, [
  { button: "slide", label: "▼" },
  { button: "jump", label: "⤒", side: "right" },
]);

const GROUND_Y = 300; // the top of the floor
const GRAVITY = 2200;
const JUMP_FORCE = 720;
const START_SPEED = 300; // pixels per second at the start
const MAX_SPEED = 760;
const ACCELERATION = 9; // speed gained every second
const PLAYER_X = 120;
setGravity(GRAVITY);

// The session record lives outside the scenes, so it survives restarts.
let best = 0;
// #endregion

scene("game", () => {
  let speed = START_SPEED;
  let distance = 0;

  // #region world
  // The player never moves forward: the world moves left at `speed`.
  // Background blocks move slower than the floor (parallax) to suggest depth.
  add([rect(width(), height() - GROUND_Y), pos(0, GROUND_Y), color(70, 80, 120), area(), body({ isStatic: true })]);
  for (let i = 0; i < 8; i++) {
    const h = rand(60, 160);
    add([rect(70, h), pos(i * 90, GROUND_Y - h), color(44, 48, 86), z(-1), "skyline"]);
  }
  for (let i = 0; i < 12; i++) add([rect(24, 4), pos(i * 60, GROUND_Y + 20), color(110, 120, 170), "stripe"]);
  onUpdate("skyline", (b) => {
    b.move(-speed * 0.25, 0);
    if (b.pos.x < -80) b.pos.x += 8 * 90;
  });
  onUpdate("stripe", (s) => {
    s.move(-speed, 0);
    if (s.pos.x < -30) s.pos.x += 12 * 60;
  });
  // #endregion

  // #region player
  const player = add([rect(28, 44), color(120, 210, 255), pos(PLAYER_X, GROUND_Y), anchor("bot"), area(), body(), "player"]);
  // #endregion

  // #region jump
  // A single button: press to jump, release early for a shorter jump.
  // Clicking or tapping anywhere works like the jump button.
  const jump = () => {
    if (player.isGrounded()) player.jump(JUMP_FORCE);
  };
  const cutJump = () => {
    if (player.vel.y < 0) player.vel.y *= 0.5;
  };
  onButtonPress("jump", jump);
  onButtonRelease("jump", cutJump);
  onMousePress(jump);
  onMouseRelease(cutJump);
  // #endregion

  // #region slide
  // Optional second action: hold to slide under flying obstacles.
  // In the air it makes you fall faster, so you can land sooner.
  player.onUpdate(() => {
    const sliding = isButtonDown("slide");
    player.height = sliding && player.isGrounded() ? 20 : 44;
    if (sliding && !player.isGrounded()) player.vel.y += 3000 * dt();
  });
  // #endregion

  // #region obstacles
  // Procedural generation: each new obstacle is chosen at random, and the gap
  // to the previous one depends on the speed. Measuring the gap in TIME
  // (seconds of reaction) keeps the game fair even when it is very fast.
  let nextGap = 0;
  function spawnObstacle() {
    if (chance(0.3) && distance > 300) {
      // Flying bar: jump over it with good timing or slide under it.
      add([rect(44, 22), pos(width(), GROUND_Y - 30), anchor("bot"), color(255, 120, 90), area(), "obstacle"]);
    } else {
      const w = choose([22, 30, 54]);
      const h = choose([30, 44, 56]);
      add([rect(w, h), pos(width(), GROUND_Y), anchor("bot"), color(255, 200, 80), area(), "obstacle"]);
    }
    const seconds = rand(0.9, 1.8); // reaction time until the next obstacle
    nextGap = seconds * speed;
  }
  let sinceLast = 0;
  onUpdate("obstacle", (o) => {
    o.move(-speed, 0);
    if (o.pos.x < -80) destroy(o);
  });
  onUpdate(() => {
    sinceLast += speed * dt();
    if (sinceLast >= nextGap) {
      spawnObstacle();
      sinceLast = 0;
    }
  });
  player.onCollide("obstacle", () => {
    shake(8);
    go("end", Math.floor(distance / 10));
  });
  // #endregion

  // #region difficulty
  // Difficulty grows on its own: the world speeds up every second, up to a cap.
  onUpdate(() => {
    speed = Math.min(MAX_SPEED, speed + ACCELERATION * dt());
    distance += speed * dt();
  });
  // #endregion

  // #region score
  // The score is the distance: one metre every 10 pixels.
  const hud = add([text("", { size: 18, font: FONT }), pos(16, 12), z(10)]);
  hud.onUpdate(() => {
    const metres = Math.floor(distance / 10);
    hud.text = t({ es: `Distancia: ${metres} m   Récord: ${best} m`, en: `Distance: ${metres} m   Best: ${best} m` });
  });
  // #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),
  ]);
  // A short pause stops a held key from skipping the screen.
  let ready = false;
  wait(0.4, () => (ready = true));
  const start = () => ready && next();
  onButtonPress("jump", start);
  onClick(start);
}

scene("title", () =>
  screen(
    t({ es: "Corredor sin fin", en: "Endless runner" }),
    t({
      es: "Corres solo. Espacio, flecha arriba o clic para saltar (mantén para saltar más alto).\nFlecha abajo para deslizarte. Llega lo más lejos que puedas.\nPulsa espacio o toca para empezar.",
      en: "You run on your own. Space, up arrow or click to jump (hold to jump higher).\nDown arrow to slide. Get as far as you can.\nPress space or tap to start.",
    }),
    () => go("game"),
  ),
);

scene("end", (metres) => {
  const record = metres > best;
  best = Math.max(best, metres);
  screen(
    record ? t({ es: "¡Nuevo récord!", en: "New record!" }) : t({ es: "Chocaste", en: "You crashed" }),
    t({
      es: `Distancia: ${metres} m. Récord de la sesión: ${best} m.\nPulsa espacio o toca para correr otra vez.`,
      en: `Distance: ${metres} m. Session best: ${best} m.\nPress space or tap to run again.`,
    }),
    () => go("game"),
  );
});

go("title");
// #endregion