var height = 700;

​

var witch;

var cat;

var broom;

var shelf;

​

var bgImg, ingredientsDesk, candy, resultSign, resultAppear, cauldron;

​

var draggedSprite;

var inCauldron;

​

function preload() {

  bgImg = loadImage("images/Background.png");

​

  var eyeballImg = loadSpriteSheet("images/Eyeball.png", 70, 70, 11);

  var lizardImg = loadSpriteSheet("images/Lizard.png", 70, 70, 8);

  var appleImg = loadSpriteSheet("images/Apple.png", 70, 70, 12);

  var spiderImg = loadSpriteSheet("images/Spider.png", 70, 70, 9);

  var cauldronImg = loadSpriteSheet("images/Cauldron.png", 500, 320, 12);

  var resultImg = loadSpriteSheet("images/Result_Appear.png", 265, 500, 13);

​

  eyeballAnim = loadAnimation(eyeballImg);

  lizardAnim = loadAnimation(lizardImg);

  appleAnim = loadAnimation(appleImg);

  spiderAnim = loadAnimation(spiderImg);

  cauldronAnim = loadAnimation(cauldronImg);

  resultAnim = loadAnimation(resultImg);

}

​

function setup() {

  createCanvas(800, 700);

  createGameObjects();

  textDisplayed = "Cast your spell!";

  fontRegular = loadFont('fonts/PatrickHand-Regular.ttf');

}

​

function draw() {

  background(bgImg);

  drawSprites();

  moveItems();

  countItemsInsideCauldron();

  checkSpells();

}

​

//------------------------- Spells -------------------------//

​

function checkSpells() {

  if (numOfEyeballs == 1 && numOfLizards == 1 && numOfApples == 1 && numOfSpiders == 2) {

    conjureCandy();

    clearCauldron();

  } else if ( numOfApples > 3 && numOfSpiders > 2) {

    witch.rotation = 180;

    clearCauldron();

  } 

  else if (numOfEyeballs == 2 && numOfLizards == 2 && numOfApples == 0 && numOfSpiders == 1) { 

    cat.changeImage("witch");

    clearCauldron();

  }

 else if (numOfEyeballs == 0 && numOfLizards == 1 && numOfApples == 3 && numOfSpiders == 0) { 

   cat.scale = 0.5; 

   clearCauldron(); 

 } 

  else if (numOfEyeballs == 1 && numOfLizards == 2 && numOfApples == 0 && numOfSpiders == 1)  { 

     filter(GRAY);

 } 

  else if (numOfEyeballs == 3 && numOfLizards == 4 && numOfApples == 3 && numOfSpiders == 3) { 

    filter(INVERT);

 } 

  else {

    displayText();

  }

}

​

//------------------------- Game Functions -------------------------//

​

function conjureCandy() {

  if (conjured == false) {

    resultSign.visible = true;

    candy.visible = true;

    resultAppear.visible = true;

    resultAppear.animation.changeFrame(0);

    resultAppear.animation.play();

    conjured = true;

  }

}

​

function resetRoom() {

  for (let i = allSprites.size() - 1; i >= 0; i--) {

    removeSprite(allSprites.get(i));

  }

  createGameObjects();

}

​

function clearCauldron() {

  itemsInCauldron.removeSprites();

  for (let i = itemsInCauldron.length - 1; i > 0; i--) {

    itemsInCauldron.remove(itemsInCauldron.get(i));

  }

}

​

function displayText() {

  textFont(fontRegular);

  textAlign(CENTER, BASELINE);

  textSize(30);

  fill(color(58, 188, 55));

  text(textDisplayed, 115, height / 2 - 200);

}

​

//------------------------- Draw Functions -------------------------//

​

function moveItems() {

  if (draggedSprite != null) {

    draggedSprite.position.x = mouseX;

    draggedSprite.position.y = mouseY;

  }

}

​

function checkCauldron(item, colliding) {

  if (!itemsInCauldron.contains(colliding)) {

    itemsInCauldron.add(colliding);

  }

}

​

function countItemsInsideCauldron() {

  numOfEyeballs = 0;

  numOfLizards = 0;

  numOfApples = 0;

  numOfSpiders = 0;

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

    if (itemsInCauldron.get(i).getAnimationLabel() == "eyeball") {

      numOfEyeballs += 1;

    } else if (itemsInCauldron.get(i).getAnimationLabel() == "lizard") {

      numOfLizards += 1;

    } else if (itemsInCauldron.get(i).getAnimationLabel() == "apple") {

      numOfApples += 1;

    } else if (itemsInCauldron.get(i).getAnimationLabel() == "spider") {

      numOfSpiders += 1;

    }

  }

}

​

//------------------------- Create Game Objects -------------------------//

​

function createGameObjects() {

  itemsInCauldron = new Group();

  conjured = false;

​

  cauldron = createSprite(400, 450, 300, 220);

  cauldron.shapeColor = color(0, 0, 0);

  cauldron.addAnimation('cauldron', cauldronAnim);

  cauldron.setCollider("rectangle", 0, 0, 300, 220);

​

  ingredientsDesk = createSprite(400, height - 75, 800, 150);

  desk = loadImage("images/IngredientDesk.png");

  ingredientsDesk.addImage(desk);

​

​

  shelf = createSprite(630, 80, 250, 90);

  shelfImg = loadImage("images/ShelfItems.png");

  shelf.addImage(shelfImg);

​

  broom = createSprite(755, 350, 90, 290);

  broomImg = loadImage("images/Broom.png");

  broom.addImage(broomImg);

​

  witch = createSprite(100, 350, 100, 100);

  witchImg = loadImage("images/Witch.png");

  witch.addImage(witchImg);

​

  cat = createSprite(680, 430, 100, 130);

  catImg = loadImage("images/Cat.png");

  cat.addImage("cat", catImg);

  cat.addImage("witch", witchImg);

​

​

  resultAppear = createSprite(width / 2, 150, 70, 70);

  resultAnim.looping = false;

​

  resultAppear.addAnimation('slime', resultAnim);

  resultAppear.setCollider("rectangle", 0, 0, 70, 70);

  resultAppear.visible = false;

​

​

  resultSign = createSprite(width / 2, 100, 100, 100);

  resultImg = loadImage("images/Result.png");

  resultSign.addImage(resultImg);

  resultSign.visible = false;

​

​

  candy = createSprite(width / 2, 140, 100, 100);

  candyImg = loadImage("images/Candy.png");

  candy.addImage(candyImg);

  candy.visible = false;

​

  eyeball = createSprite(200, height - 50, 70, 70);

  eyeball.shapeColor = color(255, 204, 0);

  eyeball.addAnimation('eyeball', eyeballAnim);

  eyeball.setCollider("rectangle", 0, 0, 70, 70);

​

  lizard = createSprite(330, height - 50, 70, 70);

  lizard.shapeColor = color(0, 204, 0);

  lizard.addAnimation('lizard', lizardAnim);

  lizard.setCollider("rectangle", 0, 0, 70, 70);

​

  apple = createSprite(460, height - 50, 70, 70);

  apple.shapeColor = color(255, 50, 20);

  apple.addAnimation('apple', appleAnim);

  apple.setCollider("rectangle", 0, 0, 70, 70);

​

  spider = createSprite(590, height - 50, 70, 70);

  spider.shapeColor = color(255, 50, 20);

  spider.addAnimation('spider', spiderAnim);

  spider.setCollider("rectangle", 0, 0, 70, 70);

​

  broom.onMousePressed = function() {

    resetRoom();

  }

  eyeball.onMousePressed = function() {

    newItem = createSprite(mouseX, mouseY, 70, 70);

    newItem.addAnimation('eyeball', eyeballAnim);

    newItem.setCollider("rectangle", 0, 0, 70, 70);

​

    newItem.onMousePressed = function() {

      if (draggedSprite == null) {

        draggedSprite = this;

      }

      if (itemsInCauldron.contains(this)) {

        inCauldron = true;

      }

    };

​

    newItem.onMouseReleased = function() {

      if (!cauldron.overlap(this, checkCauldron) && inCauldron) {

        itemsInCauldron.remove(this);

        this.remove();

      } else if (!cauldron.overlap(this, checkCauldron)) {

        this.remove();

      }

​

      if (draggedSprite == this) {

        draggedSprite = null;

      }

      inCauldron = false;

​

    };

  }

  lizard.onMousePressed = function() {

​

    newItem = createSprite(mouseX, mouseY, 70, 70);

    newItem.addAnimation('lizard', lizardAnim);

    newItem.setCollider("rectangle", 0, 0, 70, 70);

​

​

    newItem.onMousePressed = function() {

      if (draggedSprite == null) {

        draggedSprite = this;

      }

      if (itemsInCauldron.contains(this)) {

        inCauldron = true;

      }

    };

​

    newItem.onMouseReleased = function() {

      if (!cauldron.overlap(this, checkCauldron) && inCauldron) {

        itemsInCauldron.remove(this);

        this.remove();

      } else if (!cauldron.overlap(this, checkCauldron)) {

        this.remove();

      }

​

      if (draggedSprite == this) {

        draggedSprite = null;

      }

      inCauldron = false;

​

    };

  }

  apple.onMousePressed = function() {

    newItem = createSprite(mouseX, mouseY, 70, 70);

    newItem.addAnimation('apple', appleAnim);

    newItem.setCollider("rectangle", 0, 0, 70, 70);

​

    newItem.onMousePressed = function() {

      if (draggedSprite == null) {

        draggedSprite = this;

      }

      if (itemsInCauldron.contains(this)) {

        inCauldron = true;

      }

    };

​

    newItem.onMouseReleased = function() {

      if (!cauldron.overlap(this, checkCauldron) && inCauldron) {

        itemsInCauldron.remove(this);

        this.remove();

      } else if (!cauldron.overlap(this, checkCauldron)) {

        this.remove();

      }

​

      if (draggedSprite == this) {

        draggedSprite = null;

      }

      inCauldron = false;

​

    };

  }

  spider.onMousePressed = function() {

    newItem = createSprite(mouseX, mouseY, 70, 70);

    newItem.addAnimation('spider', spiderAnim);

    newItem.setCollider("rectangle", 0, 0, 70, 70);

​

    newItem.onMousePressed = function() {

      if (draggedSprite == null) {

        draggedSprite = this;

      }

      if (itemsInCauldron.contains(this)) {

        inCauldron = true;

      }

    };

​

    newItem.onMouseReleased = function() {

      if (!cauldron.overlap(this, checkCauldron) && inCauldron) {

        itemsInCauldron.remove(this);

        this.remove();

      } else if (!cauldron.overlap(this, checkCauldron)) {

        this.remove();

      }

​

      if (draggedSprite == this) {

        draggedSprite = null;

      }

      inCauldron = false;

​

    };

  }

}