# Phaser 3 Solitaire Tutorial Series

**URL:** <https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704>\
**Category:** Showcase\
**Created:** [September 4, 2024, 5:14pm UTC](https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704 "2024-09-04T17:14:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [September 4, 2024, 5:14pm UTC](https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704/1 "2024-09-04T17:14:19Z")

</div>

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](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-1/)

![gameplay](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/fd2d5a2072d3c7f3412755e5ff6c32403338b5c2.gif)

You can find a playable demo of the game that we will build here: [https://devshareacademy.github.io/phaser-3-solitaire-tutorial/](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](https://github.com/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:

- [Part 1 - Project Setup](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-1/)
- [Part 2 - Game Layout](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-2/)
- [Part 3 - Player Input](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-3/)
- [Part 4 - Moving Cards](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-4/)
- [Part 5 - Core Solitaire Logic](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-5/)
- [Part 6 - Title Scene](https://scottwestover.dev/post/2024/08/solitaire-phaser-3-tutorial-6/)

---

<div class="post-metadata">

**Author:** ![neb](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/neb/32/8508_2.png) [@neb](https://phaser.discourse.group/u/neb)\
**Post date:** [September 6, 2024, 1:41pm UTC](https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704/2 "2024-09-06T13:41:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [September 10, 2024, 3:16pm UTC](https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704/3 "2024-09-10T15:16:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [September 30, 2024, 7:20pm UTC](https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704/4 "2024-09-30T19:20:40Z")

</div>

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\_](https://www.youtube.com/playlist?list=PLmcXe0-sfoSh1o3fm-_2JOod-wRUxnqb_)

---

<div class="post-metadata">

**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\
**Post date:** [October 15, 2024, 11:36pm UTC](https://phaser.discourse.group/t/phaser-3-solitaire-tutorial-series/14704/5 "2024-10-15T23:36:47Z")

</div>

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\_](https://www.youtube.com/playlist?list=PLmcXe0-sfoSh1o3fm-_2JOod-wRUxnqb_)
