let backgroundImage;

let currentFrame = 0;

const numFrames = 5;

const frameWidth = 150;

const frameHeight = 150;

​

function preload() {

  eggCrack = loadImage("egg.png");

}

​

function setup() {

  createCanvas(800, 600);

  imageMode(CENTER);

}

​

function draw() {

  background(220);

​

  let sx = currentFrame * frameWidth;

  image(

    eggCrack,

    width / 2,

    height / 2,

    frameWidth,

    frameHeight,

    sx,

    0,

    frameWidth,

    frameHeight

  );

​

}

​

function mousePressed() {

  let spriteLeft = width / 2 - frameWidth / 2;

  let spriteRight = width / 2 + frameWidth / 2;

  let spriteTop = height / 2 - frameHeight / 2;

  let spriteBottom = height / 2 + frameHeight / 2;

​

  //check if mouse is on the egg or not

  if (

    mouseX > spriteLeft &&

    mouseX < spriteRight &&

    mouseY > spriteTop &&

    mouseY < spriteBottom

  ) {

    currentFrame = (currentFrame + 1) % numFrames;

  }

}

​