Need help with this (sliding puzzle game)

Processing Coding Questions
1

I’ve been working on this for quite some time and am very lost right now. I’m trying to figure out how to shuffle the image, and then have it set to where the player can rearrange the image using the white square so that they can form the whole picture as one. I’ve seen videos online of the exact thing i’m trying to do, which is called sliding puzzle game, but no instructions on how to create it. right now, it’s not moving or shuffling…please help.

2

please go back

Edit your post

select the entire code with the mouse

click symbol </> in the small command bar

3

in my understanding you have to mouse click the field NEXT TO the white field to make it move ONTO the white field (swap). So you either mouse click the right neighbor, the left, the upper or the lower neighbor.

Remark 1

You have to rewrite this line

img[i] = loadImage( "A ("+str(i) + ").jpg");

to

 img[i] = loadImage((i+1) + ".gif");

Remark 2

You also needed this in setup():

Collections.shuffle(rand); //!!!!!!!!!!!!!!!!!!!!!!!!

I added this for you.

Example:

import java.util.Collections;

PImage[] img = new PImage[16];

ArrayList<Integer> rand = new ArrayList<Integer>();

final int row[] = {0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3};
final int col[] = {0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3};

int step = 0, white, start, init;

boolean lock = false, 
  play = false;

int Swidth, 
  Sheight;

void setup() {

  size(800, 400);
  background(255);

  Swidth = width/4;
  Sheight = height/4;

  //load images
  for (int i = 0; i < 16; i++) {
    img[i] = loadImage( "A ("+str(i) + ").jpg"); // !!!!!!!!!!!!!!!!!
    img[i].resize(Swidth-1, Sheight-1);
  }

  //for shuffle
  for (int i = 0; i < 16; i++) 
    rand.add(i);

  /**/
  Collections.shuffle(rand);  //!!!!!!!!!!!!!!!!!!!!!!!!
}

void draw() {
  //show all the puzzles (16)
  for (int i = 0; i < 16; i++)
    image(img[rand.get(i)], 
      row[i]*Swidth+0, col[i]*Sheight+0); 
  // Swidth-1, Sheight-1);

  //find position of white subpuzzle (whose index = 0)
  for (int i = 0; i < 16; i++)
    if (rand.get(i) == 0) 
      white = i;

  solved();
}//func 

// ----------------------------------------------------------------------------------------------

void mousePressed() {
  //
  //find position of NEIGHBOR of white subpuzzle (whose index = 0)
  for (int i = 0; i < 16; i++) {
    int x1= 
      row[i]*Swidth+0;
    int y1 = 
      col[i]*Sheight+0; 
    if (mouseX>x1&&
      mouseX<x1+Swidth&&
      mouseY>y1&&
      mouseY<y1+Sheight) {
      //--------------------------
      boolean done = false;
      if (!done) {
        int rightNeighour=getI( row[i]+1, col[i]);   
        if (rightNeighour==white) {
          println("1");
          Collections.swap(rand, rightNeighour, i );
          done = true;
        }//if
      }
      if (!done) {
        int neighour=getI( row[i]-1, col[i]);   //left 
        if (neighour==white) {
          println("2");
          Collections.swap(rand, neighour, i );
          done = true;
        }//if
      }
      if (!done) {
        int neighour=getI( row[i], col[i]+1);    // DOWN
        if (neighour==white) {
          println("3");
          Collections.swap(rand, neighour, i );
          done = true;
        }//if
      }
      if (!done) {
        int neighour=getI( row[i], col[i]-1);   // TOP 
        if (neighour==white) {
          println("4");
          Collections.swap(rand, neighour, i );
          done = true;
        }//if
      }//if
      //------------------------------
    }
  }
}

int getI(int i_, int j_) {
  // returns the 1D index for the 2D representation i_,j_
  for (int i = 0; i < 16; i++) {
    if ( row[i] == i_ && col[i] == j_) {
      return i;
    }
  }
  return -1; // false
} 

void solved() {

  //check if it’s solved
  int counter;
  boolean solved = false;

  for (counter = 0; counter < 16; counter++) {
    if (rand.get(counter)!=counter) 
      break;
  } 
  if (counter > 15) solved = true;

  if (solved && play) {
    //any subpuzzle cannot be moved UP/DOWN/LEFT/RIGHT
    lock = true;
    println("solved");
  }
} 
//
5

err… to run my code you need my loadImage line of code

So copy my Sketch into your processing and replace the loadImage line

That’s right. That’s what I wrote. But it was an error of yours I wanted to mention