Tutorial: Clicker Game

🗺️ The Architecture

Every tiny-loop game starts as a concept, then gets broken into a core loop, a systems list, and a structure — before anyone touches sprites or colors. Here's the Clicker Game's architecture:

The three systems, in order of execution on every click:

1. Click system — detects a click on the target sprite and fires once per click (not held down).
2. Score system — adds the current "click power" to the score, then checks the win condition.
3. Upgrade system — spends score on an upgrade that permanently increases click power, and raises the next upgrade's cost.

🎮 Play & Customize

Click the sprite to earn points. Buy the upgrade when you can afford it to earn more per click. Reach the score goal to win.

👀 Peek at the Code

The game running above is this code — nothing hidden. It's split into two parts on purpose: a small config object you just edited with the panel, and a locked engine that reads it.

const config = {
  target: '🍪',
  bg:     'space',
  upgradeCost: 10,
  winScore: 100
};

👆 This block updates live — hit "Apply & Restart" above and watch the exact values change here. There's no separate "demo" version of the code; this is it.

let score = 0, clickPower = 1, upgradeCost = config.upgradeCost;

target.addEventListener('click', () => {
  score += clickPower;                 // 1. click adds current power
  updateHUD();
  if (score >= config.winScore) endGame(true);  // 2. check win condition
});

upgradeBtn.addEventListener('click', () => {
  if (score < upgradeCost) return;   // can't afford it yet
  score -= upgradeCost;                // 3. spend score
  clickPower += 1;                  // permanently earn more per click
  upgradeCost = Math.round(upgradeCost * 1.6); // next one costs more
});

🛠️ Now Build It For Real

You've played a working Clicker Game and seen exactly how it's built. Next, build this same architecture yourself — twice, in two different tools.