Game Development in JS/TS - The Complete Guide (w/ Phaser 3)

Build a simple Flappy Bird clone with multiple scenes, including a menu and play flow. Learn gravity and velocity, scorekeeping, countdowns, and debugging across a basic game framework.

Set up the phaser project folder, verify node.js, clone the phaser webpack boilerplate as the Flappy Bird clone, install dependencies, and run the dev server to view localhost:8080.

Inspect the phaser project setup, explore the cloned code, and review webpack build, assets, and index.js configuration for a flappy bird clone running on localhost:8080.

Create a Phaser 3 game by configuring an 800x600 canvas with Phaser.AUTO and arcade physics, preload assets, and initialize a scene with create to display an image.

Display an image in a Phaser 3 scene by loading it in preload, adding it in create with a key, and centering it using width and height coordinates.

Explore how origin points determine image placement on the canvas by adjusting x and y coordinates (0,0 top-left; 0.5,0.5 center; 1,0; 0,1) in Phaser 3.

Create a Phaser 3 bird sprite by loading its image, position it at the left tenth of the width and mid-height, and explore sprite properties and the API.

Learn to enable arcade physics on a sprite, set gravity and velocity, and monitor updates in Phaser 3. Understand delta time, frame rate, and how gravity differs from velocity.

Explore how gravity increases velocity over time using delta time in a Phaser 3 arcade physics setup, logging velocity and applying gravity to all game objects.

Apply base gravity to game objects, set horizontal velocity, and bounce a sprite between the left and right screen edges in a Phaser 3 arcade physics scene, with debug visuals.

Learn to implement a flapping mechanic in a Phaser 3 game by applying gravity and upward velocity on mouse or space key, using a flip function and adjustable flight velocity.

Implement restart logic for the bird when it leaves the canvas by resetting to the initial position and zeroing the vertical velocity, via a restart function.

Learn to credit game asset authors and designers by attributing sources from Itch.io and GitHub, and explore attribution options for commercial and personal use.

Preload and add a pipe obstacle as a physics sprite, and restart the player's position when out of bounds. Plan pipes moving toward the player in future lessons.

Add upper and lower pipes with a dynamic vertical opening between 100 and 250 pixels, using a pipe vertical distance range and Phaser's between function to assign a random distance.

Randomize the upper pipe’s vertical position within a 20 px to height minus 20 px range and adjust the opening between pipes accordingly.

Render multiple pipes in a Phaser 3 game, with varying vertical positions and horizontal spacing, then move them toward the player with velocity to require jumping.

Refactor the pipe spawning by moving placement into a dedicated place pipe function and grouping pipes to share velocity, enabling dynamic positioning and cleaner pipe management.

Refactor the pipe system into a dynamic pipes group, add sprites with physics, and apply velocity to the entire group to move pipes together.

Learn to manage pipes in Phaser 3 by applying velocity to the pipe group, finding the rightmost pipe, and spacing pipes with a horizontal distance range of 500–600 pixels.

Learn to recycle pipes in a Phaser 3 game by detecting left-side offscreen pipes, using get bounds to check the right edges, and re-placing upper and lower pipes in update.

Move all code into a dedicated play scene to improve structure, introducing scenes for play and menu, and use Phaser lifecycle methods preload, create, and update.

Refactor your Phaser 3 project by moving code from index.js into the play scene. Pass a config with width, height, and a start position to initialize the bird at center.

Refactor the game by moving all logic from index.js into the play scene, centralizing bird and pipe handling in create and update. Bind this context for callbacks.

Refactor your game code by splitting index.js into dedicated create and update functions, with separate create background, create bird, create pipes, handle inputs, and a check game status function.

Learn to implement colliders in Phaser 3 by adding a collider between the bird and pipes, wiring a game over callback, and preserving proper context.

Learn to fix collision behavior in a Phaser 3 game by making pipes immovable, pausing physics on collision, and using tint to indicate a hit before restarting and recycling pipes.

Enable world bounds bounce for the bird in a Phaser 3 game, allowing collisions with the top and bottom screen edges and pausing the game when bounds are reached.

Learn to restart a phaser 3 game after collisions by pausing, tinting the bird, and using a 1,000-millisecond delay to restart the scene and reinitialize background, pipes, and inputs.

Keep score by initializing a score variable and a score text, incrementing when the player passes a pipe, and resetting the score on game restart.

Add a scorekeeping feature that displays the current score and a best score, stored in local storage, and updates on game over to persist across restarts.

learn to implement a pause button in a Phaser 3 game by loading the button asset, placing it in the bottom-right corner, and preparing to pause the game on click.

Create a pause button in a Phaser 3 scene, make it interactive with a pointer down event, and pause the game using this.physics.pause and this.scene.pause.

Create a new menu scene in Phaser 3 by preloading a sky image, displaying a simple background, and registering the scene in index.js to load before gameplay.

Create a dedicated preload scene to load all assets in a Phaser 3 game, then start the menu scene after assets are ready, and plan scene initialization helpers.

Optimize scene loading by centralizing initialization in index.js with a scenes array (preload, menu, play), preloading assets in the preload scene, and refactoring to a named create scene function.

Create a base scene to share config, background loading, and helper functions across all scenes, then extend play and menu scenes from this base to simplify setup and reuse logic.

Create a reusable Phaser 3 menu by extending a base scene, defining navigable menu items to play and score scenes, and centering and styling text with configurable font options.

Create interactive menu items in Phaser 3 by making text objects interactive and changing color on pointer over and out; use a setup function with arrow binding for this context.

Implement scene navigation in a Phaser 3 menu by handling pointer events, starting the target scene when a menu item has a scene, and exiting by destroying the canvas.

create a dedicated score scene that reads the best score from local storage and displays it centered on the screen, wiring the scene into index.js and reusing base font options.

Implement a reusable back button for the score scene via base scene and config, preloading back.png, showing it when can go back is true, and returning to the menu scene.

Create a pause-driven post scene with continue and exit options, accessible from the play pause via the back button in the scorer scene, and launch it in parallel.

Learn to manage post and play scenes with a continue button that stops the current scene and resumes the play scene, and an exit button that returns to the menu.

Implement a resume flow by listening for the scene resume event, pause the game, display a middle-screen countdown (three, two, one), then press continue to unpause and resume gameplay.

Explore how to implement a countdown that resumes the game from a post state, updating a countdown text from three to zero and handling event listeners to prevent duplicates.

Fixing the flap demonstrates countdown-based jump control, pausing with a post state, guarding the flop function, resuming the game, and tracking score and best score in Phaser 3.

Define a difficulties object with easy, normal, and hard presets to adjust pipe horizontal and vertical distance ranges. Tweak velocity and gravity with difficulty and enable progression as score rises.

Implement a dynamic difficulty system in a Phaser 3 game by increasing difficulty at specific scores, starting easy and escalating to hard as the score rises, with pipes' openings shrinking.

Slice bird sprite sheet into 16x16 frames, load it as a Phaser sprite sheet with frame width and height, then display, scale, and flip the bird; next lecture adds animation.

Master creating a bird animation in Phaser 3 with a spritesheet: define a fly animation, use frames 9–16, set the frame rate, and enable pixel art for crisp visuals.

Finish the Flappy Bird clone by adjusting the bird's body size and validating boundaries with the debugger. Look ahead to a platformer and publishing on Facebook instant games.

Introduce a google chrome dino game clone built with phaser 3 in the js/ts course, using typescript and the latest webpack, with space to start offline.

Learn to initialize a Phaser 3 TypeScript project by cloning or downloading the starting repo, installing NodeJS, and running npm install and npm run dev to view at localhost:8080.

Add and inspect assets for a Phaser 3 JS/TS game by downloading the assets zip, replacing files, and loading images, sprites, and sounds for a Chrome dinosaur clone.

Split a Phaser 3 game into a preload scene and a play scene, load assets in preload, then navigate to the play scene. Register both scenes in the game config.

Load the ground as a tilesprite in index.ts, set width to 1000 and height to 340, and align it at x=0, y=340.

Learn how to manage game height in Phaser 3 using the game config height, handle TypeScript types (string vs number), and implement a getter to access height consistently.

Load and display the player by preloading the dino idle image, creating a Phaser physics sprite at the bottom-left, and using TypeScript types to enforce correct values.

Learn how to define custom types and manage modules in TypeScript, using namespaces, type aliases, and object shapes, while ensuring data and function signatures match across a Phaser-inspired structure.

Make the dinosaur jump in Phaser by setting the sprite’s y velocity on space bar press, using a dynamic body, and exploring modules, namespaces, and type aliases.

Set gravity in the player's y-axis and enable world bounds collisions in Phaser 3, so the dino falls, lands on the ground, and can jump with space.

Trigger the game start by the player's jump colliding with an invisible start trigger, which is moved on descent to begin gameplay via an overlap callback.

Move the player into its own class by extending phaser arcade sprite and registering it with the scene and physics, then initialize with an init method. Load dino idle texture.

Encapsulate the player in its own class under the entities folder and use the Phaser scene update and input system to register controls and handle jumping with velocity -1600.

Register the space key in the Phaser update loop to make the dinosaur jump, using a just-down check and -1600 velocity when on the floor, with arcade body on-floor checks.

Implement a collision-driven trigger system in a Phaser 3 game: move the upper trigger down under the dinosaur to start, then reset and hide it off-screen for a restart.

Roll out the floor by expanding the ground tile sprite over time with a timed event. Tune speed using 1000/60 frame timing and stop when the ground reaches game width.

Push the player forward during ground roll, stop the roll when the ground reaches the game width, and reset velocity afterward for a running animation in the next lecture.

Learn to implement a running animation in Phaser by loading a sprite sheet, defining frames, registering and playing a looping run animation keyed to dino dash run.

Detect jumping by monitoring the absolute change in the player's y direction, stop the running animation during a jump, and set the first frame texture; resume running when not jumping.

Fix the initial running issue by adding an is game running boolean (default false) checked in the update loop, ensuring the run animation starts only after the game starts.

Learn to structure Phaser 3 scenes in js/ts by creating a base game scene with height, width, and is running getters, then extend and type it in other scenes.

Fix the first jump display by switching to a dyno run sprite sheet with frames and using the first frame as the standing image; then move floor and spawn obstacles.

Learn to spawn obstacles in the update loop by tracking time and delta time, using a 1500 ms spawn interval, accumulating spawn time, and spawning with reset.

Load cactus obstacle assets and spawn random obstacles (1–6) at x 600–900 and y 340 using a Phaser arcade group, then move them toward the player.

Configure preload to load six cactuses using a for loop and a shared preload config. Use dynamic names with backticks and import the config for reuse.

Learn to add configurable obstacle speed in Phaser, spawn obstacles only when the game runs, and use a group to move all obstacles toward the player.

Decrease obstacle speed to five, then loop through obstacles with get children, check each right side against the map bounds, and destroy off-screen ones to clean up.

Implement a scrolling ground by recycling a tile sprite: move the ground left and wrap front pixels to the back to simulate motion, using a game speed.

Create a collider between the player and the obstacle group to detect collisions, set is game running to false, and immovable obstacles to prevent movement after impact.

Pause the game on collision, switch to the game over dino texture, and pause animations. Reset spawn time to the default 1000 and reset game speed to five.

Display a game over screen in Phaser 3 by loading game over and restart images, wrapping them in a container for centered positioning, and restarting via a restart button.

Display a Phaser game over container by creating the container, keeping it hidden with alpha zero, and revealing it upon obstacle collision to pause the game and show restart options.

Make the restart text interactive, register a pointer down event on it, and log 'clicking restart' to the console when the text is clicked.

Refactor the game logic by moving obstacle creation and the game over container into dedicated functions, and implement start, collision, and restart handlers to streamline gameplay flow.

Restart the game by resuming physics, resetting the player's velocity, clearing obstacles, hiding the game over screen, and resuming animations, then set the game running state to true.

Load the dino down sprite sheet and set up a crouch animation. Resize and offset the player's body when the down arrow is pressed, and restore it on release.

Pressing the down arrow lowers the dino’s height to 58, offsets its position, and plays dino down animation; releasing returns to initial values and run animation once the game starts.

Spawn enemy birds by loading the enemy bird spritesheet from assets and spawning them at 20 or 70 pixels above the ground in the play scene, alongside cactuses.

Register and play enemy bird animations in the game, spawn enemies behind the map, adjust spawn distance, and ensure the player remains in front while handling collisions and animation stopping.

Load a cloud image, create a clouds group, place three clouds along the map, and move them left. Recycle clouds at the right edge as the game updates.

Learn to display a five-digit score as 00000 in a Phaser 3 game by creating a score text in the top-right corner, showing it on start, and incrementing during gameplay.

Create a score system with score, score interval, and score delta time; increment the score every interval, reset on game over, and log updates.

Display the score value by formatting the numeric score into a five-digit string using an array, unshift zeros, and join into the score text shown at the top-right.

Increase game difficulty by applying a game speed modifier to obstacle movement and spawn rate as the score grows, scaling the current game speed accordingly.

Increase the game speed modifier every 100 score using modulo; start at 1 and reset to 1 on game over; discuss using 0.1 increments for smoother speed.

Create a high score text, display it to the left of the normal score, initialize both to zero, and set alpha for visibility as the score updates.

Compute the high score in a JS/TS Phaser game by updating the high score text as the game ends. Display the current score and the high score on game over.

Implement a score text tween that blinks at every 100 points, using a 100 ms tween with three repeats, alpha to zero, and yoyo in Phaser 3.

Load and preload jump, hit, and progress sounds from the assets folder and register them in the scene. Play the jump sound when jumping and adjust its volume.

Register and play a hit sound when the player hits an obstacle, wiring a new hit sound into the preload scene and setting its volume to one for audibility.

Add a progress sound that plays when score reaches 100 in a Phaser 3 TypeScript game, adjust volume and the game speed modifier, and finalize production settings.

Design a platformer level with Tiled editor, create layers and tile sets, save the map as JSON, and load it into Phaser with colliders so players can walk on platforms.

Initialize a platformer game using a phaser webpack boilerplate and set up a play scene with preload and create to display a sky image; run npm dev to preview locally.

Learn to create a tile based map with tiled, load a 16 by 16 tile set, and export a json map for Phaser games.

Learn to create and save a crystal world map in tiled, load tile sets, and build a multi-layer map with an environment layer behind platforms for a Phaser 3 game.

Learn to load a two-layer tile map in Phaser 3, including environment and platforms, preload assets, load tilesets, create the map, and render layers in the game.

Refactor tile map setup by extracting map creation and layer creation into dedicated functions, load a single tileset from the map, and compare static versus dynamic layers in Phaser 3.

Refactor layers, preload the player sprite from assets, and create a Phaser 3 player with gravity, world bounds, and groundwork for idle, running, and jumping animations before colliding with platforms.

Enable collisions on the platforms using collision by exclusion and add a collider between the player and the platforms layer so the player collides with the platforms.

Create a platform colliders layer in the tiled map and enable collisions by exclusion or by a collides property, so the player collides with intended tiles, not empty space.

Learn to implement player movement with left, right, and jump, with animations. Create end-of-level logic, colliders, and mixins to enable win messages in the console.

Build on the collision setup between the player and platform colliders to enable left and right movement by using keyboard cursor keys and updating horizontal velocity in the update loop.

Refactor the player into its own class extending Phaser arcade sprite, wiring the constructor with scene, x, y, texture, and physics, then instantiate via new player in the create function.

Move gravity, collider bounds, and movement logic into the player class and implement preUpdate to handle input and animation, accessing the scene for input and ensuring super preUpdate is called.

Move the player logic from pre update to a dedicated update function by listening to the scene's update event in Phaser and initializing events to bind the handler.

Preload the player sprite sheet and define the run animation in Phaser 3, generating frames with 64 by 38 dimensions at 8 fps and using ignore if playing.

Refactor player animations into a dedicated file and initialize them with a reusable function, adding idle animation (frames 0–7, frame rate 8) alongside running animation in Phaser 3.

Switch between idle and running animations based on horizontal velocity, flip the sprite for left movement, and show idle when velocity is zero.

Implement jumping by pressing space or up, set the player's y velocity to a negative value, and trigger when on the floor via onFloor; adjust gravity for a responsive jump.

Implement a double jump in Phaser 3 by tracking jump count, using space just down to trigger one jump per press, reset jumps on floor, and remove up-key jumping.

Learn to implement a double jump with jump animations in Phaser 3, define frames and frame rate, and drive states with a ternary-style logic for idle, run, and jump.

Discover how to use a collidable mixin to share add collider functionality across game objects in Phaser 3, refactoring into reusable components for the player and future classes.

Learn how to use mixins to add collidable behavior to the player, refactor colliders into a dedicated create player colliders function that destructures colliders and uses platform colliders from layers.

Compute a map offset for the camera by subtracting the document body's offset width from the map width, and keep the canvas within 1280 by 600 pixels.

Set up and tune the camera to follow the player, define map bounds and world bounds, adjust zoom, and integrate config-driven values for a responsive Phaser 3 platformer.

Define start and end zones in a tiled map’s player zones object layer, then retrieve them in code to determine where the player spawns and where the level ends.

Extract the start zone from the player zones layer to determine the spawn point using its x and y coordinates. Set the player's origin to (0.5, 1) for centered spawning.

Create an invisible end zone in Phaser 3, sized 5 by 200 pixels, to mark level completion via player overlap and console log when crossed.

Implement overlap between the player and the end zone in Phaser 3 to log 'player has won' once, then deactivate the overlap to prevent repeats.

Add enemies to your Phaser 3 game and program them to move rightward and fall off platforms. Use the tiled editor to set spawn points for these enemies.

Add a Birdman enemy to a Phaser 3 game by loading the Birdman sprite sheet, creating a Birdman class with gravity and speed, and setting platform collisions.

Set up a player–enemy collider to trigger collision effects and damage exchange, then make the enemy immovable and adjust its body size and offset for accurate Phaser 3 collisions.

Adjust the player body size to improve collision with game objects and platforms by updating width and height values, testing collisions, and removing debug visuals.

Create multiple enemies by adding spawn points in the tiled editor, loading an enemy spawn layer, spawning Birdman enemies at each point, and attaching colliders in Phaser 3.

Create a base enemy class to share gravity and basic physics across Birdman and Snakey. Enable dynamic spawning via a get enemy types helper and spawn-point logic.

Create an enemies group in Phaser 3 to manage all enemies, add collider and overlap on the group rather than individual enemies, and load enemy types from the types folder.

Create birdman idle animations for an enemy, organize them in a separate animations folder, initialize and update them with delta time, and drive enemy movement through the update flow.

Explore raycasting to let enemies cast rays from their bodies, detect platforms, and turn back at platform ends, built from scratch with a collidable raycast mixin that returns hits.

Demonstrate ray casting to control an enemy at platform edges, replacing simple invisible colliders. Learn to draw and test the ray with mouse drag, using world coordinates for real-time feedback.

Extend raycasting to draw a line in real time on the map as you hold the mouse, updating with the active pointer position and world coordinates.

Learn to detect line collisions with a platforms layer in Phaser 3 by drawing in real time, using get tiles within the shape, and logging tile hits to verify interactions.

Learn to visualize tile hits along a line in Phaser by enabling tile collisions, rendering orange colliding tiles on a layer, and drawing debug visuals for raycasting.

Implement raycasting on enemies in Phaser 3 by drawing a line from the enemy center, default 30 pixels, each frame, returning the line for collision checks.

Cast a ray from the enemy and detect collisions by checking tiles within the shape against the colliding layer, using raycast hits to flag platform contact.

Improve performance by limiting raycasts to movement steps, using a collidable mixin, and tracking body position difference to cast rays only when moved by a set pixel threshold.

Optimize raycasting to check every two pixels, flip enemy's x and reverse velocity at platform ends, and base ray direction on the enemy's facing with a threshold to prevent flips.

Fix turning by enforcing a 100 ms threshold using time from last turn, then test with two enemies at higher speed and discuss patrol distance and edge behavior.

Cap enemy patrol range with a max patrol distance and track current patrol distance. Update it with delta X absolute and turn the enemy when max is reached, then reset.

Refactor patrol logic into a separate function, use time, set a maximum patrolling distance, decrease speed to 75, and add checks for missing body or floor.

Expose steepness in the raycast to dynamically adjust angles, making patrol rays steeper; set defaults for ray length and precision, and prepare for collision and bounce in the next lecture.

Implement the feature to receive a hit from an enemy and have the player bounce away from the enemy as part of the Phaser 3 JS/TS lesson.

Set up a collision between the player and an enemy and trigger a take-hit routine. Display damage visuals and decrease the player's health via an on-collision handler.

Implement bounce off on player-enemy collision using a has been hit flag and bounce velocity, disable collision, and stop input during the bounce.

Implement enemy bounce in Phaser 3 by setting horizontal velocity, using a set timeout to adjust vertical velocity, and preserving collisions while preventing rapid repeated hits.

Re-enable player control after a hit by using a one-second timed event; set has been hit back to false after the delay, preventing further hits during the interval.

Learn to replace timed events with scene time delay calls, using a one-second delay to execute a function, and manage debug and raycasting to control visuals during gameplay.

Learn how to implement a damage tween in Phaser 3 to animate a player when hit, including targeting, duration, color tint, repeats, and stopping the tween.

Implement health for players and enemies and display a top-left health bar that updates on damage in a Phaser 3 game.

Create a heads-up display health bar in Phaser 3 that visualizes player health and damage, using a 40 by 8 graphics bar initialized at 100 health.

Draw a health bar by clearing the previous shape and painting a colored rectangle with x and y, deriving width and height from the health bar size.

Set the health bar to follow the camera by applying a zero scroll factor, then manage zoom and canvas positioning to keep the bar aligned as the player moves.

Apply zoom-based calculations to position the health bar at the correct screen coordinates while following the player, using a 1.5 zoom factor and left/right top corner logic.

Learn to extend the health bar with a white inner layer and a border, adjusting margins and coordinates after a 1.5x map zoom to keep health inside the purple frame.

Display a green health bar over a white background, calculating width from health and pixels per health with Math.floor, then update it dynamically as damage lowers health.

Implement a health bar decrease system that subtracts enemy damage from player health, redraws the bar, and switches from green to red when health falls to one third.

Scale the health bar by a factor using a scale parameter, transforming x and y coordinates and updating the draw. Clamp health amount to zero when damage would go negative.

Introduce the section by implementing the player's ethics system, enable projectile casting via a keyboard key, and handle collisions with enemies before revealing hit effects in the next section.

Build a simple projectile attack in Phaser 3: create a projectile class, load ice ball assets, fire from the player with keyboard input, and damage enemies on hit.

Learn how to destroy a projectile after it travels 200 pixels by tracking travel distance in a Phaser 3 game, using a pre-update function and delta time for precise disposal.

Create a five-projectile group in Phaser 3, keep projectiles inactive until fired, reuse the first inactive projectile with velocity when shooting, and recycle it after 200 pixels.

Fix the projectile by passing the player's x and y, activate it with a 300-pixel travel distance in Phaser 3, and recycle by marking inactive instead of destroying.

Set the direction of projectiles in a phaser 3 game by tracking the last player direction, using absolute speed for right and negative speed for left, and flipping the sprite.

Center the projectile by computing the player's center coordinates and adjusting its center X for left or right shots, then reset to inactive when out of range.

Set a projectile cooldown and track the last shot timestamp to prevent firing again until the cooldown elapses, using a get timestamp helper.

implement projectile cooldown and show the player throw animation when shooting, by preloading a throw spritesheet and creating a throw animation with an is-playing check via an anims mixin.

Implement collision between player projectiles and enemies using colliders and on weapon hit, apply damage to enemy health, and deactivate projectiles to ensure accurate hits and clean up after termination.