Create a central gameState object that tracks all game data.

Before we write the most important object in your game, let's understand what "state" means. Watch one or both of these:

Video 1: JavaScript Objects Explained — Programming with Mosh (5 min)

Clear, beginner-friendly explanation of JavaScript objects — the building block your entire game state is built on. Watch how keys and values work together.

Video 2: JavaScript in 100 Seconds — Fireship (2 min)

Quick refresher on JavaScript itself — what it can do and why it's the language of the web. If yesterday's coding felt unfamiliar, this will help.

Discussion after watching: If your game was a person, what would it need to "remember"? Its score? Its health? Where the player is? All of that goes in one object called gameState.

State = everything the game needs to remember right now.

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.

Without State With State
Score is in one variable, health in another, zone in a third Everything lives in gameState
Hard to find bugs — which variable is wrong? One place to look: console.log(gameState)
Different parts of the code might disagree about the score Everyone reads from the same object — no disagreements

The Golden Rule: If you want to know anything about the game, the answer is in gameState. Always. No exceptions.
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

Open your browser's console (F12 → Console tab) and type each line one at a time. Press Enter after each one.

Step 1: Create an object

let player = { name: "Hero", xp: 0, level: 1 };

Step 2: Read values

player.name player.xp player.level

Step 3: Change values

player.xp = 100; player.xp player.level = 2; player

Step 4: Add new values

player.zone = "danger"; player

Step 5: Now try YOUR game's state

let gameState = { xp: 0, banked: 0, zone: "safe", tier: 1 }; gameState.xp = 50; gameState

Challenge: Type gameState.xp += 10 five times. What is gameState.xp now? If you said 100, you understand state. The object remembers everything you do to it.

 // 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); });
  • Watch at least one video about JavaScript objects and discuss
  • Complete the Console Playground activity (all 5 steps)
  • Create gameState object in game/state.js with all properties for your game
  • Add HTML buttons (Gain, Bank, Reset) to index.html
  • Wire buttons to modify gameState in main.js
  • Console.log gameState after each button click to verify
  • 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. If the kids only understand one thing today, it should be: "All game data lives in one object."

    The Console Playground activity is crucial. Let them type in the browser console freely — there's nothing they can break. If they get curious and try things not in the instructions, encourage it. That's exploration.

    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.

    Common confusion: kids might think buttons DO things. They don't — buttons CHANGE STATE, and later we'll make the screen SHOW state. Today, the console is how we see that state changed. This is a deliberate separation.

    If a child asks "but when do we see it on screen?" — great question! Tell them: "Tomorrow. Today we prove the brain works. Tomorrow we give it a face."

    Looking ahead: Tomorrow we wire buttons to this state and make a playable text game. You'll play through 3 full loops of your game using just buttons and console messages.