let cols = 3;

let rows = 3;

//creating a grid

let grid = [

  [1, 2, 3],

  [4, 5, 6],

  [7, 8, 0]

];

​

function setup() {

  createCanvas(cols * gridSize, rows * gridSize + 50); // Increased canvas height to accommodate the text

}

​

function draw() {

  background(220);

​

  // naming each piece

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

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

      let val = grid[i][j];

      if (val !== 0) {

        drawTile(i, j, val);

      }

    }

  }

​

  drawText(); // Draw the text at the bottom

}

​

function drawTile(i, j, val) {

  fill(255);

  rect(i * gridSize, j * gridSize, gridSize, gridSize);

  fill(0);

  textSize(32);

  textAlign(CENTER, CENTER);

  text(val, i * gridSize + gridSize / 2, j * gridSize + gridSize / 2);

}

​

function drawText() {

  fill(0);

  textSize(20);

  textAlign(CENTER, CENTER);

  text("Move the pieces by clicking", width / 2, height - 20);

}

​

function mousePressed() {

  let i = floor(mouseX / gridSize);

  let j = floor(mouseY / gridSize);

​

  //checking if the piece is valid to be moved to the empty position

  if (isValidMove(i, j)) {

    //if yes then the swap allows to move the piece to the empty position

    swap(i, j);

  }

}

​

//checks if the box that we are moving the piece to is valid or not (empty or not)

function isValidMove(i, j) {

  let zeroPos = findEmptyPosition();

  return (

    (i === zeroPos[0] && abs(j - zeroPos[1]) === 1) ||

    (j === zeroPos[1] && abs(i - zeroPos[0]) === 1)

  );

}

​

// swap the pieces

function swap(i, j) {

  let zeroPos = findEmptyPosition();

  grid[zeroPos[0]][zeroPos[1]] = grid[i][j];

  grid[i][j] = 0;

}

​

//find empty position

function findEmptyPosition() {

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

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

      if (grid[i][j] === 0) {

        return [i, j];

      }

    }

  }

  return null;

}