Sliding puzzle in touch screen

I had Nokia 6600 for my first smartphone, and my favourite game was Mixpix. A sliding puzzle game. I love this game. Now I try to recreate that game for touchscreen phone. And it’s quite a journey.

borrowed from
borrowed from

The long beloved game. Images borrowed from

Moving the blocks

The “buttony phones” (or… maybe we can called it candybar and clamshell phones), long time ago used buttons for it’s main input interface. Unlike today’s smartphones which in majority has touch screen for their input (wow, phones are evolving so fast!). Whether it’s for texting, calling, or even mobile game, buttons were the prevalent UI. Of course, the Mixpix used buttons to simulate “swiping” the block. The step to move the block simply “swap the current empty position of the block to the opposite of current direction’s button.”

Screen Shot 2015-11-08 at 12.18.01 AM

In touch screen, I’d like the block swipe-able. So we can move not only one block, but a series of block altogether to the empty slot. This is how I do it:

  1. Record the first selected position (row and column) of block.
  2. Check where is the direction of movement
  3. From the selected position until the “neighbour of empty block” position, iterate the blocks to move one by one to the empty slot.
  4. Set the first selected position as empty block.


It works quite well! Take a look of the example I’ve made in video below.

To “drag” the block we simply do the same but check every update whether the distance is no greater than the size of the block. You can see the example from this video (and hell yea, more blocks!)

I am quite satisfied for now, but, what if we have many empty blocks? We should handle where it will snapped on the specific position, check the empty positions, limit the positions by numbers of empty position on its row/column, etc… It will be fun.