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

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

What’s going on guys?

We’re continuing with our Ionic 4 series today.

As explained in part one, we’re making a simple card matching game in order to learn the different components of the Ionic framework.

If you’re clueless about the Ionic framework, you should go check out the first part where I explain it in more detail.

I won’t ramble for too long in this post (as usual), since I explained that I’m not planning on covering code in these blog posts for Ionic – that’s what the videos are for anyway alright.

Instead, I’ll leave a summary of what goes down in this part.

Coding Summary

In this second part, we’ll get our card matching game to a playable state.

Basically, by the end of it, you’ll be able to select both cards and we’ll put conditions in place to check if the selected cards match or not.

If the cards match, we’ll go ahead and eliminate them from the screen. Otherwise, we’ll remove a “life” from the user and reset selections.

Once the user runs out of “lifes”, we’ll restart the game – which is the only new function we create in this part, I believe: restartGame().

All in all this part is pretty short and straight to the point.

Download Code

In case you don’t want to follow the video line by line, just download the code and copy replace the folder with you app/ directory.

Of course you’ll need to have the images and stuff from part one.

That’s it for today, its still the weekend here and I’m out for a drink.

Hope you guys enjoy it as well. 😉