Complete Cookie Clicker Code

Here's the complete working code with all features from Steps 1-5 combined. Copy this into your p5.js Web Editor at https://editor.p5js.org/

// Global variables
let score = 0;
let cookieSize = 150;
let floatingTexts = [];
let autoClickers = 0;
let autoClickerCost = 10;
let buttonX, buttonY;
let buttonWidth = 200;
let buttonHeight = 60;
let particles = [];

function setup() {
  createCanvas(800, 600);
  
  // Position button at bottom center
  buttonX = width/2 - buttonWidth/2;
  buttonY = height - 120;
}

function draw() {
  background(240, 230, 220);  // Warm background
  
  // Auto-generate cookies every second
  if (frameCount % 60 === 0 && autoClickers > 0) {
    score += autoClickers;
  }
  
  // Cookie animation - smoothly grow back to normal size
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  // Draw the cookie with emoji
  fill('#D2691E');
  circle(width/2, height/2 - 50, cookieSize);
  textSize(cookieSize * 0.8);
  textAlign(CENTER, CENTER);
  text('🍪', width/2, height/2 - 50);
  
  // Update and draw floating texts
  for (let i = floatingTexts.length - 1; i >= 0; i--) {
    let txt = floatingTexts[i];
    
    // Move text up and fade out
    txt.yOffset += 2;
    txt.alpha -= 5;
    
    // Draw the text
    fill(50, 200, 50, txt.alpha);
    textSize(24);
    textAlign(CENTER);
    text('+1', txt.x, txt.y - txt.yOffset);
    
    // Remove text when fully faded
    if (txt.alpha <= 0) {
      floatingTexts.splice(i, 1);
    }
  }
  
  // Update and draw particles
  for (let i = particles.length - 1; i >= 0; i--) {
    let p = particles[i];
    
    // Move particle
    p.x += p.vx;
    p.y += p.vy;
    
    // Fade out
    p.alpha -= 8;
    
    // Draw particle
    fill(218, 165, 32, p.alpha);  // Golden color
    noStroke();
    circle(p.x, p.y, p.size);
    
    // Remove when invisible
    if (p.alpha <= 0) {
      particles.splice(i, 1);
    }
  }
  
  // Check if mouse is over button
  let overButton = mouseX > buttonX && mouseX < buttonX + buttonWidth &&
                   mouseY > buttonY && mouseY < buttonY + buttonHeight;
  
  // Draw upgrade button with hover effect
  if (score >= autoClickerCost) {
    if (overButton) {
      fill(60, 220, 60);  // Brighter green on hover
      strokeWeight(4);
      stroke(30, 100, 30);
    } else {
      fill(50, 200, 50);  // Normal green
      noStroke();
    }
  } else {
    fill(150);  // Gray when can't afford
    noStroke();
  }
  rect(buttonX, buttonY, buttonWidth, buttonHeight, 10);
  
  // Button text
  fill(255);
  textSize(16);
  textAlign(CENTER, CENTER);
  text('Buy Auto-Clicker', width/2, buttonY + 20);
  text('Cost: ' + autoClickerCost, width/2, buttonY + 40);
  
  // Display main score with emoji
  fill(0);
  textSize(36);
  textAlign(CENTER);
  text('🍪 ' + score + ' cookies', width/2, 50);
  
  // Display auto-clicker stats
  textSize(20);
  if (autoClickers > 0) {
    text('Auto-clickers: ' + autoClickers + ' (+' + autoClickers + '/sec)', width/2, 100);
  } else {
    fill(150);  // Gray text when no auto-clickers
    text('No auto-clickers yet', width/2, 100);
  }
  
  // Display milestone messages
  fill(255, 200, 0);  // Gold color
  textSize(18);
  if (score >= 100 && score < 110) {
    text('🎉 100 cookies! You\'re a cookie master!', width/2, 150);
  } else if (score >= 500 && score < 510) {
    text('🌟 500 cookies! Incredible!', width/2, 150);
  } else if (score >= 1000 && score < 1010) {
    text('👑 1000 COOKIES! LEGENDARY!', width/2, 150);
  }
}

function mousePressed() {
  // Check if cookie is clicked
  let d = dist(mouseX, mouseY, width/2, height/2 - 50);
  
  if (d < 75) {  // 75 is the radius
    score++;
    cookieSize = 135;  // Shrink the cookie
    
    // Create floating +1 text
    floatingTexts.push({
      x: mouseX,
      y: mouseY,
      alpha: 255,
      yOffset: 0
    });
    
    // Create particle burst
    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)
      });
    }
  }
  
  // Check if upgrade button is clicked
  if (mouseX > buttonX && mouseX < buttonX + buttonWidth &&
      mouseY > buttonY && mouseY < buttonY + buttonHeight) {
    
    // Purchase auto-clicker if player can afford it
    if (score >= autoClickerCost) {
      score -= autoClickerCost;
      autoClickers++;
      autoClickerCost = Math.floor(autoClickerCost * 1.5);
    }
  }
}

Features Included

This complete code includes:

• ✅ Interactive cookie with click detection
• ✅ Cookie shrink/grow animation on click
• ✅ Score tracking and display
• ✅ Floating "+1" text feedback
• ✅ Particle burst effects
• ✅ Auto-clicker upgrade system
• ✅ Button hover effects
• ✅ Exponential cost scaling
• ✅ Milestone celebrations
• ✅ Cookie emoji
• ✅ Stats display (cookies per second)

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! 🍪

Happy clicking!