HTML5 Game Development with PixiJS: The Detailed Guide

Course Curriculum

Chapter 1: Puzzle Game

Lecture 1: Introduction and Puzzle Game review

Lecture 2: Creating the project structure

Lecture 3: Preparing the development environment

Lecture 4: Creating a canvas element and game rendering

Lecture 5: Developing the resource loader

Lecture 6: Completing the resource loader

Lecture 7: Display the background image

Lecture 8: PIXI.Sprite features

Lecture 9: Creating the puzzle pieces

Lecture 10: Placing pieces in the random order

Lecture 11: Adding interactivity

Lecture 12: The interactivity of puzzle pieces

Lecture 13: Puzzle pieces events

Lecture 14: Swapping puzzle pieces

Lecture 15: Adding sounds and music

Lecture 16: Tweens animations

Lecture 17: Project preparation

Lecture 18: The background movement

Lecture 19: Creating the platform

Lecture 20: Create multiple platforms

Lecture 21: The platforms movement

Lecture 22: Creating the hero

Lecture 23: Adding physics

Lecture 24: Objects collisions

Lecture 25: Improving the collisions

Lecture 26: The hero’s jump

Lecture 27: Creating diamonds

Lecture 28: Collecting diamonds

Lecture 29: Creating the UI

Lecture 30: The game over state

Lecture 31: The final popup window

Chapter 2: PixiJS project template

Lecture 1: 1. The structure

Lecture 2: 2. Creating the canvas element

Lecture 3: 3. Creating the loader

Lecture 4: 4. Starting the game

Lecture 5: 5. Rendering the sprites

Lecture 6: 6. Scenes Manager

Chapter 3: Match3 Game

Lecture 1: 1. Creating a single field

Lecture 2: 2. Creating a fields grid

Lecture 3: 3. Creating a single tile

Lecture 4: 4. Create a tile in each field

Lecture 5: 5. Selecting a tile to move

Lecture 6: 6. Clear tile selection

Lecture 7: 07. Tiles movement animation using GSAP

Lecture 8: 08. Swapping the tiles

Lecture 9: 09. Search for combinations

Lecture 10: 10. Removing tiles

Lecture 11: 11. Fall of the remaining tiles

Lecture 12: 12. Adding and dropping new tiles

Lecture 13: 13. Checking for combinations after tiles falling

Lecture 14: 14. Collect combinations at the start

Lecture 15: 15. Reverse swap

Chapter 4: Infinite runner game

Lecture 1: 1. Project setup

Lecture 2: 2. Create a moving background

Lecture 3: 3. Creating a single platform

Lecture 4: 4. Creating a hero

Lecture 5: 5. Creating multiple platforms

Lecture 6: 6. Enable physics

Lecture 7: 7. Platforms physical bodies

Lecture 8: 08. Debugging matter bodies

Lecture 9: 09. Movement of platforms

Lecture 10: 10. The physical body of the hero

Lecture 11: 11. Hero jump

Lecture 12: 12. Collision of the hero and platform

Lecture 13: 13. Creating diamonds

Lecture 14: 14. The physical body of a diamond

Lecture 15: 15. Collecting diamonds

Lecture 16: 16. UI

Lecture 17: 17. Restarting the game