Learn Game Development with JavaScript

Create a basic web page using HTML, CSS, and JavaScript, include a canvas element, and apply a global reset and border-box to center the canvas for cross-browser consistency.

Wire a window load event to start the game script, create a 2D canvas context, and scale a 500 by 500 canvas to fit the browser.

Explore object oriented programming in JavaScript, a prototype-based language that uses class syntax and encapsulation to organize game logic into dedicated classes, with step-by-step guidance on inter-class communication.

Use constructors and the new keyword to create a game object that automatically creates a player, passes the game reference, and updates and draws the player on a canvas context.

Create an animation loop with update and draw methods at 60 fps via requestAnimationFrame, rendering a canvas player controlled by up and down arrows and clearing the canvas every frame.

Demonstrates keyboard input handling in a JavaScript game using an input handler, keydown and keyup listeners, and a game-wide keys array to control player movement.

Define a projectile class with constructor(game, x, y), 10x3 size and speed 3, including update and draw; manage marked for deletion beyond 80% width and store projectiles in array.

Learn to implement periodic events in a JavaScript game by using delta time from requestAnimationFrame timestamps to recharge ammo every 500 milliseconds within update loop, with timer and max ammo.

Visualize ammo recharge by drawing rectangles for each projectile with a UI class and draw method, using the context to show spacing, color, and max ammo of 50 on screen.

Design a base enemy class with inheritance to create multiple enemy types, enabling right-to-left movement, off-screen deletion, and sprite rendering in the main game loop.

Implement a reusable collision detection function for rectangle objects (x, y, width, height) to detect player-enemy and enemy-projectile collisions, updating lives, score, and deletions in the game loop.

Define a ten-point winning score and end the game when surpassed, while rendering the score on the UI canvas with styled text and canvas shadows scoped by save and restore.

Explain win and lose conditions based on score within a time window, display centered messages on canvas, showing you win or you lost with well done and try again text.

Set a 5-second time limit and track game time with delta time, updating an on-screen timer and triggering game over, while preventing score gains after game over.

Create a parallax background in a JavaScript canvas game by layering four images with individual speed modifiers, a background manager, and a drawing order that places the player on top.

Load the player image from index.html and animate a seahorse sprite sheet with swimming and power up frames. Use the nine-argument drawImage to crop frames and cycle through max frames.

Learn to implement a debug mode in a JavaScript game by toggling hitbox visibility and collision-related visuals with the D key, controlling a debug property in the game class.

Introduce three anglerfish animation types and a lucky fish power-up, using sprite sheets to randomly assign animations and manage frame x/y in the game loop for varied, dynamic enemies.

Add a second anglerfish enemy type with two animations and a 50/50 spawn of angler one or angler two, increasing game time to 15 seconds, differing lives and score points.

Lucky fish enemy subclass added with three lives and a 15-point reward; set type to lucky, enable random spawning with anglers, and fix animation by using the correct sprite sheet.

Collect lucky fish to trigger a power up mode with a 10-second delta-time timer, dual lasers from mouth and tail, and faster ammo recharge.

Learn to render projectiles as images on a canvas by loading an image and drawing it with drawImage at x and y, and explore sprite sheets and particle effects.

Add a font from Google Fonts (bangers) to the game, apply it to UI text, and adjust size and spacing for win and lose messages in a Victorian steampunk theme.

Hide the projectile image and reveal hit boxes and lives only in debug mode, clamp vertical movement to game boundaries, and allow half the sprite to extend offscreen.

Create a particle class to generate randomized sprite parts when enemies are hit or destroyed, attach gravity and bounce physics, and render them from a sprite sheet on canvas.

Rotate particles on canvas by giving each a unique angle, translating to its center, and applying rotation in radians inside a save-restore block for independent, smooth motion.

Disable debug mode by default, hide indicators on load. Power-ups activate from power-up fish; ammo refills occur below max; adjust bounce and draw order so user interface stays on top.

In a power up mode, introduce a hive whale enemy in a JavaScript game that splits into five drones after defeat, adding tactical decisions and extended challenge.

Explore the drone enemy class, ambush predators that spawn five drones from destroyed hives, each with random speeds, three lives, and three-point score rewards.

Learn to animate dust and fire effects using sprite sheets, with a parent explosion class and two subclasses for smoke and fire, controlled by delta time and frames per second.

Learn how to implement a shared explosion system in JavaScript by refactoring fire and smoke sprite sheets into a parent class, enabling dynamic fire or smoke effects with 200x200 frames.

Tune game difficulty by adjusting time limit, winning score, ammo recharge, lives, and enemy spawn variety; ensure score is not affected after winning or losing, with a 30-second limit.

Learn to implement Moon Fish as a fast, high-health enemy that triggers a power-up when destroyed from distance, rewarding strategic, high-skill play.

Create a JavaScript sound controller to rewind and play audio clips such as power, explosion, shot, hit, shield, and power down, linked via index.html.

Create a shield class that animates a shield sprite sheet over the player on enemy collision, using delta time and FPS control, while the invincible player incurs a point penalty.

Learn to implement animated projectiles in canvas using a projectile class, with a seahorse firing a four-frame fireball sprite sheet at 20 fps and anime types Stalker and Razer Finn.

Improve game performance in JavaScript by optimizing graphics and animation, including object pooling, multi-canvas drawing, reduced shadows, spawn rate adjustments, and sprite sheet/frame rate tuning for older devices.