Practise Javascript: Code a Card Game in Phaser 3

Install Visual Studio Code to write all your code. Download from code.visualstudio.com and install the appropriate version for Windows, Mac, or Linux.

Set up a Phaser 3 card game project by creating a directory, building an index.html, loading Phaser via CDN, and running a local server with live server.

Code a phaser 3 card game by configuring width 640, height 1024, and dark gray background, then set up a main scene with preload loading a card image from assets.

Learn how to create card assets with FEMA, including rectangles, strokes, gradients, and drop shadows; export cards for health potion, monsters, and armor, and organize in an assets folder.

Learn to create and install a bitmap font using the bitmap font generator, download press start to play, and export a transparent texture for use in Phaser 3.

Load all assets into the assets folder with this.load.image in the preload method. Then load the bitmap font press start with this.load.bitmapFont, noting its extension may vary.

See how the create method builds a paladin card in a Phaser scene using a card base container, background sprite, paladin image, and bitmap text.

Import the card base, move the paladin card from 0,0 down 20 to center it, and center the bottom black text with a max width equal to the card.

Code a draggable card in Phaser 3 by building a trackable card class that extends the base card, enables dragging, and snaps back to its original position on drag end.

Develop a player card by extending the trackable card, adding health and armor, rendering health text and armor visuals with proper positioning and max health.

Build a grid card class that extends the card base to render monster, potion, and armor cards with a flexible value and type, and display its value with bitmap text.

Create card types for phaser 3 game, including healing potions, shields, and monsters with attack values, and export a card types object with name, image, and type to drive gameplay.

Create a 3x3 grid of cards with a grid class that adds nine cards from random card types and positions them in rows using a modulus-based layout.

Highlight cards on hover and end drags to the original position, then detect grid column and apply monster, potion, or armor effects for attack, heal, or shield.

Implement a grid fade front row, destroy the first three cards, tween the remaining cards downward, fade non-selected ones, and replenish the top row after the animation.

Add death animations for player and monsters using tweens, flashing and switching to a dead texture. Show a restart button on death and export a reusable restart button module.

The lecture shows simple gameplay tweaks in a Phaser 3 card game, updating the main scene, handling card highlighting, and a tactical twist with a 1.4 column selection limit.