This notebook will assign roles at random and guide three students through a 6-step coding task:
Adding a new shop item to the Cookie Clicker game.

Each student is responsible for two steps, and the feature won’t work unless all parts are completed.

Little Jug In The Corner

We decided to add a little helper in the corner that propmts random quotes from a set of quotes.

 constructor(canvasId, options = {}) {
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext('2d');
        
        // Configuration
        this.dialogueInterval = options.dialogueInterval || 5000; // 5 seconds default
        this.dialogueDuration = options.dialogueDuration || 3000; // 3 seconds default
        this.spriteSize = options.spriteSize || 128; // Each sprite is 128x128 in the 256x256 image
        this.scale = options.scale || 4; // 2 times bigger than original (was 2, now 4)
        
        // Dialogue array - empty template for user to fill
        this.dialogues = options.dialogues || [
            // Add your dialogue here, for example:
            // "Hello there!",
            // "How's it going?",
            // "Nice weather today!",
            // "Did you know...?",
            // "Keep up the great work!"
        ];

This was how we would store the options for the little guy to choose from.

 this.dialogueInterval = options.dialogueInterval || 5000; // 5 seconds default
        this.dialogueDuration = options.dialogueDuration || 3000; // 3 seconds default
        this.spriteSize = options.spriteSize || 128; // Each sprite is 128x128 in the 256x256 image
        this.scale = options.scale || 4; // 2 times bigger than original (was 2, now 4)
        

These are the custimizable values to adjust the little guy to your liking such as size, duration, delay, etc. Then with proper functions that will render the sprite on screen he will start talking every so often

The next feature we added was the abilty to buy an auto clicker upg that would click the cookie every second.

  autoClickCookie(){
    console.log("Auto CLicker Request")
    if (this.intervalId > 0) {
      clearInterval(this.intervalId);
      this.intervalId = 0;
    }
    this.intervalId = setInterval(() => {
      cookie.addCookies(cookie.cookieMulti);
    }, 100);
  },

The above function is under the gameloop class where we can call a repeating function that will click the cookie every second. But this function will not be called until the auto clicker is bought

          if(forSaleItemInfo.itemEffected == "cps"){
              gameLoop.autoClickCookie()
          }
          shopButton.remove();

The above code checks the upgrades you bought and if it effects the cps stat then it will call the auto clicker function

const AutoClicker = {
  name: "+Auto Clicker",
  emoji: "🖱",
  price: 1,
  itemEffected: "cps",
  multiplier: 5,
};
shop.upgrades.push(x2Click);
shop.upgrades.push(AutoClicker)

The above code will create the autoclicker upgrade that can be bought by a player for a set price

The md file of the cookie clicker game stores the location of the cookie image. With a quick simple change we changed the image to a way better high quality peaice of art!

Adding pop up to power up cookies

We added a pop up image that will apear every minute that will double your cookies eery time you click it.

function placeImageRandomly() {
    // Create the image element
    const img = document.createElement('img');
    img.src = '/CSPeople/hacks/cookie-clicker/assets/image.png';
    img.style.position = 'absolute';
    img.style.width = '100px';
    img.style.height = '100px';

    // Get viewport size
    const maxX = window.innerWidth - 100; // image width
    const maxY = window.innerHeight - 100; // image height

    // Random position
    const randomX = Math.floor(Math.random() * maxX);
    const randomY = Math.floor(Math.random() * maxY);

    // Set position
    img.style.left = randomX + 'px';
    img.style.top = randomY + 'px';

    // Add image to the page
    document.body.appendChild(img);
        img.addEventListener('click', () => {
        console.log('Power Up CLicked clicked!');
        alert('You clicked the power-up!');
        // Optional: remove the image after click
        img.remove();
        cookie.addCookies(cookie.cookies * 2)
              setTimeout(() => {
            placeImageRandomly();
        }, 60000); 
    });
}

// Run once page is loaded
window.addEventListener('load', placeImageRandomly);

The above code will place an image on your screen at a random position and when clicked it will disapear for 60s and will double your cookie amount.

Collaborative Exercise: Cookie Clicker Feature Expansion

Creating Our Addition To Cookie Clicker

Little Jug In The Corner

Changing the Cookie Image

Adding pop up to power up cookies