let canvas;

let spritesheet;

let sprites = [];

let direction = 0; // 0 down, 1 left, 2 right, 3 up

let speed = 3.5; // Speed of movement

let changeDirectionInterval = 120; // Number of frames before changing direction

let x, y;

​

let items = []; // Array to store the pickable items

let selectedItem = null; // Track the selected item

let offsetX = 0, offsetY = 0; // Track offset between click and image position

​

let instructionIndex = 0; // Track which instruction we're on

let instructionImages = []; // Array to store instruction images

let targetSpot = { x: 300, y: 300, w: 150, h: 150 }; // The spot where items need to be placed

​

function preload() {

  bg = loadImage('img/bg.png');

  unclickImg = loadImage('img/unclick.png');

  clickImg = loadImage('img/click.png');

  // Load images for the items

  items.push({ name: 'cloud', img: loadImage('img/cloud.png'), x: 714, y: 420, w: 100, h: 100 });

  items.push({ name: 'cursor', img: loadImage('img/cursor_.png'), x: 698, y: 670, w: 100, h: 100 });

  items.push({ name: 'net', img: loadImage('img/net.png'), x: 599, y: 652, w: 100, h: 100 });

  items.push({ name: 'web', img: loadImage('img/web.png'), x: 659, y: 278, w: 100, h: 100 });

​

  // Load instruction images

  instructionImages.push(loadImage('img/instruction1.png')); // "Add the web image to the cauldron"

  instructionImages.push(loadImage('img/instruction2.png')); // "Add the internet image to the cauldron"

  instructionImages.push(loadImage('img/instruction3.png')); // "Add the cloud image to the cauldron"

  instructionImages.push(loadImage('img/instruction4.png')); // "Add the cursor image to the cauldron"

​

  // Load the sprite sheet

  spritesheet = loadImage("all.png");

}

​

function setup() {

  canvas = createCanvas(800, 800);  

  noCursor();  

  centerCanvas();

​

  let w = spritesheet.width / 4;

  let h = spritesheet.height;

​

  for (let i = 0; i < 4; i++) {

    sprites[i] = spritesheet.get(i * w, 0, w, h); 

  }

​

  x = width / 2; 

  y = height / 2; 

}

​

function draw() {

  background(bg); 

​

  fill(255); 

  textSize(16);

  text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

​

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

    let item = items[i];

    if (selectedItem === item) {

      item.x = mouseX + offsetX;

      item.y = mouseY + offsetY;

    }

​

    image(item.img, item.x, item.y, item.w, item.h); 

  }

​

  if (frameCount % changeDirectionInterval === 0) {

    direction = int(random(4)); 

  }

​

  if (direction === 0) {

    y += speed; 

  } else if (direction === 1) {

    x -= speed; 

  } else if (direction === 2) {

    y -= speed; 

  } else if (direction === 3) {

    x += speed; 

  }

​

  if (x < 50) {

    x = 50;

    direction = 3; 

  } else if (x > width - 50) {

    x = width - 50;

    direction = 1; 

  }

  if (y < 50) {

    y = 50;

    direction = 0; 

  } else if (y > height - 50) {

    y = height - 50;

    direction = 2; 

  }

​

  let w = spritesheet.width / 4;  

  let h = spritesheet.height;     

  let newW = w / 4;  

  let newH = h / 4;  

  image(sprites[direction], x, y, newW, newH); 

​

  if (mouseIsPressed) {

    image(clickImg, mouseX, mouseY, 100, 200);  

  } else {

    image(unclickImg, mouseX, mouseY, 100, 200);

  }

​

  // Display the instruction image if the current task is not completed

  if (instructionIndex < instructionImages.length) {

    image(instructionImages[instructionIndex], 20, 20, 700, 100);

  }

​

  // Check if selected item is placed in the target spot

  if (selectedItem) {

    let item = selectedItem;

    if (

      item.x > targetSpot.x && item.x < targetSpot.x + targetSpot.w &&

      item.y > targetSpot.y && item.y < targetSpot.y + targetSpot.h

    ) {

      // Match the item name to the instruction and advance the index accordingly

      if (instructionIndex === 0 && item.name === 'web' ||

          instructionIndex === 1 && item.name === 'net' ||

          instructionIndex === 2 && item.name === 'cloud' ||

          instructionIndex === 3 && item.name === 'cursor') {

        instructionIndex++; // Move to the next instruction

        selectedItem = null; // Reset the selected item

      }

    }

  }

}

​

function mousePressed() {

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

    let item = items[i];

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

      selectedItem = item;

      offsetX = item.x - mouseX; 

      offsetY = item.y - mouseY;

      break;

    }

  }

}

​

function mouseReleased() {

  selectedItem = null;

}

​

function centerCanvas() {

  let x = (windowWidth - width) / 2;

  let y = (windowHeight - height) / 2;

  canvas.position(x, y); 

}

​

function windowResized() {

  centerCanvas();  

}