In the last posts we created a digital version of the 15-puzzle I liked to play as a kid. Back then when we were playing the 15-puzzle there was one neat little trick. I would carefully remove two of the tiles sitting next to each other in a row and swap their position. This is a very good way to drive somebody crazy, because it makes the puzzle unsolvable.

## Calculating the Parity

When I did that as a kid, I didn’t know why rearranging the tiles breaks the solvability. In the meantime I know that the solvability is related to the ‘parity’ of a pattern. The parity of a puzzle is either even or odd and never changes by valid moves. You can calculate it by adding the number of wrong pairs (n1) and the row where the empty Tile is (n2).

If this sum (n1+n2) is even then the puzzle can be solved. Whatever legal move you make this sum will stay an even value. So in order to annoy someone you just need to arrange the Tiles to create a negative parity. My ‘illegal’ move will either increase or decrease the value of n1 by one and create an odd parity. As a result the puzzle is no longer solvable.

Since we’re nice kids, we will make sure that the puzzle will always be solvable. So let’s add a method to the ViewModel that tests the solvability of a pattern:

And we’ll change the initGame method like this:

In the tradition of “fair minesweeper” we’ve now created a “fair 15-puzzle”.

## Storing state

In the last part I promised to show how you can store the state of your app. We’ll use the StorageManager from three posts ago ago for this. Use the StorageManager in the Main class like this:

Since our Game logic is very simple there’s only one place where we manipulate the ViewModel and need to store state at the end of every move:

## Reset the game

Now we’ll add a Button that allows us to reshuffle the tiles. For that we need a @Function:

Now we need to add a Button to the UI:

That’s it for this time. We made the game a little less frustrating, we enabled peristent state, and we added a Function for reshuffling.

In the next blog entry we’ll make the HTML-Page responsive and add a score. So stay tuned!