Scott Westover shows you how to build Solitaire with Phaser 3. This project uses features zone objects, drag-and-drop, and data tracking. It is designed for developers who want to apply Phaser 3 beyond simple arcade examples.

How it works

Solitaire uses a standard 52-card deck split into four suits. The game includes four pile types:

  1. Tableau – Seven columns with increasing card count (1 to 7), only the bottom card in each column is face-up.
  2. Foundation – Four piles, one for each suit, built from Ace to King.
  3. Draw pile – Holds unused cards.
  4. Discard pile – Stores drawn cards not played. Cards in the tableau must be stacked in alternating colors and descending order. The objective is to move all cards into the foundation piles.

    Tutorial Key features:

    • Zone Objects: Invisible interactive areas used for detecting clicks (e.g. on the draw pile).
    • Drop Zones: Detect when objects enter specific areas. Enables pile interaction without using physics.
    • Drag Events: Cards can be dragged and repositioned.
    • Data Manager: Each card stores metadata such as current pile. This enables logic like validating moves or tracking progress.
    • Containers: Group multiple cards for layout control. The container handles positioning, so individual card objects only require relative Y-values. This reduces manual X/Y positioning for stacked cards.

Watch Tutorial