This Free Friday, I worked on developing my clicker game in which players earn points by clicking a button. As players accumulate points, they can purchase an auto clicker that automatically generates clicks over time, increasing their point total even when they’re not actively playing. Additionally, players can buy multipliers that boost the effectiveness of both manual and auto clicks. Both the manual clicking and auto clicker upgrades can be leveled up to a maximum of 10, allowing for greater efficiency and higher point gains. However, the multiplier upgrade does not have a cap, so players can continue increasing it indefinitely to maximize their score.
}
}
const scoreDiv = document.getElementById(‘score’);
// Generate multipliers UI
const container = document.getElementById(‘multiplierContainer’);
for (let i=0; i<4; i++) {
const div = document.createElement(‘div’);
div.className = ‘multiplier’;
div.id = ‘multiplierDiv’ + i;
div.innerHTML = `
<strong>${multipliers[i].name}</strong><br>
Level: <span id=”multiplierLevel${i}”>0</span><br>
Effect: x${Math.round(Math.pow(2, multipliers[i].level))}<br>
Cost: $<span id=”multiplierCost${i}”>100</span><br>
<button id=”buyMultiplier${i}”>Buy Level</button>
`;
container.appendChild(div);
}
function updateUI() {
document.getElementById(‘score’).innerText = ‘Score: ‘ + formatNumber(score);
document.getElementById(‘autoLevel’).innerText = autoLevel;
document.getElementById(‘autoProduction’).innerText = autoProduction;
document.getElementById(‘autoCost’).innerText = formatNumber(autoCost);
// ⭐ UPDATE UPGRADE BUTTON COST ⭐
document.getElementById(‘autoNextCost’).innerText = formatNumber(autoCost);
document.getElementById(‘buyAuto’).innerText = “Upgrade Auto Clicker ($” + formatNumber(autoCost) + “)”;
// Compute total click effect
let totalMultiplierEffect = 1;
for (let i=0; i<4; i++) {
totalMultiplierEffect *= Math.pow(2, multipliers[i].level);
}
if (totalMultiplierEffect > 1) {
document.getElementById(‘clickBtn’).innerText = ‘Click me x’ + formatNumber(totalMultiplierEffect);
} else {
document.getElementById(‘clickBtn’).innerText = ‘Click me! (+1 point)’;
}
// Auto effect
const autoEffect = Math.pow(2, autoLevel);
let autoEffectText = ‘Auto effect x’ + formatNumber(autoEffect);
if (document.getElementById(‘autoEffect’)) {
document.getElementById(‘autoEffect’).innerText = autoEffectText;
} else {
const autoDiv = document.createElement(‘div’);
autoDiv.id = ‘autoEffect’;
autoDiv.style.color = ‘#fff’;
autoDiv.innerText = autoEffectText;
document.querySelector(‘h3’).insertAdjacentElement(‘afterend’, autoDiv);
}
// Update multipliers
for (let i=0; i<4; i++) {
document.getElementById(`multiplierLevel${i}`).innerText = multipliers[i].level;
document.getElementById(`multiplierCost${i}`).innerText = formatNumber(50 * Math.pow(costMultiplier, multipliers[i].level));
}
}
function saveGame() {
localStorage.setItem(‘clickerSave’, JSON.stringify({
score,
pointsPerClick,
autoClickers,
autoCost,
autoLevel,
autoProduction,
multipliers
}));
}
// Click handler
document.getElementById(‘clickBtn’).onclick = () => {
let totalEffect = 1;
for (let i=0; i<4; i++) {
totalEffect *= Math.pow(2, multipliers[i].level);
}
if (totalEffect < 1) totalEffect = 1;
score += pointsPerClick * totalEffect;
updateUI();
saveGame();
};
// Auto clicker
function startAutoClicker() {
if (autoInterval) clearInterval(autoInterval);
autoInterval = setInterval(() => {
if (autoClickers > 0) {
const autoEffect = Math.pow(2, autoLevel);
score += autoClickers * autoProduction * autoEffect;
updateUI();
saveGame();
}
}, 1000);
}
startAutoClicker();
// ⭐ BUY AUTO CLICKER (adds new auto clicker only) ⭐
document.getElementById(‘autoBtn’).onclick = () => {
if (score >= autoCost) {
score -= autoCost;
autoClickers++; // ONLY adds new auto clicker
updateUI();
saveGame();
} else {
alert(‘Not enough points!’);
}
};
// ⭐ UPGRADE AUTO CLICKER (increases level only) ⭐
document.getElementById(‘buyAuto’).onclick = () => {
if (score >= autoCost) {
score -= autoCost;
autoLevel++; // ONLY upgrade level
autoCost = Math.floor(autoCost * costMultiplier);
updateUI();
saveGame();
} else {
alert(‘Not enough points!’);
}
};
// Buy multipliers
for (let i=0; i<4; i++) {
document.getElementById(`buyMultiplier${i}`).onclick = () => {
if (multipliers[i].level >= maxLevel) {
alert(‘Max level reached!’);
return;
}
const cost = Math.floor(50 * Math.pow(costMultiplier, multipliers[i].level));
if (score >= cost) {
score -= cost;
multipliers[i].level++;
updateUI();
saveGame();
} else {
alert(‘Not enough points!’);
}
};
}
// Reset
document.getElementById(‘reset’).onclick = () => {
localStorage.removeItem(‘clickerSave’);
score = 0;
autoClickers = 0;
autoCost = 50;
autoLevel = 0;
autoProduction = 1;
for (let i=0; i<4; i++) {
multipliers[i].level = 0;
}
updateUI();
startAutoClicker();
};
// Background
const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);
function draw() {
ctx.fillStyle = ‘#556B2F’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
requestAnimationFrame(draw);
}
draw();
// Init
updateUI();
</script>
</body>
</html>
Leave a Reply