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

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

What’s up guys?

We are back with another part of our Ionic 4 card matching game.

In the previous parts we broke down the basics of the Ionic framework, did the groundwork for our little game, added some images and coded the basic functions for matching cards on-screen.

Although we have a lot of functionality in the game already we’re lacking screens for when the player loses, wins and for loading.

That’s what we’ll be working on this time.

One more twist we’ll be adding is time. Let’s give the player something like sixty seconds to match all the cards otherwise he loses.

Coding Summary

To start off we have to add a bunch of variables to support the new screens we’re adding and to control time inside our game.

We’ll be using time to display a three second countdown before the game starts – to give the player a heads up and get ready – and also to spice things up a bit we’ll give the player sixty seconds to match all the cards.

Most of these variables will remain undefined in the beginning; we’ll set their values inside of the restartGame() function.

Inside the same function we’ll add some timers to control our three second countdown before the game starts and another timer to control the sixty seconds inside of the game itself (display it as well).

That does it for the restartGame() function.

Now we move on to the HTML file of level 1. Here we have to add blocks of code to show the loading, win and lose screen.

For now we’ll have pretty much the same HTML tags and just change up the text inside of them to let the player know what happened. After adding some conditions to the tags we can display the appropriate screens.

Finally we’ll add a lose and win condition on the code itself and this will trigger the win and lose screens programmatically.

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 page and add the images – to be able to follow along. Then you can simply download and replace the ‘app/’ directory in your project.

That’s gonna do it for part three, hope you liked it.

We’re almost done with this short game; ’til next time!