let canvasHeight = 600;

let mixingBowl;

let flour;

let eggs;

let sugar;

let milk;

let gameState = "instructions";

let cupcakeReady = false;

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  mixingBowl = new Bowl(width / 2, height / 2);

  flour = new Ingredient("Flour", 100, 100, color(255, 204, 204));

  eggs = new Ingredient("Eggs", 250, 100, color(255, 255, 102));

  sugar = new Ingredient("Sugar", 100, 250, color(255, 102, 255));

  milk = new Ingredient("Milk", 250, 250, color(255, 204, 255));

}

​

function draw() {

  background(255);

  if (gameState === "instructions") {

    showInstructions();

  } else if (gameState === "play") {

    mixingBowl.display();

    flour.display();

    eggs.display();

    sugar.display();

    milk.display();

​

    if (mixingBowl.hasIngredients(["Flour", "Eggs", "Sugar", "Milk"]) && !cupcakeReady) {

      makeCupcake();

    }

  }

}

​

function mousePressed() {

  if (gameState === "instructions") {

    gameState = "play";

  } else if (gameState === "play") {

    if (flour.contains(mouseX, mouseY)) {

      mixingBowl.addIngredient(flour);

    } else if (eggs.contains(mouseX, mouseY)) {

      mixingBowl.addIngredient(eggs);

    } else if (sugar.contains(mouseX, mouseY)) {

      mixingBowl.addIngredient(sugar);

    } else if (milk.contains(mouseX, mouseY)) {

      mixingBowl.addIngredient(milk);

    }

  }

}

​

function showInstructions() {

  textAlign(CENTER);

  textSize(24);

  fill(255, 0, 0);

  text("Welcome to the Baking Game!", width / 2, height / 2 - 50);

  textSize(16);

  fill(0);

  text("Click anywhere to start baking!", width / 2, height / 2 + 20);

}

​

function makeCupcake() {

  cupcakeReady = true;

  mixingBowl.emptyBowl();

  // Display a pink cupcake in the mixing bowl

  fill(255, 182, 193);

  ellipse(mixingBowl.x, mixingBowl.y - 20, 120, 120);

  fill(255, 0, 255);

  ellipse(mixingBowl.x - 20, mixingBowl.y - 35, 40, 40);

  ellipse(mixingBowl.x + 20, mixingBowl.y - 35, 40, 40);

  fill(255, 204, 255);

  ellipse(mixingBowl.x, mixingBowl.y - 10, 20, 20);

  textSize(20);

  fill(0);

  text("Cupcake Ready!", width / 2, height - 50);

}

​

class Bowl {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.ingredients = [];

  }

​

  display() {

    fill(255, 182, 193); // Pink mixing bowl

    ellipse(this.x, this.y, 150, 150);

    for (let i = 0; i < this.ingredients.length; i++) {

      this.ingredients[i].x = this.x + cos(i / this.ingredients.length * TWO_PI) * 60;

      this.ingredients[i].y = this.y + sin(i / this.ingredients.length * TWO_PI) * 60;

      this.ingredients[i].display();

    }

  }

​

  addIngredient(ingredient) {

    this.ingredients.push(ingredient);

  }

​

  emptyBowl() {

    this.ingredients = [];

  }

​

  hasIngredients(ingredientNames) {

    for (let name of ingredientNames) {

      if (!this.ingredients.some(ingredient => ingredient.name === name)) {

        return false;

      }

    }

    return true;

  }

}

​

class Ingredient {

  constructor(name, x, y, color) {

    this.name = name;

    this.x = x;

    this.y = y;

    this.color = color;

    this.size = 50;

  }

​

  display() {

    fill(this.color);

    ellipse(this.x, this.y, this.size, this.size);

    fill(0);

    textSize(12);

    textAlign(CENTER);

    text(this.name, this.x, this.y + this.size / 2 + 15);

  }

​

  contains(x, y) {

    let d = dist(x, y, this.x, this.y);

    return d < this.size / 2;

  }

}

​