p5.js Web Editor | Interactive Zoo copy testing Taku copy

xxxxxxxxxx
let zoo = [];
let currentEnclosure = null; // Tracks current enclosure
let instructionScreen = true;
let foodItems = [];
let backButton;
let correctSound, wrongSound;
​
class Enclosure {
  constructor(x, y, width, height, hitboxX, hitboxY, hitboxWidth, hitboxHeight, correctFood) {
    this.x = x; // enclosure position
    this.y = y;
    this.w = width;
    this.w = height;
    this.hitbox = { x: hitboxX, y: hitboxY, width: hitboxWidth, height: hitboxHeight }; // Hitbox for animal's face
    this.correctFood = correctFood;
  }
​
  // Function to check if the food is inside the enclosure
  isInside(food) {
    return (food.x > this.x && food.x < this.x + this.width &&
            food.y > this.y && food.y < this.y + this.height);
  }
​
  // Function to check if the food is inside the animal's face hitbox
  isInsideHitbox(food) {
    return (food.x > this.hitbox.x && food.x < this.hitbox.x + this.hitbox.width &&
            food.y > this.hitbox.y && food.y < this.hitbox.y + this.hitbox.height);
  }
​
  // Check if the dragged food is the correct food for the enclosure
  checkFood(chosenFood) {
    if (chosenFood.name === this.correctFood) {
      correctSound.play(); // Play correct sound
      return true; // Correct food
    } else {
      wrongSound.play(); // Play wrong sound
      return false; // Incorrect food
    }
  }
  // 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
}
class Food {
  constructor(name, x, y, width, height) {
    this.name = name; // Name of the food
    this.x = x; // X position
    this.y = y; // Y position
    this.width = width; // Width of the food
    this.height = height; // Height of the food
  }
​
  // Function to check if the food is inside an enclosure
  isInside(enclosure) {
    return (this.x > enclosure.x && this.x < enclosure.x + enclosure.width &&
            this.y > enclosure.y && this.y < enclosure.y + enclosure.height);
  }
​
  // Function to visually display the food
  display() {
    fill(100); // Set color for food
    rect(this.x, this.y, this.width, this.height); // Draw food as a rectangle
}
  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() {
  let chosenFood = null; // To track the dropped food
  let currentEnclosure = null; // To track the enclosure where food is dropped
​
  for (let food of foodItems) {
    food.mouseReleased(); // Call the mouseReleased function for each food item
​
    // Check if the food is dropped inside any enclosure
    for (let enclosure of zoo) {
      if (food.isInside(enclosure)) {
        chosenFood = food; // Set the chosenFood to the dropped food
        currentEnclosure = enclosure; // Set the current enclosure
        break; // Exit the loop once food is dropped on an enclosure
      }
    }
  }
​
  // If food was dropped in an enclosure and we have a chosenFood
  if (currentEnclosure !== null && chosenFood !== null) {
    // Check if food is inside the hitbox of the animal's face
    if (currentEnclosure.isInsideHitbox(chosenFood)) {
      // Now check if it's the correct food
      if (currentEnclosure.checkFood(chosenFood)) {
        console.log("You chose the correct food!");
        // Trigger any win logic (e.g., increase score, display success message)
      } else {
        console.log("That's the wrong food.");
        // Trigger any lose logic (e.g., decrease score, display failure message)
      }
    } else {
      console.log("Food was dropped outside the hitbox. No sound will be played.");
      // No sound or feedback if food is not dropped on the hitbox
    }
  } else {
    console.log("Food was not dropped in an enclosure.");
  }
}
Cookies

Sketch Files

Console

Preview
