const M = 4; // # of columns

​

let MAXshuffle = Math.floor(N * N * M * M / 2); // # of times the puzzle will be shuffled

​

let picture;

let pieces = [];

let fade = 0; // variable to set the visibility of the grid lines

let hide = 255; // tint to hide the last/blank puzzle piece

let shuffleCount = 0; // # of times the puzzle has been shuffle

let message; // html element for text to be displayed

let moves = 0; // count how many moves it takes the user

let startTime; // frame of the first move

let endTime; // frame of the final move

// Grid Line Color Variables

let rcolor;

let gcolor;

let bcolor;

​

function preload() {

  picture = loadImage('media/jessemc.jpg');

}

​

function setup() {

  createCanvas(400, 400);

  message = createP("What a good looking guy!");

​

  for (var i = 0; i < N * M; i++) {

    pieces[i] = new Piece(i);

  }

​

  // Set random R,G,B for the grid line color

  rcolor = random(255);

  gcolor = random(255);

  bcolor = random(255);

​

}

​

function draw() {

  background(0);

​

  // Display puzzle pieces

  for (var i = 0; i < N * M; i++) {

    pieces[i].display();

  }

​

  // Puzzle Grid Lines

  strokeWeight(2);

  stroke(rcolor, gcolor, bcolor, fade);

  for (var x = 0; x <= width; x += width / M) {

    line(x, 0, x, height); // Horizontal Lines

  }

  for (var y = 0; y <= height; y += height / N) {

    line(0, y, width, y); // Vertical Lines

  }

  if (fade < 255 && shuffleCount < MAXshuffle) fade += 5; // fade in lines

​

  // Shuffle puzzle pieces

  if (hide <= 0 && shuffleCount < MAXshuffle) {

    let i = floor(random(N));

    let j = floor(random(M));

    while (!checkSwap(i, j)) {

      i = floor(random(N));

      j = floor(random(M));

    }

    shuffleCount++;

  }

​

  // Change messages

  if (shuffleCount == 1)

    message.html("... but this shuffling may be an improvement");

  if (shuffleCount == MAXshuffle - 1)

    message.html("Help put the picture back together!");

  if (shuffleCount == MAXshuffle)

    if (!checkSolved() && moves > 1)

      message.html(moves + " moves");

    else if (!checkSolved() && moves > 0)

    message.html(moves + " move");

  else if (checkSolved()) {

    let totalTime = (endTime - startTime) / 30;

    if (hide < 255) hide += 5;

    else if (hide >= 255 && fade > 0) fade -= 5;

    else if (hide >= 255 && fade <= 0)

      message.html("<b>Good job!</b><br>Not even all the kings horses and all the kings men could have put Jesse back together again!<br><b>You solved the puzzle in " + moves + " moves and " + totalTime + " seconds!</b><br><i>Play again to try to beat your score.<br><b>You can also change the difficulty by changing N and M at the top of the code.</b></i>");

  }

​

  /* Failed attempt to touch response work on iPhone device

  // Touch Events for iPhones

  if (touches.length > 0) {

    if (shuffleCount == MAXshuffle && !checkSolved()) {

      let j = (int)(touches[0].x / (width / M));

      let i = (int)(touches[0].y / (height / N));

​

      if (checkSwap(i, j))

        moves++;

      if (moves == 1)

        startTime = frameCount;

      if (checkSolved())

        endTime = frameCount;

    }

  }

  */

}

​

function mouseClicked() {

​

  if (shuffleCount == MAXshuffle && !checkSolved()) {

    let j = (int)(mouseX / (width / M));

    let i = (int)(mouseY / (height / N));

​

    if (checkSwap(i, j))

      moves++;

    if(moves == 1)

      startTime = frameCount;

    if(checkSolved())

      endTime = frameCount;

  }

​

}

​

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    if (checkSwap(pieces[N * M - 1].row, pieces[N * M - 1].col + 1)) moves++;

  } else if (keyCode === RIGHT_ARROW) {

    if (checkSwap(pieces[N * M - 1].row, pieces[N * M - 1].col - 1)) moves++;

  } else if (keyCode === UP_ARROW) {

    if (checkSwap(pieces[N * M - 1].row + 1, pieces[N * M - 1].col)) moves++;

  } else if (keyCode === DOWN_ARROW) {

    if (checkSwap(pieces[N * M - 1].row - 1, pieces[N * M - 1].col)) moves++;

  }

}

​

function checkSolved() {

​

  let solved = 0;

​

  for (var index = 0; index < N * M; index++) {

    if (pieces[index].i == pieces[index].row && pieces[index].j == pieces[index].col)

      solved++;

  }

  if (solved >= N * M - 1)

    return true;

  else

    return false;

​

}

​

function checkSwap(i, j) {

  // check if this (i,j) piece is adjacent to the blank piece

  if (((i == pieces[N * M - 1].row - 1 || i == pieces[N * M - 1].row + 1) && (j == pieces[N * M - 1].col)) || ((j == pieces[N * M - 1].col - 1 || j == pieces[N * M - 1].col + 1) && (i == pieces[N * M - 1].row))) {

    for (var index = 0; index < N * M; index++) {

      if (pieces[index].row == i && pieces[index].col == j)

        pieces[index].swap();

    }

    return true;

  }

  return false;

}

​

function Piece(index) {

  this.i = (int)(index / M);

  this.j = index % M;

  this.row = this.i;

  this.col = this.j;

​

  this.display = function() {

    if (this.i == (N - 1) && this.j == (M - 1) && fade == 255) { // make the last piece blank

      tint(255, hide);

      if (moves == 0 && hide > 0) hide -= 5;

    } else noTint();

​

    image(picture, this.col * width / M, this.row * height / N, width / M, height / N, this.j * picture.width / M, this.i * picture.height / N, picture.width / M, picture.height / N);

​

  }

​

  this.swap = function() {

    let r = this.row;

    let c = this.col;

    this.row = pieces[N * M - 1].row;

    this.col = pieces[N * M - 1].col;

    pieces[N * M - 1].row = r;

    pieces[N * M - 1].col = c;

  }

​

}