let instruction;

let sound;

let fish;

let cols = 16; // 16 columns

let rows = 9; // 9 rows

let sandboxes = [];

let sandboxWidth;

let sandboxHeight;

let padding = 5; // the distance between each sandbox

let stitch;

let stitchX, stitchY;

let pixelFont;

let initialX = 30;

let initialY = 80;

let isMusicPlaying = true; 

let myColor;

​

function preload() {

  backgroundImage = loadImage('background.jpg');

  //shell = loadImage('shell.png');

  stitch = loadImage('stitch.png');

  sound = loadImage('sound.png');

  pixelFont = loadFont('PixelifySans.ttf');

  music = loadSound('music.mp3');

}

​

function setup() {

  createCanvas(800, 600);

  pixelDensity(1);

  music.loop();

  // Calculate sandbox dimensions based on available space

  let gridWidth = 720 - (cols - 1) * padding; // Subtract total horizontal padding

  let gridHeight = 420 - (rows - 1) * padding; // Subtract total vertical padding

  sandboxWidth = gridWidth / cols;

  sandboxHeight = gridHeight / rows;

​

  // Centering the grid

  let gridStartX = width / 2 - 720 / 2;

  let gridStartY = height / 2 - 420 / 2 - 40;

  // Set Stitch's initial position in the grid

  stitchX = gridStartX + sandboxWidth - 10; // 1st column

  stitchY = gridStartY + sandboxHeight - 10; // 1st row

  // Create sandbox objects and store them in the sandboxes array

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

    sandboxes[i] = [];

    for (let j = 0; j < rows; j++) {

      let x = gridStartX + i * (sandboxWidth + padding);

      let y = gridStartY + j * (sandboxHeight + padding);

      sandboxes[i][j] = new Sandbox(x, y, sandboxWidth, sandboxHeight);

    }

  }

}

​

function draw() {

  background(backgroundImage);

  myColor = color(40, 91, 110);

  rectMode(CENTER);

  fill(246, 225, 169);

  noStroke();

  rect(width/2, height/2-40, 720, 420, 25, 25, 25, 25); // The boundaries for Stitch

  fill(myColor);

  rect(width/2-230, height/2+210, 150, 40, 10, 10, 10, 10);

  rect(width/2+230, height/2+210, 120, 40, 10, 10, 10, 10);

  fill(255);

  textFont(pixelFont);

  textSize(20);

  text('how to play', width/2-290, height/2+215);

  text('music on', width/2+190, height/2+215);

  sound.resize(35, 35);

  image(sound, 700, 492);

  for (let i = 2; i < cols; i++) {

    for (let j = 1; j < rows; j++) {

      sandboxes[i][j].display();

    }

  }

  stitch.resize(30, 30);

  image(stitch, stitchX, stitchY, 30, 30);

​

  // Constrain Stitch within the rectangle boundaries

  let rectLeft = width / 2 - 720 / 2;

  let rectRight = width / 2 + 720 / 2;

  let rectTop = height / 2 - 420 / 2 - 40;

  let rectBottom = height / 2 + 420 / 2 - 40;

  stitchX = constrain(stitchX, rectLeft, rectRight - 60); // Constrain width (subtract 30 for image width)

  stitchY = constrain(stitchY, rectTop, rectBottom - 150); // Constrain height (subtract 30 for image height)

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    stitchY -= sandboxHeight + padding; // Move up

  } else if (keyCode === DOWN_ARROW) {

    stitchY += sandboxHeight + padding; // Move down

  } else if (keyCode === LEFT_ARROW) {

    stitchX -= sandboxWidth + padding; // Move left

  } else if (keyCode === RIGHT_ARROW) {

    stitchX += sandboxWidth + padding; // Move right

  }

}

​

function mousePressed() {

  if (music.isPlaying()) {

    music.stop();

  }

}