p5.js Web Editor | Verdant plywood

xxxxxxxxxx
let game;
let backgroundImage;
​
function setup() {
  createCanvas(800, 600);
  game = new CookieGame();
}
​
function preload() {
  eggCrack = loadImage("egg.png");
  backgroundImage = loadImage("background.png");
  butter = loadImage("butter.png");
  vanilla = loadImage("vanilla.png");
  flour = loadImage("flour.png");
  sugar = loadImage("sugar.png");
  bowl = loadImage("bowl.png");
}
​
function draw() {
  background(220);
  image(backgroundImage, width / 2, height / 2, width, height);
  game.update();
  game.display();
}
​
function mousePressed() {
  game.mousePressed();
}
​
function mouseDragged() {
  game.mouseDragged();
}
​
function mouseReleased() {
  game.mouseReleased();
}
​
class CookieGame {
  constructor() {
    this.stateManager = new StateManager();
    this.bowl = new Bowl(400, 300);
    this.ingredients = [
      new Ingredient(flour, 100, 300),
      new Ingredient(vanilla, 250, 200),
      new Ingredient(sugar, 600, 270),
      new Ingredient(butter, 700, 400)
    ];
    this.mixButton = createButton('Mix');
    this.mixButton.position(700, 550);
    this.mixButton.mousePressed(() => this.mix());
    this.restartButton = createButton('Restart');
    this.restartButton.position(700, 500);
    this.restartButton.mousePressed(() => this.restart());
    this.recipeButton = createButton('Recipe');
    this.recipeButton.position(700, 450);
    this.recipeButton.mousePressed(() => this.showRecipe());
    this.timer = 0;
  }
​
  update() {
    this.stateManager.currentState.update(this);
  }
​
  display() {
    this.stateManager.currentState.display(this);
  }
​
  mousePressed() {
    this.stateManager.currentState.mousePressed(this);
  }
​
  mouseDragged() {
    this.stateManager.currentState.mouseDragged(this);
  }
​
  mouseReleased() {
    this.stateManager.currentState.mouseReleased(this);
  }
​
  mix() {
    if (this.stateManager.currentState instanceof IngredientsState) {
      this.stateManager.transitionTo(new MixingState());
    }
  }
​
  restart() {
    this.stateManager.transitionTo(new StartState());
    // Reset game elements here
  }
​
  showRecipe() {
    // Implement recipe display logic
  }
}
​
class StateManager {
  constructor() {
    this.currentState = new StartState();
  }
​
  transitionTo(state) {
    this.currentState = state;
  }
}
​
class State {
  update(game) {}
  display(game) {}
  mousePressed(game) {}
  mouseDragged(game) {}
  mouseReleased(game) {}
}
​
class StartState extends State {
  display(game) {
    textAlign(CENTER);
    textSize(32);
    text("Chocolate Chip Cookie Baking Game", width/2, height/2);
    text("Click to start", width/2, height/2 + 50);
  }
​
  mousePressed(game) {
    game.stateManager.transitionTo(new IngredientsState());
  }
}
​
class IngredientsState extends State {
  display(game) {
    text("Drag ingredients to the bowl", width/2, 50);
    game.bowl.display();
    game.ingredients.forEach(ingredient => ingredient.display());
  }
​
  mouseDragged(game) {
    game.ingredients.forEach(ingredient => {
      if (ingredient.isMouseOver()) {
        ingredient.drag(mouseX, mouseY);
      }
    });
  }
​
  mouseReleased(game) {
    game.ingredients.forEach(ingredient => {
      if (ingredient.isOverlapping(game.bowl)) {
        ingredient.dropInBowl();
      }
    });
  }
}
​
class MixingState extends State {
  constructor() {
    super();
    this.mixingTime = 0;
  }
​
  update(game) {
    this.mixingTime++;
    if (this.mixingTime > 180) { // 3 seconds at 60 fps
      game.stateManager.transitionTo(new BakingState());
    }
  }
​
  display(game) {
    text("Mixing ingredients...", width/2, height/2);
    // Add whisk animation here
  }
}
​
class BakingState extends State {
  constructor() {
    super();
    this.bakingTime = 0;
  }
​
  update(game) {
    this.bakingTime++;
    if (this.bakingTime > 600) { // 10 seconds at 60 fps
      game.stateManager.transitionTo(new FinishedState());
    }
  }
​
  display(game) {
    text("Baking time: " + Math.floor(this.bakingTime/60) + " seconds", width/2, 50);
    // Add oven animation here
  }
}
​
class FinishedState extends State {
  display(game) {
    text("Cookies are ready!!", width/2, height/2);
  }
}
​
class Bowl {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
​
  display() {
    // Draw bowl here
    ellipse(this.x, this.y, 100, 50);
  }
}
​
class Ingredient {
  constructor(type, x, y) {
    this.type = type;
    this.x = x;
    this.y = y;
    this.inBowl = false;
  }
​
  display() {
    if (!this.inBowl) {
      // Draw ingredient here
      fill(this.getColor());
      ellipse(this.x, this.y, 50, 50);
    }
  }
​
  isMouseOver() {
    return dist(mouseX, mouseY, this.x, this.y) < 25;
  }
​
  drag(x, y) {
    this.x = x;
    this.y = y;
  }
​
  isOverlapping(bowl) {
    return dist(this.x, this.y, bowl.x, bowl.y) < 50;
  }
​
  dropInBowl() {
    this.inBowl = true;
  }
}
​
Cookies

Sketch Files

Console

Preview
