How to make an idle game with AI

Ask for one resource, a button that earns it by hand, and generators that earn it on their own. Then be exact about the part that defines the genre. When the player closes the tab, save the time. When they open it again, read that saved time, subtract it from now, and multiply the elapsed seconds by the current rate. One calculation, no catching up.

Four steps to a loop worth leaving running#

Build an idle game as ONE self-contained .html file. No frameworks,
no images, no libraries.

THE LOOP: one resource called energy. A large button earns energy by
hand. Three generators earn energy per second on their own once they
have been bought, and the player can own many of each.

COST CURVE: every generator has a base price, and each purchase
multiplies that generator's own next price by GROWTH, a constant a
little above one. The energy each unit produces never changes. Show
the next price and the per-second gain the next unit would add.

NUMBER FORMAT: write one function that turns any amount into a short
string, one decimal place and a suffix for thousands, millions,
billions and further. Call it for every figure the player can see,
rates included. No raw total is ever printed.

OFFLINE PROGRESS: save the whole state plus the current timestamp to
localStorage, on a repeating timer and again when the page is hidden.
On load, read the saved timestamp, subtract it from the current time,
and add the rate multiplied by those elapsed seconds in one
calculation. Do not run the game loop to catch up. Treat a negative
gap as zero, since that happens when the system clock has moved back,
and credit no more than OFFLINE_CAP_HOURS worth.

WELCOME BACK: on load, a small panel saying how long they were away
and what it earned, with a button to collect.

CHART: a small canvas plotting energy per second over the recent past,
redrawn as the game runs.

PRESTIGE: once lifetime energy passes a threshold, offer a reset that
clears energy and generators and leaves a permanent multiplier behind.
Show what the reset is currently worth before it is taken.

SAFETY: wrap every read and write of localStorage in try and catch, so
a browser that refuses storage still runs. Store a version number with
the save and start fresh if it does not match.

Drive the click feedback and the chart redraw from the seconds elapsed
since the previous frame, never more than 0.05 at a time, so a tab
coming back from the background does not animate the whole gap.
Include canvas { touch-action: none; } in the stylesheet so tapping
the chart on a phone does not scroll the page. Keep GROWTH, the base
prices, the base outputs, OFFLINE_CAP_HOURS and the prestige
threshold together in one CONFIG object at the top, one commented line
each.

Offline progress is arithmetic, not a simulation#

An idle game is mostly played while it is closed. That makes the moment of return the most important screen in the thing, and the most common way to ruin it is to be too faithful to the loop.

Production in an idle game is a rate. Energy per second, derived from what the player owns. A rate multiplied by a duration is the amount, and that is true whether the duration was a second or a fortnight. So read the saved timestamp, take the difference, multiply once and credit the result. The work does not grow with the gap.

There is a design constraint hidden in that, and it is worth knowing before you add anything clever. The arithmetic only works while the rate can be worked out from the saved state. A mechanic that changes the rate partway through the absence breaks it. Random events, a boost that expires, a generator that upgrades itself at a milestone: each one turns a multiplication back into a simulation.

If you do want one of those, split the absence into the stretches where the rate was constant and multiply each one. Two or three segments is still arithmetic. Something that changes continuously is not, and it is usually not worth what it costs.

Numbers stop being readable sooner than you think#

Growth is the point, so the totals get large, and they get large faster than anyone expects on the first build. A figure wide enough to shove a button off the edge of a phone screen arrives in the first session.

Two details are worth insisting on. Keep exactly one decimal place, because a total that flickers between many digits is unreadable while it is moving. And format the rates with the same function as the totals, or you end up with a tidy figure above an untidy one and the panel looks half finished.

There is also a limit to how far plain numbers go at all. Once a value grows past what a double can hold exactly, the last digits stop meaning anything. That is fine for display, because nobody reads those digits anyway. It is not fine for comparisons, so keep prices and thresholds well inside the range where ordinary arithmetic is reliable.

One constant sets the whole pace#

Price each purchase as the previous price multiplied by a constant a little above one. That is the entire pacing system. Because prices multiply while income only adds, the time to afford the next unit creeps steadily upwards, which is exactly the shape the genre runs on.

One constant per generator, each in the config. This is the number to change when the game feels slow, and the only one.

A flat price is the mistake to watch for, because it looks reasonable and it is the default a model will sometimes pick. With a fixed price, income rises while the cost stays still, so the player buys everything available and then has nothing to do. The curve is what keeps the next thing just out of reach.

New generator tiers exist for the same reason. Each one starts the curve again from a cheap price with a bigger payoff. A player stuck on the slow part of one ladder is handed the fast part of the next. Prestige is that trick once more at the top level, trading everything owned for a multiplier that makes the early ladder quick.

What the save has to survive#

Offline progress means the save file is the game. It is also the part exposed to things outside your control, so it is worth asking for the awkward cases up front rather than finding them in a bug report.

• A clock that moved backwards. The difference between now and the saved time can come out negative, usually because the machine corrected its own clock. Treat anything negative as nothing earned, or the credit arrives as a negative total.
• A clock moved forwards on purpose. Some players will try it. A cap on how much offline time is credited keeps the reward worth returning for without making the clock a cheat code.
• Storage that refuses to work. A read or a write of local storage can throw, and in a private window it can come back empty. Wrap both in a try and a catch, and make sure a failure means playing without a save rather than a blank page.
• A save from an older version. Store a version number alongside the state. When it does not match what the code expects, start fresh instead of reading fields that are no longer there.
• Two tabs open at once. Both will write, and the last write wins, so one tab's progress disappears. Saving often and keeping the state small limits the damage, and it is a fair trade for a first build.

Show the collected amount rather than adding it quietly. A player who returns to a larger total than they left has to take your word for it. A panel naming how long they were away and what it earned is the one moment where the maths becomes visible, and it is the reason they come back again.

👆Idle and clicker games written by AI

‹ ›

Fable 5.1

163 plays👑 9

▶

Cookie Empire

Common questions#

Where to go next#

When you have caught yourself opening the tab to check on it, publish it. It gets a page recording the model and the prompt behind it, and other people can leave it running too.

The general method is in how to make a game with AI. If you want the growth to be something the player manages rather than only accumulates, the simulation guide is the next read. For a short session with the same low friction, try the casual guide. Prompts for common faults are in the prompt guide, and the idle games here are a short list worth adding to.