Construcción y gestión

Una pequeña aldea con casas, campos de cultivo, granjas de ovejas y un mercado. Cada día se produce y se consume, y la población crece o se va según lo que hayas construido. Lo justo para ver un bucle de producción y consumo que se retroalimenta.

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

Cómo está hecha

1. Configuración

   Se crea el juego con un tamaño fijo y se definen la rejilla, cuánto dura un día en segundos (DAY_LENGTH) y la meta de aldeanos (GOAL). La duración del día marca el ritmo, porque con días más cortos el sistema reacciona antes y el jugador tiene menos tiempo para pensar.

   kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [24, 22, 30],
     // Played with the mouse or a finger; keys 1 to 4 are shortcuts.
     buttons: {
       start: { keyboard: ["space", "enter"] },
       pick1: { keyboard: ["1"] },
       pick2: { keyboard: ["2"] },
       pick3: { keyboard: ["3"] },
       pick4: { keyboard: ["4"] },
     },
   });
   
   const TILE = 40;
   const TOP = 40; // height of the resource bar
   const COLS = 10;
   const ROWS = 8;
   const DAY_LENGTH = 1.2; // seconds per day
   const GOAL = 25; // villagers needed to win

2. El catálogo de edificios

   Cada edificio de la lista BUILDINGS es un objeto de datos con nombre, coste, color, lo que hace y cuántas personas necesita. Separar los datos de la lógica permite equilibrar el juego cambiando números, sin tocar el resto del código.

   // The catalogue: what each building costs and what it produces every day.
   // The productive ones need 2 workers to run.
   const BUILDINGS = [
     { id: "house", name: t({ es: "Casa", en: "House" }), cost: 20, color: [196, 150, 110],
       effect: t({ es: "+4 de espacio; impuestos: 1 oro/día por cada 4 aldeanos", en: "+4 space; taxes: 1 gold/day per 4 villagers" }), workers: 0 },
     { id: "field", name: t({ es: "Campo de cultivo", en: "Crop field" }), cost: 10, color: [120, 170, 70],
       effect: t({ es: "+4 de comida al día", en: "+4 food a day" }), workers: 2 },
     { id: "farm", name: t({ es: "Granja de ovejas", en: "Sheep farm" }), cost: 15, color: [230, 225, 210],
       effect: t({ es: "+3 de lana al día", en: "+3 wool a day" }), workers: 2 },
     { id: "market", name: t({ es: "Mercado", en: "Market" }), cost: 30, color: [220, 90, 80],
       effect: t({ es: "vende hasta 6 de lana al día a 3 de oro", en: "sells up to 6 wool a day at 3 gold" }), workers: 2 },
   ];

3. El mapa y la construcción

   El mapa es una rejilla. Al hacer clic se calcula la casilla, se comprueba que esté libre y que alcance el oro, y se crea el edificio. La aldea empieza con una casa para que el primer día ya haya a quién alimentar.

   // A grid of land: clicking a free tile builds the selected building.
   for (let row = 0; row < ROWS; row++)
     for (let col = 0; col < COLS; col++)
       add([rect(TILE - 2, TILE - 2), pos(col * TILE + 1, TOP + row * TILE + 1), color((col + row) % 2 ? rgb(92, 120, 70) : rgb(98, 126, 74))]);
   const occupied = new Set();
   
   function build(type, col, row) {
     occupied.add(`${col},${row}`);
     const b = add([rect(TILE - 8, TILE - 8, { radius: 4 }), pos(col * TILE + TILE / 2, TOP + row * TILE + TILE / 2),
       anchor("center"), color(...type.color), opacity(1), { type }]);
     built.push(b);
   }
   build(BUILDINGS[0], 1, 1); // the village starts with one house
   
   onMousePress(() => {
     const m = mousePos();
     const col = Math.floor(m.x / TILE);
     const row = Math.floor((m.y - TOP) / TILE);
     const type = BUILDINGS[selected];
     if (col < 0 || col >= COLS || row < 0 || row >= ROWS || occupied.has(`${col},${row}`)) return;
     if (res.gold < type.cost) return notify(t({ es: "No alcanza el oro", en: "Not enough gold" }));
     res.gold -= type.cost;
     build(type, col, row);
     updateBar();
   });

4. El panel de recursos

   La barra superior muestra el día, los recursos, los aldeanos frente al espacio disponible y la meta. El panel lateral explica qué hace cada edificio. En este género el jugador decide leyendo números, así que mostrarlos con claridad es parte del diseño.

   // Side panel to pick a building and top bar with the resources:
   // a management player needs to see the numbers to decide.
   add([rect(width(), TOP), color(14, 12, 20)]);
   const bar = add([text("", { size: 14, font: FONT }), pos(10, 12)]);
   const notice = add([text("", { size: 14, font: FONT, width: 220 }), pos(410, 330), color(255, 210, 120)]);
   const notify = (s) => {
     notice.text = s;
     wait(1.5, () => notice.text === s && (notice.text = ""));
   };
   const buttons = BUILDINGS.map((type, i) => {
     const b = add([rect(222, 64, { radius: 4 }), pos(410, TOP + 6 + i * 70), color(40, 38, 52), area()]);
     b.add([rect(14, 14), pos(8, 8), color(...type.color)]);
     b.add([text(`${i + 1}. ${type.name} · ${type.cost} ${t({ es: "oro", en: "gold" })}`, { size: 13, font: FONT }), pos(28, 8)]);
     b.add([text(type.effect, { size: 12, font: FONT, width: 200 }), pos(10, 28), color(200, 200, 215)]);
     b.onClick(() => select(i));
     onButtonPress(`pick${i + 1}`, () => select(i));
     return b;
   });
   function select(i) {
     selected = i;
     buttons.forEach((b, j) => (b.color = j === i ? rgb(78, 74, 110) : rgb(40, 38, 52)));
   }
   select(1);
   
   const count = (id) => built.filter((b) => b.type.id === id).length;
   const capacity = () => count("house") * 4;
   function updateBar() {
     bar.text = `${t({ es: "Día", en: "Day" })} ${res.day}   ${t({ es: "Comida", en: "Food" })}: ${res.food}   ${t({ es: "Lana", en: "Wool" })}: ${res.wool}   ${t({ es: "Oro", en: "Gold" })}: ${res.gold}   ${t({ es: "Aldeanos", en: "Villagers" })}: ${res.people}/${capacity()}   ${t({ es: "Meta", en: "Goal" })}: ${GOAL}`;
   }
   updateBar();

5. El ciclo de producción

   Cada día se reparte a la gente entre los edificios, primero en los campos de cultivo y luego en el resto. Los que tienen personal producen y muestran un número flotante; los que no, se ven apagados. Así el jugador ve dónde falta mano de obra sin tener que leer el código.

   // Every day, staffed buildings produce and the village consumes.
   // Workers go to the fields first (no food, no village) and then to the
   // rest, in build order, until there is nobody left.
   function floatText(b, s) {
     add([text(s, { size: 13, font: FONT }), pos(b.pos.sub(10, 18)), color(255, 255, 255), opacity(1), lifespan(0.8, { fade: 0.5 }), move(UP, 30)]);
   }
   function produce() {
     let free = res.people;
     const isField = (b) => (b.type.id === "field" ? 1 : 0);
     const order = [...built].sort((a, b) => isField(b) - isField(a));
     for (const b of order) {
       const { id, workers } = b.type;
       if (workers === 0) continue;
       const active = free >= workers;
       b.opacity = active ? 1 : 0.35; // without workers, the building goes dim
       if (!active) continue;
       free -= workers;
       if (id === "field") (res.food += 4), floatText(b, "+4");
       if (id === "farm") (res.wool += 3), floatText(b, "+3");
       if (id === "market") {
         const sold = Math.min(6, res.wool);
         res.wool -= sold;
         res.gold += sold * 3;
         if (sold) floatText(b, `+${sold * 3}`);
       }
     }
   }

6. Población y retroalimentación

   Es el corazón del género: cada aldeano come una unidad de comida al día, paga un poco de impuestos y es mano de obra. Con comida de sobra y espacio en casa llega gente nueva; si falta comida, alguien se va. Crecer resuelve un problema (faltan trabajadores) y crea otro (faltan comida y casas). Los impuestos son un ingreso pequeño pero seguro: evitan que el jugador se quede atascado sin oro y sin forma de recuperarse.

   // The feedback loop: each villager eats one food a day. With spare food and
   // room in a house, someone new arrives (more hands to work, but also more
   // mouths to feed). If food runs out, someone leaves.
   function consume() {
     // Taxes: a small income that grows with the village, so you never get stuck at 0 gold.
     res.gold += Math.floor(res.people / 4);
     res.food -= res.people;
     if (res.food < 0) {
       res.food = 0;
       res.people--;
       notify(t({ es: "Falta comida: una familia se fue", en: "Not enough food: a family left" }));
     } else if (res.people < capacity() && res.food >= res.people) res.people++;
     else if (res.people >= capacity()) notify(t({ es: "Faltan casas para crecer", en: "You need more houses to grow" }));
   }
   loop(DAY_LENGTH, () => {
     produce();
     consume();
     res.day++;
     updateBar();
     if (res.people >= GOAL) go("end", true, res.day);
     else if (res.people <= 0) go("end", false, res.day);
   });

7. Escenas

   El juego tiene tres escenas (title, game y end) y go() salta de una a otra. Se gana al llegar a la meta de aldeanos y se pierde si la aldea se queda vacía.

   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(220, 210, 255),
     ]);
     onButtonPress("start", next);
     onClick(next);
   }
   
   scene("title", () =>
     screen(
       t({ es: "Una aldea que crece", en: "A growing village" }),
       t({
         es: `Elige un edificio en el panel y haz clic (o toca) en el mapa para construirlo.\nLos campos dan comida, las granjas dan lana y el mercado la vende.\nCada aldeano come 1 de comida al día y los edificios necesitan gente.\nLlega a ${GOAL} aldeanos. Haz clic o pulsa espacio para empezar.`,
         en: `Pick a building in the panel and click (or tap) the map to build it.\nFields give food, farms give wool and the market sells it.\nEach villager eats 1 food a day and buildings need workers.\nReach ${GOAL} villagers. Click or press space to start.`,
       }),
       () => go("game"),
     ),
   );
   
   scene("end", (won, day) =>
     screen(
       won ? t({ es: "¡La aldea prospera!", en: "The village thrives!" }) : t({ es: "La aldea se vació", en: "The village emptied out" }),
       t({ es: `Día ${day}. Haz clic para jugar otra vez.`, en: `Day ${day}. Click to play again.` }),
       () => go("game"),
     ),
   );
   
   go("title");

Qué simplificamos

• Solo hay tres recursos (comida, lana y oro) y cuatro edificios, sin caminos, distancias ni transporte.
• La gente se reparte sola entre los edificios y nadie envejece, enferma ni tiene preferencias.
• No se puede demoler, el terreno es todo igual y no hay clima ni estaciones.

Para modificarla

• Añade un huerto que produzca menos comida que el campo de cultivo pero cuya cosecha el mercado pueda vender cara.
• Haz que cada casa necesite un campo de cultivo a menos de dos casillas para poder crecer, y observa cómo cambia la forma de la aldea.
• Agrega estaciones, con una helada cada cierto número de días que reduzca la cosecha, y prueba si conviene guardar comida.
• Permite demoler edificios devolviendo la mitad de su coste.

// Construction and management demo
// 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: [24, 22, 30],
  // Played with the mouse or a finger; keys 1 to 4 are shortcuts.
  buttons: {
    start: { keyboard: ["space", "enter"] },
    pick1: { keyboard: ["1"] },
    pick2: { keyboard: ["2"] },
    pick3: { keyboard: ["3"] },
    pick4: { keyboard: ["4"] },
  },
});

const TILE = 40;
const TOP = 40; // height of the resource bar
const COLS = 10;
const ROWS = 8;
const DAY_LENGTH = 1.2; // seconds per day
const GOAL = 25; // villagers needed to win
// #endregion

// #region buildings
// The catalogue: what each building costs and what it produces every day.
// The productive ones need 2 workers to run.
const BUILDINGS = [
  { id: "house", name: t({ es: "Casa", en: "House" }), cost: 20, color: [196, 150, 110],
    effect: t({ es: "+4 de espacio; impuestos: 1 oro/día por cada 4 aldeanos", en: "+4 space; taxes: 1 gold/day per 4 villagers" }), workers: 0 },
  { id: "field", name: t({ es: "Campo de cultivo", en: "Crop field" }), cost: 10, color: [120, 170, 70],
    effect: t({ es: "+4 de comida al día", en: "+4 food a day" }), workers: 2 },
  { id: "farm", name: t({ es: "Granja de ovejas", en: "Sheep farm" }), cost: 15, color: [230, 225, 210],
    effect: t({ es: "+3 de lana al día", en: "+3 wool a day" }), workers: 2 },
  { id: "market", name: t({ es: "Mercado", en: "Market" }), cost: 30, color: [220, 90, 80],
    effect: t({ es: "vende hasta 6 de lana al día a 3 de oro", en: "sells up to 6 wool a day at 3 gold" }), workers: 2 },
];
// #endregion

scene("game", () => {
  // Village state: the resources and what has been built.
  const res = { day: 1, food: 8, wool: 0, gold: 80, people: 2 };
  const built = []; // in build order
  let selected = 0;

  // #region map
  // A grid of land: clicking a free tile builds the selected building.
  for (let row = 0; row < ROWS; row++)
    for (let col = 0; col < COLS; col++)
      add([rect(TILE - 2, TILE - 2), pos(col * TILE + 1, TOP + row * TILE + 1), color((col + row) % 2 ? rgb(92, 120, 70) : rgb(98, 126, 74))]);
  const occupied = new Set();

  function build(type, col, row) {
    occupied.add(`${col},${row}`);
    const b = add([rect(TILE - 8, TILE - 8, { radius: 4 }), pos(col * TILE + TILE / 2, TOP + row * TILE + TILE / 2),
      anchor("center"), color(...type.color), opacity(1), { type }]);
    built.push(b);
  }
  build(BUILDINGS[0], 1, 1); // the village starts with one house

  onMousePress(() => {
    const m = mousePos();
    const col = Math.floor(m.x / TILE);
    const row = Math.floor((m.y - TOP) / TILE);
    const type = BUILDINGS[selected];
    if (col < 0 || col >= COLS || row < 0 || row >= ROWS || occupied.has(`${col},${row}`)) return;
    if (res.gold < type.cost) return notify(t({ es: "No alcanza el oro", en: "Not enough gold" }));
    res.gold -= type.cost;
    build(type, col, row);
    updateBar();
  });
  // #endregion

  // #region panel
  // Side panel to pick a building and top bar with the resources:
  // a management player needs to see the numbers to decide.
  add([rect(width(), TOP), color(14, 12, 20)]);
  const bar = add([text("", { size: 14, font: FONT }), pos(10, 12)]);
  const notice = add([text("", { size: 14, font: FONT, width: 220 }), pos(410, 330), color(255, 210, 120)]);
  const notify = (s) => {
    notice.text = s;
    wait(1.5, () => notice.text === s && (notice.text = ""));
  };
  const buttons = BUILDINGS.map((type, i) => {
    const b = add([rect(222, 64, { radius: 4 }), pos(410, TOP + 6 + i * 70), color(40, 38, 52), area()]);
    b.add([rect(14, 14), pos(8, 8), color(...type.color)]);
    b.add([text(`${i + 1}. ${type.name} · ${type.cost} ${t({ es: "oro", en: "gold" })}`, { size: 13, font: FONT }), pos(28, 8)]);
    b.add([text(type.effect, { size: 12, font: FONT, width: 200 }), pos(10, 28), color(200, 200, 215)]);
    b.onClick(() => select(i));
    onButtonPress(`pick${i + 1}`, () => select(i));
    return b;
  });
  function select(i) {
    selected = i;
    buttons.forEach((b, j) => (b.color = j === i ? rgb(78, 74, 110) : rgb(40, 38, 52)));
  }
  select(1);

  const count = (id) => built.filter((b) => b.type.id === id).length;
  const capacity = () => count("house") * 4;
  function updateBar() {
    bar.text = `${t({ es: "Día", en: "Day" })} ${res.day}   ${t({ es: "Comida", en: "Food" })}: ${res.food}   ${t({ es: "Lana", en: "Wool" })}: ${res.wool}   ${t({ es: "Oro", en: "Gold" })}: ${res.gold}   ${t({ es: "Aldeanos", en: "Villagers" })}: ${res.people}/${capacity()}   ${t({ es: "Meta", en: "Goal" })}: ${GOAL}`;
  }
  updateBar();
  // #endregion

  // #region production
  // Every day, staffed buildings produce and the village consumes.
  // Workers go to the fields first (no food, no village) and then to the
  // rest, in build order, until there is nobody left.
  function floatText(b, s) {
    add([text(s, { size: 13, font: FONT }), pos(b.pos.sub(10, 18)), color(255, 255, 255), opacity(1), lifespan(0.8, { fade: 0.5 }), move(UP, 30)]);
  }
  function produce() {
    let free = res.people;
    const isField = (b) => (b.type.id === "field" ? 1 : 0);
    const order = [...built].sort((a, b) => isField(b) - isField(a));
    for (const b of order) {
      const { id, workers } = b.type;
      if (workers === 0) continue;
      const active = free >= workers;
      b.opacity = active ? 1 : 0.35; // without workers, the building goes dim
      if (!active) continue;
      free -= workers;
      if (id === "field") (res.food += 4), floatText(b, "+4");
      if (id === "farm") (res.wool += 3), floatText(b, "+3");
      if (id === "market") {
        const sold = Math.min(6, res.wool);
        res.wool -= sold;
        res.gold += sold * 3;
        if (sold) floatText(b, `+${sold * 3}`);
      }
    }
  }
  // #endregion

  // #region population
  // The feedback loop: each villager eats one food a day. With spare food and
  // room in a house, someone new arrives (more hands to work, but also more
  // mouths to feed). If food runs out, someone leaves.
  function consume() {
    // Taxes: a small income that grows with the village, so you never get stuck at 0 gold.
    res.gold += Math.floor(res.people / 4);
    res.food -= res.people;
    if (res.food < 0) {
      res.food = 0;
      res.people--;
      notify(t({ es: "Falta comida: una familia se fue", en: "Not enough food: a family left" }));
    } else if (res.people < capacity() && res.food >= res.people) res.people++;
    else if (res.people >= capacity()) notify(t({ es: "Faltan casas para crecer", en: "You need more houses to grow" }));
  }
  loop(DAY_LENGTH, () => {
    produce();
    consume();
    res.day++;
    updateBar();
    if (res.people >= GOAL) go("end", true, res.day);
    else if (res.people <= 0) go("end", false, res.day);
  });
  // #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(220, 210, 255),
  ]);
  onButtonPress("start", next);
  onClick(next);
}

scene("title", () =>
  screen(
    t({ es: "Una aldea que crece", en: "A growing village" }),
    t({
      es: `Elige un edificio en el panel y haz clic (o toca) en el mapa para construirlo.\nLos campos dan comida, las granjas dan lana y el mercado la vende.\nCada aldeano come 1 de comida al día y los edificios necesitan gente.\nLlega a ${GOAL} aldeanos. Haz clic o pulsa espacio para empezar.`,
      en: `Pick a building in the panel and click (or tap) the map to build it.\nFields give food, farms give wool and the market sells it.\nEach villager eats 1 food a day and buildings need workers.\nReach ${GOAL} villagers. Click or press space to start.`,
    }),
    () => go("game"),
  ),
);

scene("end", (won, day) =>
  screen(
    won ? t({ es: "¡La aldea prospera!", en: "The village thrives!" }) : t({ es: "La aldea se vació", en: "The village emptied out" }),
    t({ es: `Día ${day}. Haz clic para jugar otra vez.`, en: `Day ${day}. Click to play again.` }),
    () => go("game"),
  ),
);

go("title");
// #endregion