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

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.

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.

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.

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.

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.

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 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.

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.

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 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.

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.

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.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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

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.

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.

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.

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 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.

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.

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 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 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.

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.

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.

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.

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.