In this tutorial we will cover how to build an iOS memory game puzzle using XCode and Objective-C. This is a very simple game, yet by going through this tutorial, you will learn an array of topics such as user interface, Interface outlets, touches, basic view animations as well as some basic mathematical algorithms. For a veteran programmer, this should take no longer than an hour to develop, so I’d give it 3 hours to complete this tutorial.
Lesson 1 – Understanding the App
In this lesson, I will demonstrate how the iOS memory game actually functions. This is a very simple introduction as to how this little game is being played and also what you have to know and keep in mind for developing this.
Basic things that are needed to develop this app are:
a) an array to hold all the images
b) a grid system where each image from the array is placed twice and randomly
c) a touch function that detects when you tap on any of the blocks
d) a mechanism that understands whether this is the first time you tapped or the second
e) and a timer system
Lesson 2 – Understanding the Assets
To develop the iOS memory game, you need some assets, they are mainly the images you will be using for the actual game. I have supplied these images with my resources, but feel free to replace them with images of yourself or friends.
Lesson 3 – Building the Interface in XCode
In this lesson, we will explore how to use interface builder to build the main background view for our game as well as the buttons to reset the game and the game timer.
Lesson 4 – Connecting outlets to code
In this quick lesson, we will connect the different outlets we’ve made to various pieces of actions and properties in our code.
Lesson 5 – Loading the Images into an Array
In this lesson, we’ll add the image assets to our iOS memory game and load them all into an array.
Lesson 6 – Making an Image View Programmatically
In this lesson, we will learn how to make one simple image view and attach it to the game background view. It would require exposing some of the properties and outlets and deciding about the size of the image view.
Lesson 7 – Calculating width and grid size
In this lesson we will learn how to calculate the width of the view and the size of our grid.
Lesson 8 – Working with ViewDidAppear
In this lesson we learn how to make sure the view is laid out properly.
Lesson 9 – Grid of Image Blocks
In this lesson, we will make a very simple code that makes all of the images of the grid. It needs a little maths and a little coding.
Lesson 10 – Randomize the Location of Blocks
In this lesson, we will write a randomize action that places the blocks randomly at different locations.
Lesson 11 – Reset Action
In this lesson, we will write the code to reset the game grid based on a 4×4 or a 6×6 game.
Lesson 12 – Adding the Code for the Timer
In here, the timer will receive its code so it begins counting the moment the game is reset and started.
Lesson 13 – Understanding Touch Events
In this lesson, we’ll have a quick review of different touch events and how we could utilize them to understand when one of our blocks is being tapped on.
Lesson 14 – Adding basic Animation to Blocks
In this lesson, we’ll add some animation to the way the blocks appear and disappear.
Lesson 15 – Comparing clicked Image Views
In this lesson, we will do a quick comparison of the image views we have tapped on.
Lesson 16 – Fading out similar image views
In this lesson, we will learn how to compare and make the similar image views disappear and make the different ones go back to No Image mode.
Lesson 17 – Debugging the issue
In this lesson, we add a click permission Boolean value to control when user can click on the image views.
Lesson 18 – Overview of everything
In this lesson, we’ll do quick review of everything that we have covered so far. We have gone through so much code and we still have a bit to cover. It certainly helps to get a better understanding of what has been done so far.
Lesson 19 – Beyond the Basics
In this lessons, we will explore some of the functions to change the way the animations run. It will include changing some of the codes we have written so far. We will also force the game to do a re-start once the player finishes matching all the blocks.
Lesson 20 – Conclusion
Well, I hope you enjoyed it.