Game Development in JS - Crash course (w/ CreateJS)

Build a grid component for a CreateJS game with a grid class and constructor, configuring start coordinates, size, and columns and rows, then instantiate and wire the main grid.

Create a migrate function to grid the screen into 11 columns and 11 rows, draw a rectangle with stroke and fill, add it to the stage, then update the stage.

Create a full-screen grid using nested for loops, calculate each rectangle's start from its column and row, and attach a click listener that logs the rectangle index.

Implement a global stage update system with a ticker at frame rate 16 to update the stage on each tick and remove the need to update the grid component.

Update the grid start point by creating a new CreateJS container, adding rectangles to it, and positioning the container with start x and start y before adding to the stage.

Build a grid utility to place a rectangle on the stage by index, using start x, start y, column count, and item width and height.

Compute scaleX and scaleY to fit a selected area by comparing target width and height with the object's original size, then adjust end indices and verify via console logs.

Rename the function to place object at index, position it between coordinates 13 and 81, and align its start x and start y with the grid.

Explore a powerful grid system by creating multiple grids, placing objects at index, and scaling rectangles to fit the grid, demonstrating layouts without crashing.

Create a preload screen to load the initial background and a load screen to load all game assets, including images and sounds, with a progress bar.

Update and clean our code by creating a start processing function, wiring a preload screen entity, renaming components, and ensuring the console log runs on page refresh.

Load a background image for the loading screen using CreateJS LoadQueue, define a manifest of assets, assign IDs, and initialize the loader to handle assets and log messages.

Set up and render a full-screen background image by configuring the grid, loading assets with a loader, and placing the bitmap at a specific index on the stage.

Prepare two load bar images (black background and green) and add them to the manifest. Reuse the background code to load, display on stage, and adjust the load bar size.

Handle screen resize in a CreateJS game by clearing the stage, rebuilding the grid, and reusing the existing loader through a resize flag, a handle resize function, and preload screen.

Create and wire a load screen that handles load assets and resize, using a global loader and a progress event to update a background and load bar.

Implement a top-aligned load bar that shows loader progress with CreateJS. Compute percent from 82 units and progress, then update bar2 bitmap from the start index to show green progress.

Learn how to purge the stage by deleting load bar objects identified by a name property, using a purge stage function that loops through stage children and removes matched elements.

Add a start button to stage, load it by its id, and ensure one instance on resize with an under size function; clicking deletes stage and moves to next screen.

Create and initialize a main screen in a createjs game, wire a start button to switch to the main screen, clear the stage, and load a full screen background.

Build a robust JavaScript game loading flow using a first-load flag, pre-load screen, and main screen init to avoid asset reloads on resize and ensure a smooth start.