let music;

let grid = [];

let rows = 10;

let cols = 10;

let squareSize = 50;

let shells = [];

let fishes = [];

let stitchX = 0;

let stitchY = 0;

​

function preload() {

  stitch = loadImage('stitch.png');

  instructionsIcon = loadImage('instructions.png');

  musicIcon = loadImage('music.png');

  shell = loadImage('shell.png');

  fish = loadImage('fish.png');

  backgroundImage = loadImage('background.jpg');

  music = loadSound('music.mp3');

}

​

function setup() {

  createCanvas(800, 600);

  music.loop();

  // Create the sand grid

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

    grid[i] = [];

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

      grid[i][j] = new Square(i * squareSize, j * squareSize);

    }

  }

​

  // Place shells

  shells.push(createVector(1, 3));

  shells.push(createVector(3, 1));

  shells.push(createVector(5, 9));

  shells.push(createVector(9, 9));

​

  // Place fish

  fishes.push(createVector(1, 1));

  fishes.push(createVector(2, 2));

  fishes.push(createVector(3, 3));

  fishes.push(createVector(4, 4));

  fishes.push(createVector(5, 5));

  fishes.push(createVector(6, 6));

}

​

function draw() {

  // Draw the background image

  background(backgroundImage);

  // Draw the grid

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

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

      grid[i][j].show();

    }

  }

​

  // Draw the shells

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

    let x = shells[i].x * squareSize;

    let y = shells[i].y * squareSize;

    image(shell, x, y, squareSize, squareSize);

  }

​

  // Draw the fish

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

    let x = fishes[i].x * squareSize;

    let y = fishes[i].y * squareSize;

    image(fish, x, y, squareSize, squareSize);

  }

​

  // Draw Stitch (player character)

  image(stitch, stitchX * squareSize, stitchY * squareSize, squareSize, squareSize);

​

  // Draw UI

  drawUI();

}

​

function drawUI() {

  // Text and icons

  fill(0);

  textSize(24);

  text('shells', 10, 550);

  text(shells.length, 100, 550);

​

  // Instructions and music icons

  image(instructionsIcon, 200, 520, 40, 40);

  image(musicIcon, 400, 520, 40, 40);

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    stitchY = max(0, stitchY - 1);

  } else if (keyCode === DOWN_ARROW) {

    stitchY = min(rows - 1, stitchY + 1);

  } else if (keyCode === LEFT_ARROW) {

    stitchX = max(0, stitchX - 1);

  } else if (keyCode === RIGHT_ARROW) {

    stitchX = min(cols - 1, stitchX + 1);

  }

}

​

// Class for the grid squares

class Square {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  show() {

    fill(180, 140, 90); // Light brown color

    rect(this.x, this.y, squareSize, squareSize);

    fill(150, 120, 80); // Darker brown inside

    rect(this.x + 5, this.y + 5, squareSize - 10, squareSize - 10);

  }

}

​