Create a central gameState object that tracks all game data.

A game needs a single source of truth — one object that holds all the data about what's happening right now. This is called "state." Every action in the game reads from or writes to this state object.
Ami — Combat Risk Engine

Ami's gameState includes:

  • xp (number) — current unbanked XP
  • banked (number) — safely stored XP
  • riskLevel (number) — danger multiplier
  • zone (string: "safe" or "danger") — current location
  • tier (number) — player progression tier
Ida — Economic Growth Engine

Ida's gameState includes:

  • karma (number) — currency earned from builds
  • debt (number) — borrowed funds with interest
  • tier (number) — player progression tier
  • zone (string: "on-lot" or "off-lot") — current location
  • activeJob (object or null) — current construction job
 // game/state.js — Shared pattern const gameState = { xp: 0, banked: 0, riskLevel: 1, zone: "safe", tier: 1 }; <!-- Add buttons to index.html --> <button id="btn-gain">Gain XP</button> <button id="btn-bank">Bank XP</button> <button id="btn-reset">Reset</button> // main.js — Wire buttons to state import { gameState } from './game/state.js'; document.getElementById('btn-gain').addEventListener('click', () => { gameState.xp += 10; console.log('State:', gameState); }); document.getElementById('btn-bank').addEventListener('click', () => { gameState.banked += gameState.xp; gameState.xp = 0; console.log('State:', gameState); }); document.getElementById('btn-reset').addEventListener('click', () => { gameState.xp = 0; gameState.banked = 0; gameState.riskLevel = 1; gameState.zone = "safe"; gameState.tier = 1; console.log('State reset:', gameState); });
  • Create gameState object in game/state.js
  • Add HTML buttons that modify state values
  • Console.log gameState after each button click
  • Verify state updates correctly
  • Add a "Reset" button that returns state to defaults
    •
    Checkpoint

    Clicking buttons updates state. Console shows correct values after each action.

    No rendering. No visuals. State is invisible — we see it only in the console. That is correct for today.

    Creating multiple state objects instead of one — there must be exactly one gameState. Everything reads from it.

    Forgetting to update the state before logging — always change the value first, then log.

    Not understanding that state is just a JavaScript object — it's a plain object with keys and values. Nothing magical.

    This is the most important architectural concept in the course. Spend extra time here. Ask: "If I asked you what the player's XP is, where would you look?" The answer must always be: "gameState." If they understand this, everything else flows from it.