Plataformas

Un nivel corto con suelo, bloques, vacíos, monedas y enemigos que patrullan. Lo justo para sentir lo que define al género, que es saltar con precisión.

Hecha con Kaplay, en unas 149 líneas de JavaScript.

Cómo está hecha

1. Configuración y controles

   Se crea el juego con un tamaño fijo y se definen botones virtuales (left, right, jump). El resto del código pregunta por esos botones, así el mismo juego funciona con teclado o con pantalla táctil. Las constantes de gravedad, velocidad y salto son los números que más cambian la sensación del juego.

   const k = kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [30, 34, 72],
     // Virtual buttons: the game asks about "jump", not about a specific key.
     buttons: {
       left: { keyboard: ["left", "a"] },
       right: { keyboard: ["right", "d"] },
       jump: { keyboard: ["space", "up", "w"] },
     },
   });
   touchControls(k, [
     { button: "left", label: "◀" },
     { button: "right", label: "▶" },
     { button: "jump", label: "⤒", side: "right" },
   ]);
   
   const GRAVITY = 1600;
   const SPEED = 220;
   const JUMP_FORCE = 620;
   const COYOTE_TIME = 0.1; // seconds you can still jump after leaving a ledge
   const JUMP_BUFFER = 0.12; // seconds a jump pressed before landing is "remembered"
   const TILE = 32;
   setGravity(GRAVITY);

2. El nivel como texto

   El nivel es una lista de cadenas; cada carácter se convierte en un objeto con addLevel. Diseñar niveles así es rápido y permite que cualquiera los modifique sin herramientas.

   // The level is a text drawing: each character is a kind of tile.
   // = ground · # block · o coin · e enemy · F flag
   const MAP = [
     "                                                   ",
     "                                                   ",
     "                                          o o      ",
     "                      o o                ###       ",
     "                     #####       o             F   ",
     "           o o                  ###       e    #   ",
     "          #####        e                 ####  #   ",
     "    o           ######====    ====   e   ====  #   ",
     "=========   ======        ====    ======   ========",
     "=========   ======        ====    ======   ========",
   ];
   
   function solidTile(c) {
     return [rect(TILE, TILE), color(c), area(), body({ isStatic: true }), "solid"];
   }
   
   function buildLevel() {
     return addLevel(MAP, {
       tileWidth: TILE,
       tileHeight: TILE,
       tiles: {
         "=": () => solidTile(rgb(84, 160, 92)),
         "#": () => solidTile(rgb(176, 120, 72)),
         o: () => [circle(8), color(255, 205, 60), pos(16, 16), area(), anchor("center"), "coin"],
         e: () => [rect(28, 24), color(220, 70, 60), pos(2, 8), area(), body(), { dir: -1 }, "enemy"],
         F: () => [rect(8, 64), color(240, 240, 255), pos(12, -32), area(), "flag"],
       },
     });
   }

3. El jugador

   El jugador tiene area() para chocar y body() para que le afecte la gravedad. Moverse es aplicar una velocidad horizontal mientras se mantiene un botón.

   const player = add([rect(24, 32), color(120, 200, 255), pos(64, 160), area(), body(), anchor("bot"), "player"]);
   
   // Horizontal movement: constant speed while the button is held.
   onButtonDown("left", () => player.move(-SPEED, 0));
   onButtonDown("right", () => player.move(SPEED, 0));

4. El salto

   Es la mecánica del género, y tres trucos la hacen sentir justa. El «tiempo de coyote» deja saltar una décima de segundo después de salir del borde. El búfer de salto hace lo contrario: si pulsas saltar un instante antes de tocar el suelo, el juego recuerda la orden y saltas justo al aterrizar, en vez de ignorarte. Y el salto variable corta la subida si sueltas el botón. Los dos primeros perdonan errores de unas centésimas que el jugador no siente como suyos.

   // Jumping is THE mechanic of the genre. Three details make it feel right:
   // 1) coyote time: you can still jump a moment after leaving a ledge;
   // 2) jump buffer: press just before landing and the jump happens on landing;
   // 3) variable height: release the button early for a shorter jump.
   let airTime = 0;
   let bufferedJump = 0; // time left on a jump that was pressed but not done yet
   function tryJump() {
     if (bufferedJump > 0 && airTime < COYOTE_TIME) {
       player.jump(JUMP_FORCE);
       airTime = 1;
       bufferedJump = 0;
       // If the button was already released (buffered jump), make it a short one.
       if (!isButtonDown("jump")) player.vel.y *= 0.45;
     }
   }
   player.onUpdate(() => {
     airTime = player.isGrounded() ? 0 : airTime + dt();
     bufferedJump = Math.max(0, bufferedJump - dt());
     tryJump();
   });
   onButtonPress("jump", () => {
     bufferedJump = JUMP_BUFFER;
     tryJump();
   });
   onButtonRelease("jump", () => {
     if (player.vel.y < 0) player.vel.y *= 0.45;
   });

5. Enemigos que patrullan

   Cada enemigo avanza y gira cuando choca con un bloque o cuando no hay suelo delante. La colisión decide el resultado, porque pisarlo desde arriba lo elimina y tocarlo de lado te hace perder.

   // They patrol back and forth, turning at a wall or at the edge of a platform.
   for (const e of level.get("enemy")) {
     e.onUpdate(() => {
       e.move(e.dir * 60, 0);
       const ahead = e.pos.add(level.pos).add(e.dir > 0 ? 30 : -2, 30);
       const groundAhead = level.get("solid").some((s) => s.hasPoint(ahead));
       if (!groundAhead) e.dir *= -1;
     });
     e.onCollide("solid", (_, col) => {
       if (col.isLeft() || col.isRight()) e.dir *= -1;
     });
   }
   // Stomping an enemy from above destroys it; touching it from the side loses.
   player.onCollide("enemy", (e, col) => {
     if (col.isBottom()) {
       destroy(e);
       player.jump(JUMP_FORCE * 0.6);
     } else {
       go("end", false, coins, totalCoins);
     }
   });

6. Monedas y meta

   Las monedas son el coleccionable que invita a tomar rutas más arriesgadas. El marcador muestra cuántas llevas del total del nivel, así sabes si te dejaste alguna. La bandera termina el nivel.

   player.onCollide("coin", (c) => {
     destroy(c);
     coins++;
     updateHud();
   });
   player.onCollide("flag", () => go("end", true, coins, totalCoins));

7. La cámara

   La cámara sigue al jugador en horizontal sin salirse de los bordes del nivel. Caer por debajo de la pantalla cuenta como perder.

   // The camera follows the player horizontally; falling into a pit loses.
   const levelWidth = MAP[0].length * TILE;
   player.onUpdate(() => {
     const x = Math.min(Math.max(player.pos.x, width() / 2), levelWidth - width() / 2);
     camPos(x, height() / 2);
     if (player.pos.y > height() + 200) go("end", false, coins, totalCoins);
   });

8. Escenas

   El juego tiene tres escenas (title, game y end) y go() salta de una a otra. Así se reinicia el nivel sin tener que limpiar nada a mano.

   function screen(title, subtitle, next) {
     add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 30)), anchor("center")]);
     add([
       text(subtitle, { size: 16, font: FONT, align: "center", width: 520 }),
       pos(center().add(0, 30)),
       anchor("center"),
       color(200, 210, 255),
     ]);
     onButtonPress("jump", next);
     onClick(next);
   }
   
   scene("title", () =>
     screen(
       t({ es: "Plataformas", en: "Platformer" }),
       t({
         es: "Flechas para moverte, espacio para saltar. Llega a la bandera.\nPulsa espacio o toca para empezar.",
         en: "Arrows to move, space to jump. Reach the flag.\nPress space or tap to start.",
       }),
       () => go("game"),
     ),
   );
   
   scene("end", (won, coins, total) =>
     screen(
       won ? t({ es: "¡Llegaste!", en: "You made it!" }) : t({ es: "Inténtalo otra vez", en: "Try again" }),
       t({
         es: `Monedas: ${coins}/${total}. Pulsa espacio para repetir.`,
         en: `Coins: ${coins}/${total}. Press space to play again.`,
       }),
       () => go("game"),
     ),
   );
   
   go("title");

Qué simplificamos

• El personaje y los bloques son rectángulos; no hay animaciones ni sonido.
• Un solo nivel, sin vidas ni puntos de control.
• El movimiento horizontal es a velocidad constante, sin inercia; acelerar y frenar poco a poco queda como ejercicio.

Para modificarla

• Agrega un segundo salto en el aire (doble salto) y piensa cómo cambia el diseño del nivel.
• Haz que el jugador acelere y frene poco a poco en lugar de moverse a velocidad constante.
• Añade pinchos (un nuevo carácter en el mapa) que hagan perder al tocarlos.

// Platformer 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: [30, 34, 72],
  // Virtual buttons: the game asks about "jump", not about a specific key.
  buttons: {
    left: { keyboard: ["left", "a"] },
    right: { keyboard: ["right", "d"] },
    jump: { keyboard: ["space", "up", "w"] },
  },
});
touchControls(k, [
  { button: "left", label: "◀" },
  { button: "right", label: "▶" },
  { button: "jump", label: "⤒", side: "right" },
]);

const GRAVITY = 1600;
const SPEED = 220;
const JUMP_FORCE = 620;
const COYOTE_TIME = 0.1; // seconds you can still jump after leaving a ledge
const JUMP_BUFFER = 0.12; // seconds a jump pressed before landing is "remembered"
const TILE = 32;
setGravity(GRAVITY);
// #endregion

// #region level
// The level is a text drawing: each character is a kind of tile.
// = ground · # block · o coin · e enemy · F flag
const MAP = [
  "                                                   ",
  "                                                   ",
  "                                          o o      ",
  "                      o o                ###       ",
  "                     #####       o             F   ",
  "           o o                  ###       e    #   ",
  "          #####        e                 ####  #   ",
  "    o           ######====    ====   e   ====  #   ",
  "=========   ======        ====    ======   ========",
  "=========   ======        ====    ======   ========",
];

function solidTile(c) {
  return [rect(TILE, TILE), color(c), area(), body({ isStatic: true }), "solid"];
}

function buildLevel() {
  return addLevel(MAP, {
    tileWidth: TILE,
    tileHeight: TILE,
    tiles: {
      "=": () => solidTile(rgb(84, 160, 92)),
      "#": () => solidTile(rgb(176, 120, 72)),
      o: () => [circle(8), color(255, 205, 60), pos(16, 16), area(), anchor("center"), "coin"],
      e: () => [rect(28, 24), color(220, 70, 60), pos(2, 8), area(), body(), { dir: -1 }, "enemy"],
      F: () => [rect(8, 64), color(240, 240, 255), pos(12, -32), area(), "flag"],
    },
  });
}
// #endregion

scene("game", () => {
  const level = buildLevel();
  let coins = 0;
  const totalCoins = level.get("coin").length;
  const hud = add([text("", { size: 18, font: FONT }), pos(16, 12), fixed(), z(10)]);
  const updateHud = () => (hud.text = t({ es: "Monedas: ", en: "Coins: " }) + `${coins}/${totalCoins}`);
  updateHud();

  // #region player
  const player = add([rect(24, 32), color(120, 200, 255), pos(64, 160), area(), body(), anchor("bot"), "player"]);

  // Horizontal movement: constant speed while the button is held.
  onButtonDown("left", () => player.move(-SPEED, 0));
  onButtonDown("right", () => player.move(SPEED, 0));
  // #endregion

  // #region jump
  // Jumping is THE mechanic of the genre. Three details make it feel right:
  // 1) coyote time: you can still jump a moment after leaving a ledge;
  // 2) jump buffer: press just before landing and the jump happens on landing;
  // 3) variable height: release the button early for a shorter jump.
  let airTime = 0;
  let bufferedJump = 0; // time left on a jump that was pressed but not done yet
  function tryJump() {
    if (bufferedJump > 0 && airTime < COYOTE_TIME) {
      player.jump(JUMP_FORCE);
      airTime = 1;
      bufferedJump = 0;
      // If the button was already released (buffered jump), make it a short one.
      if (!isButtonDown("jump")) player.vel.y *= 0.45;
    }
  }
  player.onUpdate(() => {
    airTime = player.isGrounded() ? 0 : airTime + dt();
    bufferedJump = Math.max(0, bufferedJump - dt());
    tryJump();
  });
  onButtonPress("jump", () => {
    bufferedJump = JUMP_BUFFER;
    tryJump();
  });
  onButtonRelease("jump", () => {
    if (player.vel.y < 0) player.vel.y *= 0.45;
  });
  // #endregion

  // #region enemies
  // They patrol back and forth, turning at a wall or at the edge of a platform.
  for (const e of level.get("enemy")) {
    e.onUpdate(() => {
      e.move(e.dir * 60, 0);
      const ahead = e.pos.add(level.pos).add(e.dir > 0 ? 30 : -2, 30);
      const groundAhead = level.get("solid").some((s) => s.hasPoint(ahead));
      if (!groundAhead) e.dir *= -1;
    });
    e.onCollide("solid", (_, col) => {
      if (col.isLeft() || col.isRight()) e.dir *= -1;
    });
  }
  // Stomping an enemy from above destroys it; touching it from the side loses.
  player.onCollide("enemy", (e, col) => {
    if (col.isBottom()) {
      destroy(e);
      player.jump(JUMP_FORCE * 0.6);
    } else {
      go("end", false, coins, totalCoins);
    }
  });
  // #endregion

  // #region coins-goal
  player.onCollide("coin", (c) => {
    destroy(c);
    coins++;
    updateHud();
  });
  player.onCollide("flag", () => go("end", true, coins, totalCoins));
  // #endregion

  // #region camera
  // The camera follows the player horizontally; falling into a pit loses.
  const levelWidth = MAP[0].length * TILE;
  player.onUpdate(() => {
    const x = Math.min(Math.max(player.pos.x, width() / 2), levelWidth - width() / 2);
    camPos(x, height() / 2);
    if (player.pos.y > height() + 200) go("end", false, coins, totalCoins);
  });
  // #endregion
});

// #region scenes
function screen(title, subtitle, next) {
  add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 30)), anchor("center")]);
  add([
    text(subtitle, { size: 16, font: FONT, align: "center", width: 520 }),
    pos(center().add(0, 30)),
    anchor("center"),
    color(200, 210, 255),
  ]);
  onButtonPress("jump", next);
  onClick(next);
}

scene("title", () =>
  screen(
    t({ es: "Plataformas", en: "Platformer" }),
    t({
      es: "Flechas para moverte, espacio para saltar. Llega a la bandera.\nPulsa espacio o toca para empezar.",
      en: "Arrows to move, space to jump. Reach the flag.\nPress space or tap to start.",
    }),
    () => go("game"),
  ),
);

scene("end", (won, coins, total) =>
  screen(
    won ? t({ es: "¡Llegaste!", en: "You made it!" }) : t({ es: "Inténtalo otra vez", en: "Try again" }),
    t({
      es: `Monedas: ${coins}/${total}. Pulsa espacio para repetir.`,
      en: `Coins: ${coins}/${total}. Press space to play again.`,
    }),
    () => go("game"),
  ),
);

go("title");
// #endregion