p5.js Web Editor | Interactive Zoo copy testing Taku

xxxxxxxxxx
let zoo = [];
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;
  }
}
​
​
  // 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
  }
  
// check later
  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', Food.name, ' correct', this.correctFood);
    }
  }
}
​
class Food {
  constructor(x, y, imgPath, name) {
    this.x = x;
    this.y = y;
    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;
  }
}
​
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
      }
    }
​
    // 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
    // - for each food, check if food is inside enclosure
    // - assign food that was dropped on enclosure to chosenFood
    
    // If food inside enclosure
    // - ask enclosure if it's the right food
    if (enclosure.checkFood(chosenFood)) {
      // right food was chosen
    } else {
      // wrong food
    }
    
    //   - good food - win
    //   - bad fodo - lose
    if (currentEnclosure !== null) {
      for (let enclosure of zoo) {
        if (enclosure.name === currentEnclosure) {
          enclosure.checkFood(); // Check if the food is correct
        }
      }
    }
  }
}
Cookies

Sketch Files

Console

Preview
