Game: Solitaire TriPeaks

My first game with Phaser was Solitaire TriPeaks. To be fair, a few years back I made this game with jQuery and it worked perfectly. Now, when I wanted to learn Phaser, I thought, I could remake the game again. If you want my advice: solve only one problem at the time. As I already had graphic and logic of the game figured out, I had only one problem – to learn Phaser.


I will not go into TriPeaks rules as there are more than enough sites on the net where you can find rules in detail.

So, lets dive into the code. In my previous article I described most basic stuff of the game and I don’t want to repeat myself. Today we will talk about new stuff.


Apparently, in Phaser you can not have click and drag event on the same object (or at least I could not figure this out). That is sad, it could be cool, because some people like to drag and others like to click. As I had to choose one method, I decided to go with the click. So, what happens when you click? Clicked card from one of the peaks moves to the main card of the deck.


In the previous article tween was used for making blink effect, this time is simple movement: you just say where you want to move.

When you move the card, you want it to be on the top of all other cards, but… In HTML you have z-index, in math you have z coordinate, in Phaser you have nothing… Somebody thought: with Phaser we will be making only 2D games so we do not need depth. It makes you wanna strangle that guy who did thought that…

Before you do the crime, I have to tell you: there is a workaround.

If you add two objects in Phaser, when moving, the first one is always below the second one. How to change the order? If you add the objects to the group, you can change their order in the group.

First you need to create the group:



Next you need to add object to the group:


Now, when you have all your object in the same group, you can change their order:


This function brings the card to the top of the group (you can also bring it to the back, o just one object up). But there is a small problem. If you have two groups, the first one will always be under the second group, so there is only one way: to keep all object in the same groups, which is crazy, but… hey, this is how it works…


There is one more thing I want to share: the score.

First you have to add a text object:



As you understand, in the beginning the score is zero. Later you have to update the score:


So, that’s all for the code part.

You can play the game here.


If you want to make a card game, you can use my card pack. You can get PNG version for free (part one, part two). If you want to support me, you can buy SVG version or become my Patreon.