Flappy Bird

v1.0.0

Sign up Sign in

Introduction Prerequisites

Getting Started Setting Up the Canvas

Scrolling Scene

Preface Loading the Sprite Sheet Drawing the Background Drawing the Ground Scrolling the Ground Delta Time Fixing Ground Scrolling Artifacts

Adding the Bird

Preface Drawing the Bird Add Flap Animation Flap on Click Bird State Rotating the Bird

Collision Detection

Preface Colliders Circle VS Rectangle Collision Entity Colliders Debug Collider Rendering Check for Collision in the Game Loop

Adding the Pipes

Preface Pipe Breakdown Drawing Pipes Colliders and Debug Clean Up

Adding Pipe Manager

Preface Visualize Spawn Points Determine Next Spawn Point Spawning Pipes Bird Collisions Final Touches

Preface Clearing Pipes Score Manager Title State

Preface Get Ready

Welcome

In this course we're going to recreate the game Flappy Bird from scratch. We'll leverage the <canvas> element, some free assets and TypeScript to create the game.

🚧