let positions = [];

let tiles = [];

let win = [];

let img;

let clickedIndex;

let moves = 0;

let itIsDone = false;

​

function preload() {

  img = loadImage("Cosmonaut.png");

  generatePositions(400, 400, 100);

}

​

function setup() {

  createCanvas(400, 400);

  img.resize(width, height);

  background(img, 50);

  for (let col = 0; col < width; col += tileSize) {

    for (let row = 0; row < height; row += tileSize) {

      noFill();

      // create and image of a section of the source image

      let tile = createImage(tileSize, tileSize);

​

      if (col === width - tileSize && row === height - tileSize) {

        tile.copy(img, row, col, tileSize, tileSize, 0, 0, tileSize, tileSize);

        // posterize turns the last rectangle black

        tile.filter(POSTERIZE);

        // add the dark property to the object to check if the tile clicked is

        // touching the empty tile

        tile.dark = true;

      } else {

        tile.copy(img, row, col, tileSize, tileSize, 0, 0, tileSize, tileSize);

        tile.dark = false;

      }

      // add the position to each tile object

      tile.pos = tiles.length;

      tiles.push(tile);

      // image(tile, col, row);

    }

  }

  // shuffle is a function from p5js

  tiles = shuffle(tiles);

}

​

function draw() {

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

    image(tiles[i], positions[i][0], positions[i][1]);

  }

  if (itIsDone) {

    let movesDiv = createDiv();

    movesDiv.html(`Took you ${moves} moves to solve the puzzle`);

    movesDiv.style("font-size", "26px");

    movesDiv.position(10, 410);

  }

}

​

function mousePressed() {

  let sX = floor(mouseX / tileSize);

  let sY = floor(mouseY / tileSize);

  // get the index of the clicked tile

  ind = getThatIndex(sX, sY);

​

  // go over the different combinations of tiles surrounding and empty tile

  // and swap them

  if (tiles[ind + 1] && tiles[ind + 1].dark) {

    [tiles[ind], tiles[ind + 1]] = [tiles[ind + 1], tiles[ind]];

  }

  if (tiles[ind - 1] && tiles[ind - 1].dark) {

    [tiles[ind], tiles[ind - 1]] = [tiles[ind - 1], tiles[ind]];

  }

  if (tiles[ind + 4] && tiles[ind + 4].dark) {

    [tiles[ind], tiles[ind + 4]] = [tiles[ind + 4], tiles[ind]];

  }

  if (tiles[ind - 4] && tiles[ind - 4].dark) {

    [tiles[ind], tiles[ind - 4]] = [tiles[ind - 4], tiles[ind]];

  }

  // check if the puzzle is solved

  done();

}

​

// width, height, tileSize

function generatePositions(w, h, s) {

  tileSize = s;

  let count = 0;

​

  // generate the positions array

  for (let col = 0; col < w; col += s) {

    for (let row = 0; row < h; row += s) {

      let arr = [row, col];

      positions.push(arr);

      win.push(count);

      count++;

    }

  }

}

​

function getThatIndex(itemOneInSubArray, itemTwoInSubArray) {

  // convert items in the positions array to strings

  let mainArrayString = positions.map((i) => JSON.stringify(i));

​

  // find the target tile and convert it to a string

  let target = [itemOneInSubArray * 100, itemTwoInSubArray * 100];

  let targetString = JSON.stringify(target);

​

  // use indexOf to fin the index of the selected tile

  let foundIndex = mainArrayString.indexOf(targetString);

  return foundIndex;

}

​

function done() {

  // create array with the positions of the current shuffled array

  let indy = tiles.map((i) => i.pos);

​

  // compare the two arrays as strings

  if (JSON.stringify(indy) === JSON.stringify(win)) {

    print("yay!!!");

    itIsDone = true;

  } else {

    moves++;

    print("not yet");

  }

}

​