Construction and management simulation

A small village with houses, crop fields, sheep farms and a market. Every day things are produced and consumed, and the population grows or leaves depending on what you have built. Just enough to see a self-reinforcing loop of production and consumption.

Made with Kaplay, in about 156 lines of JavaScript.

How it's made

1. Setup

   The game is created at a fixed size and the grid, the length of a day in seconds (DAY_LENGTH) and the population goal (GOAL) are defined. Day length sets the pace, because with shorter days the system reacts sooner and the player has less time to think.

   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. The building catalogue

   Each building in the BUILDINGS list is a data object with a name, cost, colour, what it does and how many workers it needs. Separating data from logic lets you balance the game by changing numbers without touching the rest of the code.

   // 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. The map and building

   The map is a grid. On a click the tile is worked out, the code checks that it is free and affordable, and the building is created. The village starts with one house so there is someone to feed from day one.

   // 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. The resource panel

   The top bar shows the day, the resources, villagers against available space and the goal. The side panel explains what each building does. In this genre the player decides by reading numbers, so showing them clearly is part of the design.

   // 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. The production cycle

   Each day people are shared out among the buildings, crop fields first and then the rest. Staffed buildings produce and show a floating number; unstaffed ones look dimmed. This way the player sees where labour is short without reading the code.

   // 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. Population and feedback

   This is the heart of the genre: each villager eats one unit of food a day, pays a little in taxes and is labour. With spare food and room at home, new people arrive; if food runs out, someone leaves. Growing solves one problem (not enough workers) and creates another (not enough food and houses). Taxes are a small but steady income: they keep the player from getting stuck with no gold and no way to recover.

   // 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. Scenes

   The game has three scenes, title, game and end, and go() jumps between them. You win by reaching the population goal and lose if the village empties out.

   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");

What we simplified

• There are only three resources (food, wool and gold) and four buildings, with no roads, distances or transport.
• People are assigned to buildings automatically and nobody ages, gets ill or has preferences.
• You cannot demolish, all the land is the same and there is no weather or seasons.

To modify it

• Add a vegetable garden that produces less food than the crop field but whose harvest the market can sell at a high price.
• Make each house need a crop field within two tiles in order to grow, and watch how the shape of the village changes.
• Add seasons, with a frost every few days that reduces the harvest, and test whether it pays to store food.
• Allow demolishing buildings for half their cost back.

// 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