Ionic 4 – How To Make a Simple Card Matching Game (4 of 4)

[ Part 1 (Introduction) – Part 2 – Part 3 – Part 4 ]

Yooo! What’s going on?

Here we are with the last part of our Ionic card matching game!

Out of all the parts, this will be the shortest one given we have put in so much work already in the previous parts one through three.

If you’ll remember, in part three we had left off with a fully functioning level that had a time and life counter, along with the displayed cards.

This time around, we will basically use that same code to create another two levels and then we’ll cover some other small interface details.

Coding Summary

Let’s begin by creating another two pages (one for each other level):

ionic g page level2
ionic g page level3

Then we have to just copy the code from level 1’s typescript file into our level 2 and 3 pages. We’ll do the same for the html pages as well.

Since our code is made to work with varying numbers for cards, time and life, we can simply reuse it and just change the main variables.

This will allow us to create some interesting custom levels with either more or less life, time or number of cards for the player to match.

I’ll keep it simple and just add another pair for each level, so level 2 has 7 pairs and level 3 will have a total of 8 pairs, so we’ll change those variables.

Then we’ll need to add a button for each level on the home screen.

Afterwords, we can add a back button so the user can return to home screen if he had a bad start to the level.

That’s basically it for this game guys!

Coding Further

I would like to add that this could also be programmed by creating services instead of copying the code from page to page.

Besides that, it’s an interesting idea to use the ionic storage module to save information between each level to keep high scores and such.

I have actually done that myself and used this same code to make a card matching game that has a few more levels and images, check it out here.

Download Code

Just like before, only the ‘app/’ directory is included, so you’ll have to at least follow the beginning of part one – create project, add level1, level2 and level3 pages and add the images – to be able to follow along. Then you can simply download and replace the ‘app/’ directory in your project.

If you enjoy these Ionic series make sure to leave a comment below.

That’s a wrap for this series guys, hope ya liked it!