Complete Cookie Clicker Code

Here's the complete working code with all features including the upgrades system. Copy this into your p5.js Web Editor at https://editor.p5js.org/

Using Images

This code uses an image for the cookie! To learn how to set up cookie images, see the Using Cookie Images guide.

// Global variables
let score = 0;
let cookieSize = 150;
let cookieImage;
let floatingTexts = [];
let particles = [];
let cookiesPerClick = 1;

let upgrades = {
  autoClicker: {
    name: 'Auto-Clicker',
    cost: 10,
    owned: 0,
    baseCost: 10,
    effect: 1
  },
  clickBoost: {
    name: 'Click Boost',
    cost: 50,
    owned: 0,
    baseCost: 50,
    effect: 1
  },
  speedBoost: {
    name: 'Speed Boost',
    cost: 100,
    owned: 0,
    baseCost: 100,
    effect: 0.5
  }
};

let upgradeButtons = {
  autoClicker: { x: 50, y: 450, width: 150, height: 60 },
  clickBoost: { x: 250, y: 450, width: 150, height: 60 },
  speedBoost: { x: 450, y: 450, width: 150, height: 60 }
};

function preload() {
  cookieImage = loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-0fda82kJu_k4skgYTqbZFam6J6zaK6bw2A&s');
}

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(240, 230, 220);
  
  if (frameCount % 60 === 0 && upgrades.autoClicker.owned > 0) {
    let autoClickerIncome = upgrades.autoClicker.owned * upgrades.autoClicker.effect;
    autoClickerIncome *= (1 + upgrades.speedBoost.owned * 0.5);
    score += autoClickerIncome;
  }
  
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  push();
  imageMode(CENTER);
  image(cookieImage, width/2, height/2 - 50, cookieSize, cookieSize);
  pop();
  
  for (let i = floatingTexts.length - 1; i >= 0; i--) {
    let txt = floatingTexts[i];
    txt.yOffset += 2;
    txt.alpha -= 5;
    
    fill(50, 200, 50, txt.alpha);
    textSize(24);
    textAlign(CENTER);
    text('+' + txt.amount, txt.x, txt.y - txt.yOffset);
    
    if (txt.alpha <= 0) {
      floatingTexts.splice(i, 1);
    }
  }
  
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];
    p.x += p.vx;
    p.y += p.vy;
    p.alpha -= 8;
    
    fill(218, 165, 32, p.alpha);
    noStroke();
    circle(p.x, p.y, p.size);
    
    if (p.alpha <= 0) {
      particles.splice(i, 1);
    }
  }
  
  drawUpgradeButtons();
  
  fill(0);
  textSize(36);
  textAlign(CENTER);
  text(score + ' cookies', width/2, 50);
  
  textSize(16);
  textAlign(LEFT);
  text('Per click: ' + cookiesPerClick, 20, 150);
  text('Speed: ' + (1 + upgrades.speedBoost.owned * 0.5).toFixed(2) + 'x', 20, 180);
  
  let autoIncome = Math.floor(upgrades.autoClicker.owned * upgrades.autoClicker.effect * 
                              (1 + upgrades.speedBoost.owned * 0.5));
  if (autoIncome > 0) {
    text('Auto income: +' + autoIncome + '/sec', 20, 210);
  }
}

function drawUpgradeButtons() {
  for (let upgradeKey in upgrades) {
    let upgrade = upgrades[upgradeKey];
    let button = upgradeButtons[upgradeKey];
    
    let canAfford = score >= upgrade.cost;
    
    if (canAfford) {
      fill(100, 200, 100);
    } else {
      fill(150);
    }
    
    rect(button.x, button.y, button.width, button.height, 8);
    
    fill(255);
    textSize(14);
    textAlign(CENTER, CENTER);
    text(upgrade.name, button.x + button.width/2, button.y + 15);
    text('Cost: ' + upgrade.cost, button.x + button.width/2, button.y + 35);
    text('Owned: ' + upgrade.owned, button.x + button.width/2, button.y + 50);
  }
}

function mousePressed() {
  let d = dist(mouseX, mouseY, width/2, height/2 - 50);
  
  if (d < 75) {
    score += cookiesPerClick;
    cookieSize = 135;
    
    floatingTexts.push({
      x: mouseX,
      y: mouseY,
      amount: cookiesPerClick,
      alpha: 255,
      yOffset: 0
    });
    
    for (let i = 0; i < 8; i++) {
      let angle = (i / 8) * TWO_PI;
      particles.push({
        x: mouseX,
        y: mouseY,
        vx: cos(angle) * 3,
        vy: sin(angle) * 3,
        alpha: 255,
        size: random(4, 8)
      });
    }
  }
  
  for (let upgradeKey in upgrades) {
    let button = upgradeButtons[upgradeKey];
    
    if (mouseX > button.x && mouseX < button.x + button.width &&
        mouseY > button.y && mouseY < button.y + button.height) {
      purchaseUpgrade(upgradeKey);
    }
  }
}

function purchaseUpgrade(upgradeKey) {
  let upgrade = upgrades[upgradeKey];
  
  if (score >= upgrade.cost) {
    score -= upgrade.cost;
    upgrade.owned++;
    
    if (upgradeKey === 'clickBoost') {
      cookiesPerClick += upgrade.effect;
    }
    
    upgrade.cost = Math.floor(upgrade.baseCost * Math.pow(1.15, upgrade.owned));
  }
}

Features Included

This complete code includes:

• ✅ Interactive cookie with click detection
• ✅ Cookie shrink/grow animation on click
• ✅ Score tracking and display
• ✅ Floating text feedback (shows cookies earned)
• ✅ Particle burst effects
• ✅ Multiple upgrade types:
  • Auto-Clicker (passive income generation)
  • Click Boost (increase cookies per click)
  • Speed Boost (increase auto-clicker efficiency)
• ✅ Exponential cost scaling for upgrades
• ✅ Stats display (cookies per click, speed multiplier, passive income)
• ✅ Responsive button states (green when affordable, gray when too expensive)
• ✅ Upgrade synergies (Speed Boost enhances Auto-Clickers)

How to Use

1. Go to https://editor.p5js.org/
2. Delete the default code in the editor
3. Copy and paste this complete code
4. Click the ▶️ Play button
5. Start clicking and have fun!

Gameplay Tips

• Start with Auto-Clickers: Get some passive income early
• Combine upgrades: Click Boost + Speed Boost create good synergy
• Watch your income grow: The stats display shows how much you're earning per second
• Exponential growth: Costs increase, but your income scales faster!

Happy clicking!