Remake Retro Games with JavaScript

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.