Phaser 3 Solitaire Tutorial Series

Showcase
1

Hi Everyone.

Recently, I have been working on a written tutorial series that shows how to recreate the classic game Solitaire with Phaser 3. The series is written in TypeScript, and I tried to keep it as beginner friendly as possible. The tutorial is split into 6 parts, and throughout the series we see how we can use the following Phaser 3 features to build the game:

  • Using the Zone game object for handling player interaction events
  • Using drag events on game objects to move objects in the scene
  • Using the Drop Zones for checking when game objects are dropped on Zones
  • Using drop events on game objects to handle object overlaps without physics
  • Using the data manager for storing and retrieving data on the game objects
  • Using containers for grouping and positioning game objects
  • Using built in scene transitions
  • Loading sprite sheets, images, and displaying these as game objects in our game

If you are interested in checking out the tutorial series, you can read the tutorial series here on my blog: Phaser 3 Solitaire Tutorial Series - Part 1

gameplay

You can find a playable demo of the game that we will build here: https://devshareacademy.github.io/phaser-3-solitaire-tutorial/

For anyone interested in the source code, it is available on GitHub here: GitHub - devshareacademy/phaser-3-solitaire-tutorial

I’m more than happy to help anyone out if they have questions, suggestions, or just general feedback!

Here are direct links to each of the parts:

5 Likes
2

Nice tutorial!

I tried the demo, it’s pretty good. Two points:

  1. a few times, the card from the draw pile that I would drag would show below other cards (instead of top-most). Can’t say exactly when it’s producing, but had the issue 2 or 3 times.
  2. I run it on an older computer, and processor is fully loaded. Maybe use a lower resolution and use scaling to reduce processor usage, this game shouldn’t really be graphic intensive.
1 Like
3

Thanks for trying out the demo, and for providing the feedback. I’ll take a look at both of those.

4

For anyone that might be interested in a video version of this tutorial series, parts 1 - 3 have been released here: https://www.youtube.com/playlist?list=PLmcXe0-sfoSh1o3fm-_2JOod-wRUxnqb_

5

One last update, all 7 parts of the tutorial series have been released and the full series can be watched here: https://www.youtube.com/playlist?list=PLmcXe0-sfoSh1o3fm-_2JOod-wRUxnqb_

1 Like