let currentEnclosure = null; // Tracks current enclosure

let instructionScreen = true;

let foodItems = [];

let backButton;

let correctSound, wrongSound;

​

class Enclosure {

  constructor(x, y, w, h, name, imgPath, soundPath, correctFood) {

    this.x = x; 

    this.y = y;

    this.w = w; // width of enclosure

    this.h = h; // height of enclosure 

    this.name = name;

    this.img = loadImage(imgPath);

    this.sound = loadSound(soundPath); // Assign the sound to the Enclosure instance

    this.correctFood = correctFood; // correct food for the animal

  }

​

  // Display the enclosure

  display() {

    fill(150, 200, 150);

    rect(this.x, this.y, this.w, this.h); 

    image(this.img, this.x + 10, this.y + 10, this.w - 20, this.h - 20);

    fill(0);

    textFont('New Courier');

    textStyle(ITALIC);

    textSize(15);

    textAlign(CENTER, CENTER);

    text(this.name, this.x + this.w / 2, this.y + this.h - 10);

  }

​

 checkClick() {

    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {

      this.sound.play();

      currentEnclosure = this.name;

      resetFoodPositions(); // Reset food positions when entering a new enclosure

    }

}

​

​

  // Show details of animal inside enclosure

  showDetails() {

    background(200, 250, 200);

    fill(0);

    textSize(30);

    textAlign(CENTER);

    text("Welcome to the " + this.name + " Enclosure!", width / 2, 50);

    image(this.img, width / 2 - 150, height / 2 - 100, 300, 300); // Animal image

  }

​

  stopSound() {

    this.sound.stop(); // Stop the sound when leaving the enclosure

  }

checkFood(chosenFood) {

  // Check if the dragged food is the correct food for the enclosure

  if (chosenFood.name === this.correctFood) {

    correctSound.play(); // Play the correct sound if food is right

  } else {

    wrongSound.play(); // Play the wrong sound if food is wrong

    console.log('Wrong food - got', chosenFood.name, 'correct', this.correctFood);

  }

}

}

​

class Food {

  constructor(x, y, imgPath, name) {

    this.x = x;

    this.y = y;

    this.startX = x; // Store initial x position

    this.startY = y; // Store initial y position

    this.img = loadImage(imgPath);

    this.name = name;

    this.dragging = false;

    console.log("Food constructor: this.name", this.name);

  }

  display() {

    image(this.img, this.x, this.y, 50, 50);

  }

​

  mousePressed() {

    if (mouseX > this.x && mouseX < this.x + 50 && mouseY > this.y && mouseY < this.y + 50) {

      this.dragging = true;

    }

  }

​

  mouseDragged() {

    if (this.dragging) {

      this.x = mouseX - 25;

      this.y = mouseY - 25;

    }

  }

​

  mouseReleased() {

    this.dragging = false;

  }

  resetPosition() {

    // Reset the food item to its starting position

    this.x = this.startX;

    this.y = this.startY;

  }

}

​

function preload() {

  // Load images and sounds for each animal

  zoo.push(new Enclosure(70, 100, 200, 190, 'Lion', 'lion.png', 'lion_roar.mp3', 'Meat'));

  zoo.push(new Enclosure(325, 100, 200, 190, 'Elephant', 'elephant.png', 'elephant_sound.mp3', 'Leaves'));

  zoo.push(new Enclosure(70, 320, 200, 190, 'Giraffe', 'giraffe.png', 'giraffe_sound.mp3', 'Leaves'));

  zoo.push(new Enclosure(325, 320, 200, 190, 'Bear', 'bear.png', 'bear_sound.mp3', 'Fish'));

​

  // Load sounds for food reactions

  correctSound = loadSound('correct.mp3');

  wrongSound = loadSound('wrong.mp3');

​

  // Create food items

  foodItems.push(new Food(500, 100, 'meat.png', 'Meat'));

  foodItems.push(new Food(500, 200, 'fish.png', 'Fish'));

  foodItems.push(new Food(500, 300, 'leaves.png', 'Leaves'));

}

​

function setup() {

  createCanvas(600, 600);

  backButton = createButton('Back');

  backButton.position(10, 10);

  backButton.mousePressed(() => {

    currentEnclosure = null;

    for (let enclosure of zoo) {

      enclosure.stopSound();

    }

  });

}

​

function draw() {

  if (instructionScreen) {

    // Instruction Screen

    background(100, 150, 100);

    fill(255);

    textFont('New Courier');

    textSize(30);

    textAlign(CENTER);

    text("Welcome to the Interactive Zoo!", width / 2, height / 2.5);

    textSize(20);

    text("Click anywhere to start exploring the zoo.", width / 2, height / 2);

  } else if (currentEnclosure === null) {

    // Home screen of the zoo

    background(180, 220, 180);

    fill(0);

    textSize(25);

    textAlign(CENTER);

    text("Zoo Home", width / 2, 50);

​

    // Display all enclosures

    for (let enclosure of zoo) {

      enclosure.display();

    }

  } else {

    // Display details of clicked animal enclosure

    for (let enclosure of zoo) {

      if (enclosure.name === currentEnclosure) {

        enclosure.showDetails(); // Show details of selected animal

​

        // Define the area for sound activation (adjust as necessary)

        let activationZoneX = 175; // Adjust these values as needed

        let activationZoneY = 250; // Top of the enclosure

        let activationZoneWidth = enclosure.w / 1.5; // Width of the activation area

        let activationZoneHeight = enclosure.h / 1.5; // Height of the activation area

​

        // Draw the activation area for debugging

        fill(255, 0, 0, 100); // Semi-transparent red for visibility

        rect(activationZoneX, activationZoneY, activationZoneWidth, activationZoneHeight);

      }

    }

​

    // Display food items and check if fed correctly

    for (let food of foodItems) {

      food.display();

    }

​

    fill(0);

    textSize(16);

    text("Drag the right food to feed the animal.", width / 2, height - 80);

  }

}

​

​

function mousePressed() {

  if (instructionScreen) {

    instructionScreen = false; // Exit instruction screen when clicked

  } else if (currentEnclosure === null) {

    // Check if an enclosure is clicked

    for (let enclosure of zoo) {

      enclosure.checkClick();

    }

  }

​

  // Check if food is selected

  for (let food of foodItems) {

    food.mousePressed();

  }

}

​

function mouseDragged() {

  for (let food of foodItems) {

    food.mouseDragged();

  }

}

​

function mouseReleased() {

  for (let food of foodItems) {

    food.mouseReleased();

​

    // Check if food is dropped on the current enclosure

    if (currentEnclosure !== null) {

      for (let enclosure of zoo) {

        if (enclosure.name === currentEnclosure) {

          // Define the area for sound activation (e.g., top center of the enclosure)

          let activationZoneX = 175; // Adjust these values as needed

          let activationZoneY = 250; // Top of the enclosure

          let activationZoneWidth = enclosure.w / 1.5; // Width of the activation area

          let activationZoneHeight = enclosure.h / 1.5; // Height of the activation area

​

          // Check if food is within the activation area

          if (food.x > activationZoneX && food.x < activationZoneX + activationZoneWidth &&

              food.y > activationZoneY && food.y < activationZoneY + activationZoneHeight) {

            // If food is inside the activation zone, check if it’s the right food

            enclosure.checkFood(food); // Pass the food item to checkFood

          }

        }

      }

    }

  }

}

// Reset all food items to their initial positions

function resetFoodPositions() {

  for (let food of foodItems) {

    food.resetPosition();

  }

}