Build a Clicker Game

An idle incremental game with upgrades, currencies, and persistent save states

Clicker games are deceptively simple to describe and endlessly engaging to play. The loop is always the same: click to earn, spend to automate, automate to earn faster, repeat. This lesson gives you the complete prompt to build a fully featured clicker game with your own theme, your own currency, and a save system that keeps progress between sessions.

Why Clicker Games Work So Well

Clicker games produce compounding engagement. The player starts by doing something manually. Then they automate it. Then they optimise the automation. Each layer adds a new decision and a new reason to come back.

For communities and products this is useful. A clicker game built around your brand, your terminology, and your audience creates an experience that is both entertaining and reinforcing. People who play a Claude Code themed clicker game think about Claude Code while they play.

How Clicker Games Work Technically

The core mechanic is a currency counter that increases over time. The player can click to add currency manually. Generators add currency automatically at a fixed rate per second. Upgrades multiply the rate of either clicking or generators.

The game loop for a clicker game does not need to run at 60fps. It uses setInterval to tick every 100ms and adds the appropriate amount of currency per tick. The display updates every tick to show the current count.

The save system runs automatically every 30 seconds and on the window beforeunload event, serialising the entire game state to localStorage.

The Complete Clicker Game Prompt

Copy this prompt, customise the theme and content, and send it.

Build me a complete clicker idle game. Follow all design rules in @CLAUDE.md.

FILES:

Three files only: index.html, style.css, main.js.

No external libraries. No npm. No build tools.

All JavaScript in main.js. All CSS in style.css. Zero inline styles.

GAME TYPE: Clicker and Idle Game
THEME:

[DESCRIBE YOUR THEME — e.g. "A coffee shop empire where you click to brew coffee

and buy upgrades to automate production" or "A Claude Code studio where you generate

prompts and buy AI tools to automate your workflow"]

CURRENCY NAME: [WHAT THE PLAYER EARNS — e.g. "Coffees", "Prompts", "Coins", "Stars"]
CURRENCY SYMBOL: [OPTIONAL ICON OR EMOJI — e.g. ☕ or ✨ or just leave blank]
CORE MECHANIC:
Clicking the main button earns [CURRENCY] equal to the current click power.

Click power starts at 1 and can be upgraded.

Generators earn [CURRENCY] automatically per second based on their count and rate.

The total earnings per second is shown as "[X] per second" below the currency count.

GENERATORS (buy these to automate earnings — create 5 to 8):

Define each generator with a name, base cost, base income per second, and flavour text.

Generator 1:

Name: [NAME — e.g. "Intern" or "Basic Script" or "Espresso Machine"]

Base cost: 10

Income per second: 0.1

Description: [ONE LINE OF FLAVOUR TEXT]

Generator 2:

Name: [NAME]

Base cost: 100

Income per second: 0.5

Description: [ONE LINE]

Generator 3:

Name: [NAME]

Base cost: 500

Income per second: 2

Description: [ONE LINE]

Generator 4:

Name: [NAME]

Base cost: 2000

Income per second: 8

Description: [ONE LINE]

Generator 5:

Name: [NAME]

Base cost: 10000

Income per second: 30

Description: [ONE LINE]

Generator 6:

Name: [NAME — most powerful]

Base cost: 50000

Income per second: 120

Description: [ONE LINE]
COST SCALING:

Each generator purchase increases the cost of the next one by this formula:

• nextCost = Math.ceil(baseCost multiplied by 1.15 to the power of totalOwned)
• This means the first purchase costs the base cost, the second costs 15 percent more,
• the third costs 15 percent more than that, and so on.

UPGRADES (one-time purchases that multiply earnings — create 8 to 12):

Each upgrade is purchased once and permanently changes something.

Upgrade 1:

Name: [NAME]

Cost: [COST — e.g. 50]

Effect: [WHAT IT DOES — e.g. "Doubles click power" or "Doubles Generator 1 income"]

Unlock condition: [WHEN IT APPEARS — e.g. "After buying 1 Generator 1"]

Upgrade 2:

Name: [NAME]
Cost: [COST]
Effect: [EFFECT]

Unlock condition: [CONDITION — e.g. "After buying 5 Generator 1"]

Upgrade 3:

Name: [NAME]
Cost: [COST]

Effect: Doubles Generator 2 income

Unlock condition: After buying 1 Generator 2

Upgrade 4:

Name: [NAME]
Cost: [COST]

Effect: Click power multiplied by 3

Unlock condition: Total lifetime [CURRENCY] earned exceeds 500

Upgrade 5:

Name: [NAME]
Cost: [COST]

Effect: All generator income multiplied by 2

Unlock condition: Owning at least 10 of any single generator

[ADD MORE UPGRADES AS NEEDED — 8 to 12 total recommended]

MILESTONES AND NOTIFICATIONS:

Show a brief notification toast when the player hits these milestones:

- First 100 [CURRENCY] earned: "[CONGRATULATORY MESSAGE]"
- First generator purchased: "[ENCOURAGING MESSAGE]"
- First upgrade purchased: "[MESSAGE]"
- 1000 [CURRENCY] earned: "[MESSAGE]"
- 10000 [CURRENCY] earned: "[MESSAGE]"

Each toast appears for 3 seconds then fades out. Show only one at a time.

DISPLAY FORMAT:

Show large numbers in a readable abbreviated format:

• Under 1000: show the exact number
• 1000 to 999999: show as Xk with one decimal — e.g. 12.4k
• 1000000 to 999999999: show as Xm with one decimal — e.g. 3.7m
• 1 billion and above: show as Xb — e.g. 1.2b

Apply this format to: current currency, lifetime earned, cost of generators, and per-second rate.

LAYOUT:

The game has two panels side by side on desktop and stacked on mobile.

Left panel (main interaction):

- Current [CURRENCY] count in very large text at the top

• Per second rate below in smaller text
• The main click button — large, prominent, themed to the game
• A progress bar showing progress toward the next milestone

Right panel (shop):

• Two tabs: Generators and Upgrades
• Generators tab: list of all 6 generators, each showing name, description,

owned count, cost, and an enabled or disabled Buy button

• Upgrades tab: list of unlocked but not yet purchased upgrades

Purchased upgrades are shown in a faded completed state

SAVE SYSTEM:

Auto-save to localStorage every 30 seconds.

Also save on window beforeunload event.

localStorage key: "[your-game-name]-save"

Save the complete game state as a JSON string including:

• currency, lifetimeEarned, clickPower, generatorCounts array,
• purchasedUpgrades array, totalClicks, playTimeSeconds

On page load:

Check for a saved game. If one exists, load it and show a notification:

"Welcome back! You earned [X CURRENCY] while you were away."

Calculate offline earnings: multiply the per-second rate at time of save by the

number of seconds the game was closed up to a maximum of 4 hours offline earnings.

Add the offline earnings to the current currency.

Add a "Reset Game" button in the settings or footer area.

When clicked show a confirmation: "Are you sure? All progress will be lost."

If confirmed clear the localStorage save and reload the page.

GAME LOOP:

Use setInterval with 100ms intervals for the main tick.

Each tick: add perSecondRate divided by 10 to the currency count.

Update the display every tick.

Increment playTimeSeconds every 10 ticks which is every 1 second.

Auto-save every 300 ticks which is every 30 seconds.

SOUND:

Use the Web Audio API with no audio files.

• Click: a satisfying short click sound at 440hz for 50ms with slight pitch variation

each click so it never sounds exactly the same twice

• Purchase generator: a deeper satisfying tone at 330hz for 120ms
• Purchase upgrade: a special chime sequence at 523hz then 659hz then 784hz
• Milestone notification: a gentle bell-like tone at 880hz for 200ms

Add a mute toggle in the header. Save mute state to localStorage.

DESIGN:

Follow all rules in @CLAUDE.md

Game container: max 900px wide and centred

Left panel: approximately 40 percent of the width

Right panel: approximately 60 percent of the width

Click button: large circle or themed shape, minimum 120px diameter or equivalent

accent colour, subtle pulse animation when the per-second rate is above zero

Generator rows: alternating very subtle background difference for readability

Upgrade cards: 2-column grid in the upgrades tab

Font: [FONT NAME] from Google Fonts
Background: [BACKGROUND HEX]
Primary text: [TEXT HEX]
Accent: [ACCENT HEX]

Disabled buy buttons: clearly visually different from enabled ones — muted colour

and not-allowed cursor

MOBILE:

Below 768px stack the panels vertically with the main panel on top.

The click button should be easily tappable at minimum 100px diameter.

The shop tabs should be clearly labelled and easy to switch.

SELF-CHECK BEFORE DELIVERING:

1. Page loads and shows the start state with 0 currency and all generators at 0
2. Clicking the main button adds exactly 1 currency to start
3. Buying Generator 1 when affordable increases the per-second rate by 0.1
4. After 10 seconds with one Generator 1, the currency increases by approximately 1
5. An upgrade appears in the upgrades tab after meeting its unlock condition
6. Purchasing an upgrade immediately applies its effect
7. Save and refresh — all currency, generators, and upgrades persist
8. Offline earnings are calculated and shown on page load
9. Reset button clears all progress after confirmation
10. Large numbers display in abbreviated format at 1000 and above

Themed Examples to Inspire Your Build

The prompt above is a blank template. Here are three themed versions to show how to fill it in.

Claude Code Studio theme: currency is Prompts. Generators are Intern, Junior Dev, Senior Dev, AI Model, Agent Pipeline, Autonomous Studio. Upgrades double prompt generation rates and unlock new automation tools. Milestones reference community member counts and course completions.

Coffee Empire theme: currency is Coffees. Generators are Espresso Machine, Barista, Coffee Cart, Cafe, Roastery, Coffee Chain, Coffee Conglomerate. Upgrades improve recipes and expand locations. Milestones celebrate customer counts and revenue targets.

Space Explorer theme: currency is Stardust. Generators are Telescope, Satellite, Space Probe, Space Station, Moon Base, Mars Colony, Dyson Sphere. Upgrades unlock new discoveries and boost collection rates. Milestones mark major astronomical discoveries.

Balancing Your Numbers

The most common mistake in clicker games is unbalanced progression. If the early game is too slow players quit. If it is too fast there is nothing to work toward.

A working balance for the generator costs above roughly means: the player buys Generator 1 after about 10 seconds of clicking, Generator 2 after about 2 to 3 minutes, Generator 3 after about 10 minutes, Generator 4 after about 30 minutes, and Generator 5 after an hour or more of combined clicking and idle time.

If your game feels off after the first build, ask Claude to rebalance:

The early game feels too slow. Players have to click for too long before affording

the first generator. Adjust the base costs so that:

• Generator 1 is affordable after 15 to 20 clicks from the start
• Generator 2 is affordable roughly 3 to 4 minutes after the first generator
• All other generator costs scale proportionally from there

Keep the 1.15 cost scaling formula unchanged.