How to move an image on click in JavaFX

Question

I am new to JavaFX and I would like to create Lloyds fifteen game(https://en.wikipedia.org/wiki/15_puzzle). I created controler for the game but I cant see a way to connect it with some drawing pane. I´d like to move elements on click.

edit: I´d need help with choosing right pane to draw elements(should they extend something?), that would be clickable.

Controler: it creates matrix of elements. it provides basic methods to shuffle the board and to move a single element(those methods check, if zero(=blank field) is next to this element, then the element can move). finally it has method to check, if the puzzle is in final state(all elements are in their final positions)

import java.util.Random;

public class LloydsFifteen {

  Element[][] actualState;
  int[] zeroPosition;
  int countInARow;
  int numberOfDrags;

  //for Lloyds fifteen, countInARow will be 4
  public LloydsFifteen(int countInARow)
  {
      numberOfDrags = 0;

      this.countInARow = countInARow;
      actualState = new Element[countInARow][countInARow];
      zeroPosition = new int[2];

      zeroPosition[0] = countInARow-1;
      zeroPosition[1] = countInARow-1;

      for(int i = 0; i < countInARow; i++)
      {         
          for(int j = 0; j < countInARow; j++)
          {
              actualState[i][j] = new Element(i*countInARow + j);


          }

      }

      shuffleLloyd(100000);

      for(int i = 0; i < countInARow; i++)
      {         
          for(int j = 0; j < countInARow; j++)
          {
              System.out.println("prvek na pozici [" + i + ", " + j + "] ma id: " + 
                      actualState[i][j].finalPosition + " a aktualni pozici: " + actualState[i][j].actualPosition );


          }

      }

      System.out.println("a pozice nuly je [" + zeroPosition[0] + ", " + zeroPosition[1] + "]" );
      System.out.println("a pocet provedenych tahu je " + numberOfDrags);

  }

  //shuffles the board
  public void shuffleLloyd(int pocetTahu)
  {
      Random r = new Random();

      for(int i = 0; i < pocetTahu; i++)
      {

          switch(r.nextInt(4))
          {
              case 0: if(moveRight()) numberOfDrags++; break;
              case 1: if(moveLeft()) numberOfDrags++; break;
              case 2: if(moveUp()) numberOfDrags++; break;
              case 3: if(moveDown()) numberOfDrags++; break;
              default: break;

          }

          //another way to shuffle the board
          //moveAnElement(r.nextInt(4), r.nextInt(4));


      }



  }

  //checks, if element can be moved
  public void moveAnElement(int x, int y)
  {
      boolean done = false;

      if(zeroPosition[0] == x + 1 && zeroPosition[1] == y)
      {
          done = moveRight();   
      }

      if(zeroPosition[0] == x - 1 && zeroPosition[1] == y)
      {
          done = moveLeft();
      }

      if(zeroPosition[0] == x && zeroPosition[1] == y + 1)
      {
          done = moveDown();
      }

      if(zeroPosition[0] == x && zeroPosition[1] == y - 1)
      {
          done = moveUp();
      }

      if(done)
      {
          //System.out.println("Pohyb se vydaril"); 
          numberOfDrags++;
      }

  }

  public boolean moveRight()
  {
      Element tmp;
      boolean done = false;

      if(zeroPosition[0] > 0)
      {
          tmp = actualState[zeroPosition[0]][zeroPosition[1]];
          actualState[zeroPosition[0]][zeroPosition[1]] = actualState[zeroPosition[0] - 1][zeroPosition[1]];
          actualState[zeroPosition[0] - 1][zeroPosition[1]] = tmp;

          zeroPosition[0] = zeroPosition[0] - 1;
          done = true;
      }

      if(checkEndOfGame())
      {
          System.out.println("Gratuluji k nalezeni reseni");

      }

      return done;

  }


  public boolean moveLeft()
  {
      Element tmp;
      boolean done = false;

      if(zeroPosition[0] < countInARow - 1)
      {
          tmp = actualState[zeroPosition[0]][zeroPosition[1]];
          actualState[zeroPosition[0]][zeroPosition[1]] = actualState[zeroPosition[0] + 1][zeroPosition[1]];
          actualState[zeroPosition[0] + 1][zeroPosition[1]] = tmp;

          zeroPosition[0] = zeroPosition[0] + 1;
          done = true;
      }

      if(checkEndOfGame())
      {
          System.out.println("Gratuluji k nalezeni reseni");

      }

      return done;
  }


  public boolean moveDown()
  {
      Element tmp;
      boolean done = false;

      if(zeroPosition[1] > 0)
      {
          tmp = actualState[zeroPosition[0]][zeroPosition[1]];
          actualState[zeroPosition[0]][zeroPosition[1]] = actualState[zeroPosition[0]][zeroPosition[1] - 1];
          actualState[zeroPosition[0]][zeroPosition[1] - 1] = tmp;

          zeroPosition[1] = zeroPosition[1] - 1;
          done = true;
      }

      if(checkEndOfGame())
      {
          System.out.println("Gratuluji k nalezeni reseni");

      }

      return done;

  }


  public boolean moveUp()
  {
      Element tmp;
      boolean done = false;

      if(zeroPosition[1] < countInARow - 1)
      {
          tmp = actualState[zeroPosition[0]][zeroPosition[1]];
          actualState[zeroPosition[0]][zeroPosition[1]] = actualState[zeroPosition[0]][zeroPosition[1] + 1];
          actualState[zeroPosition[0]][zeroPosition[1] + 1] = tmp;

          zeroPosition[1] = zeroPosition[1] + 1;
          done = true;
      }

      if(checkEndOfGame())
      {
          System.out.println("Gratulations");

      }

      return done;

  }

  //checks if all elements are in final positions
  private Boolean checkEndOfGame()
  {

      for(int i = 0; i < countInARow; i++)
      {         
          for(int j = 0; j < countInARow; j++)
          {
              if(actualState[i][j].finalPosition != (i*countInARow + j))
              {
                  return false;                                     
              }
          }         
      }

      return true;
  }
}

and an Element

public class Element {

    int finalPosition;
    int actualPosition;

    //position is j*numberInARow + i
    public Element(int finalPosition)
    {
        this.finalPosition = finalPosition;
        this.actualPosition = finalPosition;
    }
}

Thanks for any hint, I have no idea about next step. I want it to look like this: Lloyds fifteen puzzle http://www.cse.wustl.edu/~kjg/cs123/Labs/raster/15.gif Elements will be part of image(user chooses an image, i will split it and create those elements)

Answer 1

The next step is to setup the UI, the Application which basically is the thread you will start first. For layout I suggest you use a GridPane of 4x4 and initialize it with the Element matrix.

Take a look at this example of a GridPane for a simple form and of course the JavaDoc.

The next steps then would be to add event handlers so that the elements can be reassigned to a different position (that will call the various move methods).