Remake Retro Games with JavaScript

Set up a vanilla JavaScript canvas project by creating index.html, linking CSS and the script, and centering a bordered canvas while organizing code into player, projectile, enemy, and game classes.

Build a canvas game with a main game object and a 600 by 800 canvas; render loop updates and draws the player, clearing the canvas at 60 frames per second.

Master keyboard controls in a JavaScript game by handling keydown and keyup events, tracking arrow key presses, and updating the player's speed and position within horizontal boundaries.

Use axis-aligned rectangle collision detection to determine when a projectile hits an enemy, destroy the enemy, and return the projectile to the object pool with a reusable check collision method.

Explore how to display dynamic status text (score, waves, lives) in a canvas game, manage game over and restart logic, and implement scalable waves with collision and scoring.

Implement the beetlemorph enemy class in a JavaScript retro game, a single-life space bug that explodes on projectile hit, using a sprite sheet, canvas drawImage, and extends and subclassing.

Explore how requestAnimationFrame adapts to refresh rates and provides timestamps for delta time. Use delta time and a sprite timer to update sprite frames every 500 ms for smooth animation.

Animate the player using a sprite sheet and separate jets, controlling frame X and source X to react to independent movement and attack inputs for responsive, layered gameplay.

Create the rhino morph enemy class by linking four lives to sprite sheet frames, swapping frames as health changes, and override the hit method with math.floor to clamp max lives.

Demonstrates boss movement and collision in a canvas game: bounce off edges, animate sprite frames, respond to hits, manage lives, trigger explosions, remove defeated bosses, and award points.

Upgrade the reactor with plutonium to unleash superweapons by focusing energy into a powerful light column that burns through swarms of enemies while managing heat to avoid overheating.

implement resource management with a rechargeable energy bar and render two weapons: the long range laser and the super laser, via a parent laser class and two subclasses.

Implement laser damage mechanics by applying per-tick collision checks between lasers, enemies, and bosses, tune small and big lasers, and throttle damage timing for consistent play across devices.

Implement a resource management system by adding an energy bar, laser energy costs, cooldown mechanics, and automatic recharge to balance laser usage and prevent overheating.

Implement eagle morph enemies from sprite sheet. Create a wave with 80% eagle morphs, 10% rhino morphs, and 10% beetle morphs, and add a projectile pool to shoot back.

Show how enemy projectiles collide with the player, reset to the pool, and reduce lives to trigger game over. Include basic and laser interactions, with eagle morphs ignoring lasers.

Split the lobster morph by hitting it to create clones, then target the copies; reuse a sprite sheet, manage max frames and lives, and balance enemy variety for strategy.

Define a planet class with x, y, radius and a draw method using arc for a circle. Create a game class to render and pass the game reference to planet.

Bind a mouse move listener in the game class constructor using an ES6 arrow function, capture offsetX and offsetY, and render a planet-to-mouse line with a canvas animation loop.

Create the player class to manage visuals, behaviour, and controls. Use render loop and a radius 40 hitbox to move, draw a circle and image, and attach to the mouse.

Rotate the player spaceship to face the mouse by translating the rotation center to the player, then applying canvas rotate in radians while using save and restore to isolate changes.

Implement key up event listeners to toggle a debug mode with the D key, log events, and conditionally draw hitboxes for the player and planet in the draw method.

Build a reusable projectile pool that automatically resets off-screen projectiles, ensuring continuous firing. Calculate direction with a calc method to launch from the spaceship tip toward the mouse or planet.

Create an enemy object pool in JavaScript with a 20-item pool and a free flag, start/reset activate/deactivate, draw/update only when active, and move enemies toward the planet using aim.

Remake retro games with JavaScript teaches a reusable circle collision check for circular hitboxes, using center distances, hypotenuse, and radii sums, returning true or false and resetting objects on collision.

Create an asteroid enemy class by extending the parent enemy class, using a sprite sheet with draw and crop techniques, and toggle collision circles in debug mode with D.

Animate sprites with a sprite sheet by selecting frames via frame x and frame y, and randomizing asteroid variations. Manage lives, hits, and explosions with timed sprite updates and pooling.

Create a Lobster Morph enemy with eight lives, sprite-sheet animation, and object-pool integration; rotate each enemy toward the planet using atan2 and canvas translate-rotate for correct rendering.

Render score, lives, and game over messages on the canvas with font and alignment. Award points only when enemies are shot and define a winning score.

Implement player lives, render life indicators as rectangles, handle collisions to reduce lives, and use score and winning score to trigger game over or victory, featuring asteroid and lobster morphs.

Import and adapt Battlemorph sprite sheets to create the Beetle Morph enemy class, then use an enemy pool and simple random logic to spawn Beetle Morph, asteroid, and Lobster Morph.

Create a rhino morph enemy type for a JavaScript Space Invaders clone, using a new sprite sheet, four lives, and a randomized spawn into the enemy pool.

Set up an index.html with a canvas, add a global reset and centered layout, apply a cover background, and implement fullscreen and reset controls styled with the Google font Bangers.

Create an enemy class in a separate Nmjs file and connect it to the main game to render and animate a swarm of enemies on the canvas.

Turn enemies into object pool members, activating with start and deactivating with reset, updating and drawing only active enemies for improved performance.

Activate enemies periodically using a 1000 ms timer with delta time from requestAnimationFrame, reusing an object pool and updating and drawing active enemies.

Use a single mouse object to handle both mouse and touch events, mapping touchstart to mouse down and touchend to mouse up, and read coordinates from event.changedTouches[0].pageX and pageY.

Learn to render game status text in a JavaScript canvas by separating drawing into methods, displaying left-aligned score and centered enemy lives, and handling game over with single trigger messages.

Toggle full screen in your JavaScript games using a simple if-else toggle, with spacebar or F on desktop and touch gestures on mobile, and integrate controls, reset, and game loop.

Adapt your game to different screen orientations by loading images from a hidden assets container and rendering player lives as crew sprites with canvas drawImage.

Demonstrate a JavaScript enemy system with a base enemy class and Beetle Morph, using a state design pattern, shared and unique properties, and update and collision handling.

Draw and crop sprite sheets using the nine-argument draw image method, control frame x and y, and vary enemy sprites with randomized frames to create animated explosions and variations.

Implement a toggleable debug mode in the game class to display collision boxes and enemy lives, toggle with the D key, and prototype complex enemies using a state design pattern.

Explore enemy variety using 100x100 sprite sheets, multiple morphs (lobster and beetle), and frame-based animation; compare simple if-else implementation with the state design pattern and discuss one-time actions in updates.

Explore implementing the state design pattern to drive phantom morph enemies with solid and invisible phases, timing hits, bounce movement, and audio-visual feedback through sprite animation and sounds.