How to Build an Idle Clicker Game — Make an Idle Game with JavaScript

What you will learn

Chick Clicker is a Cookie Clicker style idle game in which tapping and buildings keep growing your flock of chicks. With almost no artwork, it hooks players on the pure satisfaction of numbers snowballing — which makes it an ideal subject for studying game design.

The basic loop: increase a count on tap and reflect it on screen
The exponential 1.15x price formula that makes everything pricier as you buy
The heart of an idle game: producing every second with setInterval
How to save with localStorage and pay back offline earnings

Step 1: Grow chicks by tapping

The smallest possible clicker game is one variable plus one button. Hold the chick count in a variable, add to it when tapped, and redraw.

var chicks = 0;     // chicks held
var lifetime = 0;   // lifetime total (used to unlock buildings)

stage.addEventListener('pointerdown', function (e) {
  chicks += 1;
  lifetime += 1;
  updateHud();      // redraw the numbers on screen
});

The trick is to listen for pointerdown rather than click. A click only fires when the finger lifts, which feels a beat late in a game built on rapid tapping. Tilting the chick with a small animation and floating a "+1" upward on every tap transforms how the game feels in the hand.

Step 2: Add buildings and the 1.15x price formula

Spending chicks on buildings such as the Mother Hen and the Nest Box makes the flock grow every second without any tapping. Defining the buildings as an array of objects keeps adding new ones easy.

var BUILDINGS = [
  { key: 'chick', name: 'Mother Hen', base: 15,   cps: 0.1 },
  { key: 'nest',  name: 'Nest Box',   base: 100,  cps: 1 },
  { key: 'coop',  name: 'Chicken Coop', base: 1100, cps: 8 }
  // ...eight kinds in total
];

// Price: 1.15x more expensive with every purchase (rounded up)
function buildingCost(base, owned) {
  return Math.ceil(base * Math.pow(1.15, owned));
}

// Production per second (cps): the sum of owned x per-unit cps
function calcCps(buildings) {
  var total = 0;
  BUILDINGS.forEach(function (b) {
    total += b.cps * (buildings[b.key] || 0);
  });
  return total;
}

That exponential increase, 1.15^owned, is the balancing core of the whole genre. A cheap building is strong at first but quickly becomes poor value, which naturally creates the rhythm of saving up for the next building. Idle games all over the world, starting with Cookie Clicker, use this same "x1.15".

Step 3: Build the production loop and saving

The heart of an idle game is a loop that keeps growing the flock every second. Use setInterval here, not requestAnimationFrame: rAF stops as soon as the tab moves to the background, which makes it a poor fit for idle games.

var lastFrame = Date.now();
setInterval(function () {
  var now = Date.now();
  var dt = (now - lastFrame) / 1000;   // seconds since the last tick
  lastFrame = now;
  chicks += cps * dt;                  // add based on real elapsed time
  lifetime += cps * dt;
  updateHud();
}, 100);

// Save (every ten seconds and on every purchase)
function saveGame() {
  localStorage.setItem('chick-clicker-save', JSON.stringify({
    chicks: chicks, lifetime: lifetime, buildings: buildings,
    lastTick: Date.now()
  }));
}

On load, the gap between the stored lastTick and the current time tells you how long the player was away. Handing them elapsed x cps x 50% (capped at 8 hours) with a "Welcome back!" message is what makes them want to open the game again tomorrow.

Wrap-up — where to go next

Nice work! You now have the three essentials of an idle game: the basic tap loop, the 1.15x price formula, and a setInterval production loop with saving. To take it further, try adding upgrades that triple a building's cps, a rebirth system that boosts all production, or a background that grows as the lifetime total rises. Checking your number balance in a spreadsheet is a real part of game development too.

Frequently asked questions

Q: Can a complete beginner build this?

A: Yes. There is almost no drawing code, which makes this an ideal project for practising variables and functions. If you get stuck, you can always ask at a HinaTech class.

Q: How long does it take?

A: A minimal tap-to-grow version takes about 30 minutes, an hour with buildings and the price formula, and around an hour and a half once saving and offline earnings are included.