Go back!

Documentation

Table of Contents

• Code Comments
• Mini-Lesson Documentation
• Code Highlights

---

Code Comments

Implemented formal JSDoc annotations to maintain standard density Used JSDoc structure to define how GameLevelRedRidingHood2 communicates with the game engine environment

/**
 * @class GameLevelRedRidingHood2
 * @classdesc Manages the lifecycle, environment state, and entity interactions for Level 2 (The Chase).
 * Coordinates custom spline-based boundary paths, player-to-AI collision loops, and background audio contexts.
 */
class GameLevelRedRidingHood2 {
    /**
     * Initializes the Level 2 instance, sets up DOM UI overlays, and maps coordinate vectors.
     * @constructor
     * @param {Object} gameEnv - The global runtime engine environment tracking canvas context and game objects.
     */

Added code comments within the collision method to explain why specific calculations are happening

checkPlayerWolfCollision(player, wolf) {
        if (!player?.position || !wolf?.position) return false;

        const wolfPadding = 60; // Shrinks the wolf's structural boundary box by 60 pixels for fair play
        const playerPadding = 10; // Slightly shrinks Red's boundary box for precision collision checking

Mini-Lesson Documentation

Created a visual post with embdedded game runner about our lesson, Spline Barriers.

Go to Mini-Lesson for our Red Riding Game!

Code Highlights

API and Collision snippets

This snippet highlights how the game handles advanced API tasks into its own objects.

class RedRidingMusic {
  constructor() {
    
    // THIRD-PARTY REST API ENDPOINT OVER INTERNET
    // Establishes a connection to the external public iTunes structure. 
    // This removes the need to store large audio assets locally.
    this.endpoint = 'https://itunes.apple.com/search?term=little+red+riding+hood&entity=song&limit=5';
    
  }
}

async fetchPreviewUrl() {
  try {
      // NON-BLOCKING ASYNC/AWAIT NETWORK FETCH
      // Pauses the execution of this method to retrieve the network stream. 
      // This leaves the main game thread open so the canvas frame rate never drops.
      const response = await fetch(this.endpoint);
      
      // JSON STREAM DESERIALIZATION
      // Parses the raw textual payload string stream into an organized, 
      // readable JavaScript Object structure.
      const data = await response.json();
      
      return data;
  } catch (error) {
      console.error("API Gateway Connection Error:", error);
      return null;
    }
}

This snippet uses exact checkPlayerWolfCollision math from level 2

checkPlayerWolfCollision(player, wolf) {
    if (!player?.position || !wolf?.position) return false;

    // Shrinks the raw image boundary dimensions by specific pixel values.
    // This creates a highly accurate visual "hitbox" instead of relying on the blank canvas space around the sprite images.
    const wolfPadding = 60;   // Inward buffer for the enemy asset
    const playerPadding = 10; // Inward buffer for the player asset

    // OVERLAP INTERSECTION ALGORITHM
    // Standard AABB collision logic checking for overlapping horizontal (X) and vertical (Y) zones.
    return (
      player.position.x + playerPadding < wolf.position.x + wolf.width - wolfPadding &&
      player.position.x + player.width - playerPadding > wolf.position.x + wolfPadding &&
      player.position.y + playerPadding < wolf.position.y + wolf.height - wolfPadding &&
      player.position.y + player.height - playerPadding > wolf.position.y + wolfPadding
    );
}