Overview 🗒️

Growing up I was an avid fan of the Final Fantasy game series. Particularly Final Fantasy 7 through 10. Each game in the series contains an in-depth story, hours of gameplay and some mini-games. One mini-game introduced during Final Fantasy 8 was a card game known as Triple Triad.

Released in 1999, Final Fantasy 8 was a single-player game and so too was Triple Triad, the included card game. Being a single-player game this meant that you couldn’t challenge friends to a quick card game. This lead to continuous debates throughout my childhood of who really was the better player!

To settle the debate once and for all I wanted to re-create Triple Triad in such a way that allows you to grab a friend and challenge them to game!

Below I will briefly run through the process of re-creating the game, followed by a fully playable version.

Setup ⚙️

This game is going to use web technology so the Phaser framework is going to be used. It will also be piled with static assets so a PWA is going to be created, not only to allow offline support, but also greatly speed up reload times and provide installers for various mobile and desktop operating systems.

The board and the cards 🎴

To start we’re going to get a couple of assets for the board and mock some card assets to begin placement. Check out the gif below for the initial result.

Gif demoing ng add

Coming together already! Let’s add some simple animations for placing the cards on the board and also to slide remaining cards closer to the base of the screen.

Gif demoing ng add

That makes it look a little less… dead. Always carefully manage your architecture correctly when considering animations. Some you may want to play asynchronously and others you want to wait until they complete before starting another task or animation, rather than just utilising the onComplete callback to fire your next method a more modular approach can be emitting events upon tween completion.

Let’s add some real cards! The cards are currently made up of 3 different assets. The card image itself, a transparent background and the blue or red back that will change depending on it’s owner (Player 1 or Player 2).

Gif demoing ng add

The above gif also demonstrates a randomisation of the cards upon reload.

Finally, let’s add the card ranks. Each card has 4 ranks (top, right, bottom, left) that each represent a score respective to the side they are placed. The scores range 1 through 10, with 10 being denoted as A. Each of these numbers are also static assets so let’s add them in!

Gif demoing ng add

All in all our card is now made up of 7 assets in total. Each of these assets need to animate together when moving the cards in order to maintain the look and feel that a card is just a single entity. Luckily Phaser’s animation Tweens accept an array of values so the heavy lifting is done for us. Onto the gameplay!

The gameplay 🎲

The next step is being able to detect surrounding cards. Since the board is essentially a 2-dimensional array, this task proves to be quite simple.

Gif demoing ng add

The above demonstrates how once a card is placed horizontally or vertically next to another card it will detect which card or cards are surrounded by it. This is the most important mechanic of the game.

From here, it’s just a matter of comparing the cards values and changing the colour of the card or cards based on the opposing card.

Gif demoing ng add

Now when we place cards around the board, if their ranks are higher in value than the card they are placed next to we will update the colour of those cards to match the opposing card.

That alone gives us the basic game mechanic. Now for a little clean-up.

Clean up 🧹

Lastly, a little bit of clean-up is in order. We’re going to make it so the player to make the first move is randomised. We’ll also add an indicator as to who won. Tossing in a few more animations around card flipping and tweaking some of the asset depth and we have something playable. We’ll also throw in some audio to bring it to life!

Check out the preview for the final result!

Preview 🎮

Grab a friend and try it out below by clicking or tapping to select and place cards.