iOS Sliding Puzzle App

Home / Courses / iOS Sliding Puzzle App

In this series of video tutorials, we will go through designing and programming an iOS Sliding Puzzle for iOS with Objective-C. This tutorial assumes that you have some basic understanding of programming in general and perhaps some familiarity with XCode and Objective-C. If you don’t know any programming, you might find this tutorial a little difficult to follow. The entire programming should take you no longer than 2 hours and I have provided you with all the source material needed for this series. During the course also, I will periodically avail my project you can download that and follow my steps exactly as in my project.


iOS Sliding Puzzle _ 1 _ Understanding the App

The most important thing in developing any app is to understand how the app actually functions. Once we understood that, we need to come up with a plan to breakdown the pieces and make a functioning path way to develop our app.
In a nutshell, we need the following things to develop our app:
1) We first need a view where we can chose the type of the game we wish to play.
2) Then we need to have a main game view, that is where the game is presented and can be played.
3) We then need to have an action that reads our images and makes image view blocks from them
4) After that, we will have to randomize our blocks and make sure there is an empty spot. We also need to remember where this empty spot is.
5) We then need a touch system that understands which block has been tapped on and finds out if the tapped imageview is adjacent to an empty spot.
6) We also need to program a timer action to count down the time of the game.
7) We finally need a navigation system to move back and forth to the main page.

iOS Sliding Puzzle _ 2 _ Understanding the Assets

For this game, I have provided you with a set of assets, they are mainly different images, their samples and icons as well as a logo for our game.

iOS Sliding Puzzle _ 3 _ Main game view, sample image, timer, button

In this lesson, we will design our main game view. I am currently designing it to be use on an iPhone device but you could very well use the same logic on an iPad.

We will also add a sample to our game. It will work as a visual guide. We should add a timer and a back button. This is the button that allows us to go back to the main menu. We will make the main menu later.

iOS Sliding Puzzle _ 4 _ Building a grid of Image View

In this lesson, we will add our images to our project and start building a grid of image views using these images. Because it’s very important to remember where each block is located, we are also going to remember the center that we assign to each Image View.

iOS Sliding Puzzle _ 5 _ Randomizing the blocks

In this lesson, we will randomize the location of our blocks and also we delete one block from the set making sure that game is actually playable.

iOS Sliding Puzzle _ 6 _ Implementing the Actual Game with a Touch Event

In here, we will use the Touch Ended action to understand every time used taps on the images. We will then run a logic to understand if the tapped on image is adjacent to an empty spot.

iOS Sliding Puzzle _ 7 _ Adding the Timer Action

In here, we will implement the code for the timer action. It will be called once every second and will subtract a one from the current remaining time.

iOS Sliding Puzzle _ 8 _ Making a Main Menu View Controller

In this lesson, we add the buttons of the various menu items to our main menu and write the code to make sure we make the correct transition.

iOS Sliding Puzzle _ 9 _ Main Menu Coding

In this lesson, we will program the features of the main menu buttons.

iOS Sliding Puzzle _ 10 _ Going back once the time is over

Here, we make sure the game returns to its main menu if player can’t mange to finish it within the allocated time.

iOS Sliding Puzzle _ 11 _ Concluding our development

In this video, we will look at what we have done so far and what is next.


The following two tabs change content below.

Amir J

Senior Instructor at
Amir is our senior instructor here at Cinard. He comes to us with years of teaching experience in Dubai and online. His background is in computer animation and programing for 3d imagery. He has a MED in Higher Education, a MA in Digital Media and a BA in Digital Animation.

Latest posts by Amir J (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *