Game Loop and Core Click
- Click or tap the main [[Main Click Target]] to earn primary [[Currency]].
- Each click awards base amount multiplied by current multipliers and purchased upgrades.
- The counter updates instantly with satisfying visual pop and number formatting (K/M/B).
- Passive generators purchased from the upgrade tree continue earning while the tab is open or via saved idle accrual on return.
Upgrade Tree and Progression
- List upgrades in a vertical tree grouped by tier: early cheap, mid, and late prestige.
- Every upgrade shows current cost, current level or owned count, and the exact production gain.
- Costs scale exponentially using a standard formula: base * (growth ^ owned).
- Some upgrades unlock new mechanics or multiply all prior production when purchased.
| Upgrade | Cost Formula | Effect | Unlock |
|---------|--------------|--------|--------|
| [[Theme]] Clicker | 10 | +1 per click | Start |
| Auto [[Currency]] | 50 | +1 [[Currency]] /s | After 2 clicks |
| [[Theme]] Booster | 200 * 1.15^n | x1.2 all production | Level 5 |
| Prestige Node | 1e6 | Reset for multiplier | Late game |
Idle Income and Accrual
- While away, production continues at 100% rate up to a capped offline time of 4 hours.
- On load, compute missed time and add the exact idle earnings with a summary toast.
- A toggle allows capping idle at 50% rate for balance if desired by the designer.
- Display last login timestamp and earnings breakdown.
Prestige and Reset Mechanic
- When total [[Currency]] earned reaches [[Prestige Goal]], the prestige button becomes available.
- Prestiging resets all upgrades and [[Currency]] but grants a permanent global multiplier.
- The multiplier starts at [[Starting Multiplier]] and increases with each prestige performed.
- Keep a visible prestige count and current global multiplier in the top bar at all times.
Number Formatting and Polish
- All large numbers use tiered suffixes: K, M, B, T, Qd with two decimal precision.
- Animate value changes with a quick count-up effect on significant earnings.
- Color code negative impacts in red and positive multipliers in theme accent.
- Provide a settings panel to adjust tick rate, sound volume, and number format style.
Save, Persistence and Export
- Use localStorage with a versioned key to store all state including prestige count.
- Auto-save on every significant action and also every 30 seconds.
- Offer Export and Import buttons that serialize state to base64 or clean JSON.
- A hard reset button clears storage after a confirmation prompt.
Themed Currency and Visuals
- Replace default coin icon and colors with symbols and palette pulled from [[Theme]].
- Background slowly animates subtle elements such as floating particles or pulsing orbs.
- Click effects spawn floating +N text that match the currency symbol.
- Upgrade buttons adopt theme icons and hover glows.
State Validation and Edge Cases
- Never allow negative [[Currency]] or negative upgrade counts.
- Cap the number of simultaneous generators to avoid performance degradation in browser.
- Handle localStorage quota by warning the user and offering a trimmed export.
- If imported state is from a future version, load what is possible and log warnings.
Score and Milestone Tracking
- Show lifetime [[Currency]] earned as a permanent stat separate from current balance.
- Unlock visible milestones at 1K, 1M, 1B, 1T that grant small one-time bonuses.
- Track fastest time to first prestige and display on a personal records panel.
- Provide shareable milestone images or text strings for social bragging.
Full Playable Demo
Below is a complete single-file idle clicker. Paste into .html and open locally. All mechanics are live including upgrades, idle (simulated), prestige, persistence via localStorage, and K/M/B formatting. Customize the constants at top for [[Theme]] and [[Currency]].
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[[Theme]] Clicker - Demo</title>
<style>
body{background:#0b1120;color:#e0f0ff;font-family:system-ui;margin:0;padding:20px}
.wrap{max-width:720px;margin:auto}
#big{display:block;width:100%;padding:40px;font-size:28px;background:#1e3a8a;color:#fff;border-radius:16px;margin:12px 0;cursor:pointer}
.row{display:flex;gap:10px;flex-wrap:wrap}
.card{background:#1e2937;border-radius:10px;padding:12px;flex:1;min-width:180px}
button{background:#22c55e;color:#052e16;border:0;padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer}
.stat{font-size:13px;opacity:.85}
#upgrades div{margin:6px 0;padding:6px;background:#0f172a;border-radius:6px}
</style>
</head>
<body>
<div class="wrap">
<h1>[[Theme]] Clicker</h1>
<div class="stat">[[Currency]]: <span id="cur">0</span> per sec: <span id="ps">0</span> Prestige x<span id="mult">1</span></div>
<button id="big" onclick="clickMain()">Click [[Main Click Target]]</button>
<div class="row">
<div class="card">
<h3>Upgrades</h3>
<div id="upgrades"></div>
</div>
<div class="card">
<h3>Stats</h3>
<div>Lifetime: <span id="life">0</span></div>
<div>Prestige count: <span id="prest">0</span></div>
<button onclick="tryPrestige()">Prestige</button>
<button onclick="hardReset()">Hard Reset</button>
</div>
</div>
</div>
<script>
let state = { cur:0, life:0, prestige:0, mult:1, upgrades:{}, last: Date.now() };
const THEME = "[[Theme]]";
const CUR = "[[Currency]]";
const UP = [
{id:'c1', name:'Basic Click', base:10, prod:1, type:'click'},
{id:'g1', name:'Auto Gen', base:50, prod:0.8, type:'gen'},
{id:'g2', name:'Mega Gen', base:300, prod:4.5, type:'gen'},
];
function fmt(n){
if(n<1e3) return n.toFixed(1);
const s=['','K','M','B','T','Q'];
let i=0; while(n>=1e3 && i<s.length-1){n/=1e3;i++;} return n.toFixed(2)+s[i];
}
function save(){ localStorage.setItem('clicker_'+THEME, JSON.stringify(state)); }
function load(){
const raw = localStorage.getItem('clicker_'+THEME);
if(raw){ try{ state = {...state, ...JSON.parse(raw)}; }catch(e){} }
const idle = (Date.now() - state.last)/1000;
if(idle>1){ state.cur += Math.min(idle*calcPs(), 3600*calcPs()*0.5); }
}
function calcPs(){
let p = 0;
UP.forEach(u=>{ const lvl=state.upgrades[u.id]||0; if(u.type==='gen') p += u.prod * lvl * state.mult; });
return p;
}
function clickMain(){
let gain = (1 + (state.upgrades.c1||0)) * state.mult;
state.cur += gain; state.life += gain;
update();
}
function buy(id){
const u = UP.find(x=>x.id===id); if(!u) return;
const lvl = state.upgrades[id]||0;
const cost = Math.floor(u.base * Math.pow(1.15, lvl));
if(state.cur < cost) return;
state.cur -= cost;
state.upgrades[id] = lvl+1;
update(); save();
}
function calcClickMul(){ return 1 + (state.upgrades.c1||0)*0.1; }
function tryPrestige(){
if(state.life < 1000000) { alert('Need 1M lifetime'); return; }
state.prestige +=1;
state.mult = 1 + state.prestige * 0.1;
state.cur=0; state.life=0; state.upgrades={};
update(); save();
}
function hardReset(){ if(confirm('Reset all?')){ localStorage.removeItem('clicker_'+THEME); location.reload(); } }
function update(){
document.getElementById('cur').textContent = fmt(state.cur);
document.getElementById('ps').textContent = fmt(calcPs());
document.getElementById('life').textContent = fmt(state.life);
document.getElementById('prest').textContent = state.prestige;
document.getElementById('mult').textContent = state.mult.toFixed(1);
const cont = document.getElementById('upgrades'); cont.innerHTML='';
UP.forEach(u=>{
const lvl=state.upgrades[u.id]||0;
const cost=Math.floor(u.base*Math.pow(1.15,lvl));
const d=document.createElement('div');
d.innerHTML = `${u.name} (x${lvl}) cost ${fmt(cost)} <button onclick="buy('${u.id}')">Buy</button>`;
cont.appendChild(d);
});
state.last = Date.now(); save();
}
function loop(){
state.cur += calcPs()/10; state.life += calcPs()/10;
update();
setTimeout(loop, 100);
}
load(); update(); loop();
setInterval(()=>{ save(); }, 15000);
</script>
</body>
</html>
Balance and Player Feel Tuning
- Early game should feel rewarding within the first 30 seconds of play.
- Mid game introduces meaningful choices between clicking power and idle production.
- Late game economy breaks only after several prestige layers to maintain motivation.
- Test the offline accrual on multiple browsers and devices.
Common Pitfalls to Avoid
- Do not allow prestige to grant infinite scaling without visible diminishing returns.
- Avoid hiding the prestige button until the player has already passed the threshold.
- Keep the main click target large, obvious, and always reachable without scrolling.
- Never reset localStorage keys on minor version updates without migration.
Replayability Hooks
- Different [[Theme]] skins can be unlocked after certain prestige milestones.
- Daily login bonus that grants a small temporary production buff.
- Challenge modes that limit the number of upgrades or force a specific order.
- Leaderboard export format for community sharing of fastest prestige times.
Full Implementation Notes
- The demo uses 100ms ticks for smoothness while remaining lightweight.
- All math is performed with native numbers; switch to BigInt only after 1e15 if needed.
- Add sound using WebAudio for click and purchase events when desired.
- Mobile touch is supported natively because the big button is a large hit target.
This idle clicker template delivers a complete, satisfying progression system with full persistence, prestige, and immediate playability. Fill the tokens, expand the upgrade list, and the generator output is production-ready.
---
Idle / Clicker Game Maker template. Deep progression. All core systems live in the demo above.
Playable Games
Controls
Game feel
Playtest
