The 15 Puzzle, also called Game of Fifteen, is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing. To solve the puzzle, the players must place the tiles in order by making sliding moves that use the empty space.

In that tutorial, you are going to develop a 15 Puzzle — Game of Fifteen in Java 8 with Eclipse. For the User Interface, we will use Swing API. It is a good way to discover how to develop a simple game in Java and how to manage the interaction with the users.

You can also discover this tutorial in a video on YouTube:

Game of Fifteen Game Modeling

First, we start by modeling the Game of Fifteen in our program. We need the following properties :

  • size defining the size of our Game of Fifteen instance
  • nbTiles defining the number of tiles of our Game of Fifteen instance. nbTiles will be equal to size*size-1
  • tiles which is a one dimensional array of integer. Each tile will have an unique value in the [0, nbTiles] range. Zero indicating the blank tile.
  • blankPos storing the position of the blank tile

Core logic of Game of Fifteen

We need to define a reset method used to initialize the Game of Fifteen instance. In that method, we set a value to each element of the tiles array. At the end of the method, we set the blankPos at the last position of the array.

We need also a shuffle method for shuffling the tiles array. We don’t include the blank tile in the shuffling process to leave it in the solved position. To make sure our Game of Fifteen instance is solvable, we define a isSolvable method.

Most important thing to consider is that only half permutations of the puzzle are solvable. Whenever a tile is preceded by a tile with higher value it counts as an inversion. In our case, with the blank tile in the solved position, the number of inversions must be even for the puzzle to be solvable. So, we count the number of inversions and we return true if the number is even.

Then, it is essential to define a isSolved method to check if our Game Of Fifteen instance is solved. First, we check if the blank tile is in the solved position. If so, the instance of the game is not solved. Then, we iterate on the tiles in reverse order and if a tile value is different from the corresponding index + 1, we return false. Otherwise, at the end of the method, we can return true because our Game of Fifteen instance is solved.

We need also to define a newGame method to create a new instance of the game. For that we reset the board, then we shuffle it and we continue until the game instance be solvable.

It gives us the following code for the core logic of our Game of Fifteen:


Finally, we need some code to move tiles in our array. This code will be called later in a dedicated callback to react to move of user’s mouse on the screen. Our Game of Fifteen will support multiple tile moves at once. So, once we have converted the clicked position on the screen to a tile, we get the position of the blank tile and we search direction of the move to support multiple tiles moves at once.

If you have a correct direction, we move the tiles in the direction like that:

Building the UI with Swing

Now, it’s time to build the User Interface with the Swing API. Our class will extend JPanel class. Then, we will draw the tiles in that panel. For calculating size of each tiles, we will take the dimensions of the panel entered in parameter of the GameOfFifteen constructor.

To calculate size of the grid and size of a tile, we use the following calculus :

gridSize = (dim — 2 * margin);
tileSize = gridSize / size;

Note that margin is also a parameter given in entry of the GameOfFifteen constructor.

Then, we need to define a drawGrid method to draw the grid and its tiles to the screen. We simply iterate on the tiles array and we convert coordinates to UI coordinates. We draw each tilewith the corresponding number at the center:

Finally, we override the paintComponent method deriving from the JPanel class we extend. Inside it, we call the drawGrid method and then, we call the drawStartMessage method to display a message inviting the user to click to start the game:

React to user Events on the UI

To let users playing our Game of Fifteen program, we need to react to user events on the User Interface. For that, we add a MouseListener implementation on the JPanel. Inside it, we put the code presented previously to move slides:

This code is placed in the constructor of the GameOfFifteen class and at the end of the constructor, we call the newGame method to start a new game.

Complete code of our Game Of Fifteen

Last step before to put our Game of Fifteen in action. For that, we assemble all the elements in main entry point of our class. It gives us the following complete code:

Our Game Of Fifteen — 15 Puzzle in Action

Now, you can launch the Game of Fifteen program and you should have the following display:

It’s your turn to solve the game. Play and if you solve the game, you should have the following display:

Great !

That’s all for that tutorial. To discover more tutorials on Java and Android development, you can visit the SSaurel’s Channel on YouTube:

https://www.youtube.com/@ssaurel

You can also enjoy this game on Android:

https://play.google.com/store/apps/details?id=com.ssaurel.taquin.pro