Code Comments

What are code comments?

Code comments are notes you add to your code that the computer ignores. They help explain what your code does so others (and future you) can understand it.

• Uses // for single line comments
• Uses /* */ for multi-line comments
• Computer ignores all comments
• Comments explain what code does
• Shows proper commenting practice

Benefits of code comments?

• Explain complex code logic
• Document why decisions were made
• Help team members understand code
• Make code easier to maintain
• Leave notes for debugging

// Import required game engine classes
import GameEnvBackground from '@assets/js/GameEnginev1/essentials/GameEnvBackground.js';
import Player from '@assets/js/GameEnginev1/essentials/Player.js';
import Npc from '@assets/js/GameEnginev1/essentials/Npc.js';
import ExampleEnemy from '@assets/js/projects/collisions-mechanic/levels/ExampleEnemy.js';

// Define the game level class
class GameLevelCollisionMechanicsLessonLevel {
    constructor(gameEnv) {
        // Get game environment properties
        const path = gameEnv.path;
        const width = gameEnv.innerWidth;
        const height = gameEnv.innerHeight;

        // Configure background sprite
        const bgData = {
            name: "custom_bg",
            src: path + "/images/gamebuilder/bg/alien_planet.jpg",
            pixels: { height: 772, width: 1134 }
        };

        // Configure player sprite and animations
        const playerData = {
            id: 'playerData',
            src: path + "/images/gamebuilder/sprites/astro.png",
            SCALE_FACTOR: 5,
            STEP_FACTOR: 1000,
            ANIMATION_RATE: 50,
            // Starting position
            INIT_POSITION: { x: 100, y: 300 },
            pixels: { height: 770, width: 513 },
            // Sprite sheet organization
            orientation: { rows: 4, columns: 4 },
            // Animation frames for each direction
            down: { row: 0, start: 0, columns: 3 },
            downRight: { row: 1, start: 0, columns: 3, rotate: Math.PI/16 },
            downLeft: { row: 0, start: 0, columns: 3, rotate: -Math.PI/16 },
            left: { row: 2, start: 0, columns: 3 },
            right: { row: 1, start: 0, columns: 3 },
            up: { row: 3, start: 0, columns: 3 },
            upLeft: { row: 2, start: 0, columns: 3, rotate: Math.PI/16 },
            upRight: { row: 3, start: 0, columns: 3, rotate: -Math.PI/16 },
            // Hitbox for collision detection
            hitbox: { widthPercentage: 0, heightPercentage: 0 },
            // Keyboard controls (WASD keys)
            keypress: { up: 87, left: 65, down: 83, right: 68 }
            };

        // Configure enemy/NPC sprite
        const npcData = {
            id: 'ufo',
            greeting: 'Hello!',
            src: path + "/images/gamebuilder/sprites/ufos.png",
            SCALE_FACTOR: 8,
            ANIMATION_RATE: 50,
            // Starting position
            INIT_POSITION: { x: 259, y: 223 },
            pixels: { height: 500, width: 500 },
            // Sprite sheet organization
            orientation: { rows: 4, columns: 3 },
            // Animation frames for each direction
            down: { row: 0, start: 0, columns: 3 },
            right: { row: Math.min(1, 4 - 1), start: 0, columns: 3 },
            left: { row: Math.min(2, 4 - 1), start: 0, columns: 3 },
            up: { row: Math.min(3, 4 - 1), start: 0, columns: 3 },
            upRight: { row: Math.min(3, 4 - 1), start: 0, columns: 3 },
            downRight: { row: Math.min(1, 4 - 1), start: 0, columns: 3 },
            upLeft: { row: Math.min(2, 4 - 1), start: 0, columns: 3 },
            downLeft: { row: 0, start: 0, columns: 3 },
            // Hitbox for collision detection
            hitbox: { widthPercentage: 0.1, heightPercentage: 0.2 },
        };

        // Register all game objects for this level
        this.classes = [      
            { class: GameEnvBackground, data: bgData },
            { class: Player, data: playerData },
            { class: ExampleEnemy, data: npcData }
        ];
    }
}

// Export the level configuration
export default GameLevelCollisionMechanicsLessonLevel;

What does this code do?

• Comments explain what each section of code does
• Describes imports at the top
• Explains background, player, and enemy configuration
• Documents animation setup and sprite sheets
• Shows where hitbox and keyboard controls are set
• Helps future developers understand the game structure

// Example: Function with detailed comments
function movePlayer(player, direction) {
    // Validate input
    if (!player || !direction) {
        console.error("Missing player or direction");
        return;
    }
    
    // Speed in pixels per frame
    const speed = 5;
    
    // Update position based on direction
    switch(direction) {
        case 'up':
            player.y -= speed;
            break;
        case 'down':
            player.y += speed;
            break;
        case 'left':
            player.x -= speed;
            break;
        case 'right':
            player.x += speed;
            break;
        default:
            console.warn("Unknown direction: " + direction);
    }
    
    // Return updated position
    return player;
}

// Usage example
const player = { x: 100, y: 300 };
movePlayer(player, 'right');

What does this code do?

• Comments explain function purpose at top
• Input validation comments explain error checking
• Speed constant comment explains the value
• Switch statement comments describe logic
• Error handling comments explain warnings
• Return statement comments explain what’s returned
• Demonstrates best practices for code documentation

Try It Yourself

%%js // CODE_RUNNER: code-comments // Initialize player stats let playerHealth = 100; let playerMana = 50;

// Take damage (important for gameplay) playerHealth -= 25;

/* Multi-line comment: Apply healing effect */ playerHealth += 15;

console.log(“Health: “ + playerHealth);