p5.js Web Editor | the cookie game

xxxxxxxxxx
let currentState; // for the state machine
let nextButton, restartButton; // buttons to switch states
let eggSprite, flour, sugar, butter, vanilla, chocoChips, tray; // ingredients 
let dingSound, bgSound; // background sounds
​
function preload() {
  bg = loadImage('bg.png');
  font = loadFont('babybloom.otf');
  firstCookie = loadImage('startCookie.png');
  lastCookie = loadImage('finalCookie.png');
  eggSprite = loadImage('egg.png'); 
  bowlImg = loadImage('bowl.png');
  flour = loadImage('flour.png');
  sugar = loadImage('sugar.png');
  butter = loadImage('butter.png');
  vanilla = loadImage('vanilla.png');
  chocoChips = loadImage('choco.png');
  tray = loadImage('tray.png');
  oven = loadImage('oven.png');
  dingSound = loadSound('ovenDing.mp3');
  bgSound = loadSound('bgmusic.mp3');
}
​
function setup() {
  createCanvas(800, 600);
  userStartAudio().then(() => {
    bgSound.loop();
  });
  currentState = new WelcomeState();
​
  // initialising the bowl, oven, and ingredients
  bowl = new Bowl(400, 450);
  oven = new Oven(600, 300);
  ingredients = [
    new Ingredient('egg', 320, 300, eggSprite, true), 
    new Ingredient('flour', 150, 250, flour, false),
    new Ingredient('sugar', 350, 150, sugar, false),
    new Ingredient('butter', 450, 270, butter, false),
    new Ingredient('chocChips', 300, 200, chocoChips, false),
    new Ingredient('vanilla', 75, 350, vanilla, false)
  ]; //array for the ingredients
​
  // initialising the buttons
  nextButton = createButton('Next');
  nextButton.position(700, 550);
  nextButton.hide();
​
  restartButton = createButton('Restart');
  restartButton.position(700, 550);
  restartButton.hide();
​
  //function for the next button
  nextButton.mousePressed(() => {
    if (currentState instanceof MixingState) {
      currentState.nextButtonPressed();  // changing state to the "baking" state
    }
  });
​
  // restart button
  restartButton.mousePressed(() => {
    currentState = new WelcomeState();  // to restart the game
    nextButton.hide();  
    restartButton.hide();  
    ingredients.forEach((ingredient) => {
      ingredient.isDropped = false; 
      ingredient.isCracked = false;
      ingredient.x = ingredient.originalX;  
      ingredient.y = ingredient.originalY; 
    });
  });
​
}
​
function draw() {
  background(bg);
  currentState.display();
  currentState.update();
}
​
function mousePressed() {
  currentState.mousePressed();
}
​
function keyPressed() {
  currentState.keyPressed();
}
​
//starting screen 
class WelcomeState {
  display() {
    image(firstCookie, 100, 100);
    textAlign(CENTER, CENTER);
    textSize(30);
    textFont(font);
    fill('#1c2e4a');
    text("Press any key to start!", width / 2, height / 2);
    textSize(70);
    text("Welcome to the Cookie Game!", width / 2, height / 2 + 50);
  }
​
  update() {}
​
  mousePressed() {}
​
  keyPressed() {
    currentState = new MixingState(); //to move to next state
  }
}
​
class MixingState {
  constructor() {
    nextButton.show(); //to show next button 
  }
​
  display() {
    bowl.display(); 
    for (let ingredient of ingredients) {
      ingredient.display(); 
    }
  }
​
  update() {
    for (let ingredient of ingredients) {
      ingredient.update();
    }
  }
​
  mousePressed() {
    for (let ingredient of ingredients) {
      if (ingredient.name === 'egg') {
        ingredient.checkClicked();
      } else {
        ingredient.checkDragging();
      } //to make sure egg stays in place and other ingredients are moving 
    }
  }
​
  keyPressed() {}
​
  nextButtonPressed() {
    currentState = new BakingState(); //moving to baking state
    nextButton.hide();  
  }
}
​
class BakingState {
  constructor() {
    this.bakingTimer = 0;
    this.isBaking = false;
  }
​
  display() {
    oven.display(); //display drawing of oven
    image(tray, 500, 300);
    if (this.isBaking) {
      textSize(50);
      textFont(font);
      fill('#1c2e4a');
      text("Baking...\n please wait for \n five seconds!", width/3 , height / 2);
    }
  }
​
  update() {
    if (this.isBaking) {
      this.bakingTimer++;
      if (this.bakingTimer > 300) { // 5 seconds at 60 fps to "bake" the cookies
        dingSound.play(); //sound effect of oven baking being done
        currentState = new FinishedState(); //moving to final state
      }
    }
  }
​
  mousePressed() {
    this.isBaking = true;
  }
​
  keyPressed() {}
}
​
//final screen class
class FinishedState {
  constructor() {
    restartButton.show(); 
  }
​
  display() {
    image(lastCookie, 100, 100);
    textAlign(CENTER, CENTER);
    textSize(72);
    textFont(font);
    fill('#1c2e4a');
    text("Cookies are ready! Congrats!", width / 2, height / 2);
  }
​
  update() {}
​
  mousePressed() {
    if (
      mouseX > restartButton.x &&
      mouseX < restartButton.x + restartButton.width &&
      mouseY > restartButton.y &&
      mouseY < restartButton.y + restartButton.height
    ) {
      restartButton.mousePressed();  // to restart the game
    }
  }
​
  keyPressed() {}
}
​
class Bowl {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = bowlImg.width;
    this.height = bowlImg.height;
  }
​
  display() {
    image(bowlImg, this.x - this.width / 2, this.y - this.height / 2);
  }
​
  isIngredientInBowl(ingredient) {
    return (
      ingredient.x > this.x - this.width / 2 &&
      ingredient.x < this.x + this.width / 2 &&
      ingredient.y > this.y - this.height / 2 &&
      ingredient.y < this.y + this.height / 2
    );
  }
}
​
class Oven {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
​
  display() {
    
    //oven using shapes
    noStroke();
    fill('#80471c');
    rect(this.x - 10, this.y - 10, 200, 170); 
    
    fill('grey');
    rect(this.x, this.y, 150, 150); // oven screen
    
    fill('#ffffe0');
    circle(this.x + 160, this.y + 10, 10); // first button
    
    fill('#ffffe0');
    circle(this.x + 160, this.y + 30, 10); // second button
  }
}
​
// ingredient class
class Ingredient {
constructor(name, x, y, img, isEgg) {
    this.name = name;
    this.x = x;
    this.y = y;
    this.img = img;
    this.isEgg = isEgg;
    this.isDragging = false;
    this.offsetX = 0;
    this.offsetY = 0;
    this.isDropped = false;
    this.currentFrame = 0; 
    this.numFrames = 5; 
    this.frameWidth = 150;
    this.frameHeight = 150;
    this.isCracked = false;
    this.frameTimer = 0;
    this.frameSpeed = 6;  
    this.originalX = x;  
    this.originalY = y;  
  }
  
  display() {
    
    if (!this.isDropped && !this.isEgg && bowl.isIngredientInBowl(this)) {
  this.isDropped = true;
  this.x = bowl.x;
  this.y = bowl.y;
}
    
    if (this.isEgg) {
      let sx = this.currentFrame * this.frameWidth;
      image(this.img, this.x, this.y, this.frameWidth, this.frameHeight, sx, 0, this.frameWidth, this.frameHeight);
    } else if (!this.isDropped) {
      image(this.img, this.x, this.y);
    }
  }
​
  update() {
    if (this.isDragging) {
      this.x = mouseX + this.offsetX;
      this.y = mouseY + this.offsetY;
    }
    
    //dropping ingredient into bowl
    if (!this.isDropped && !this.isEgg && bowl.isIngredientInBowl(this)) {
      this.isDropped = true;
      this.x = bowl.x; 
      this.y = bowl.y;
    }
​
    // animate the egg spritesheet if it's clicked
    if (this.isEgg && this.isCracked) {
      this.frameTimer++;
      if (this.frameTimer >= this.frameSpeed) {
        this.frameTimer = 0;  // to reset timer
      if (this.currentFrame < this.numFrames - 1) {
          this.currentFrame++;  
        }
      }
    }
  }
​
  checkDragging() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height &&
      !this.isDropped
    ) {
      this.isDragging = true;
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;
    }
  }
​
  checkClicked() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height &&
      !this.isCracked
    ) {
      this.isCracked = true; //start the animation of egg cracking
      this.currentFrame = 0;
    }
  }
}
​
​
Cookies

Sketch Files

Console

Preview
