Methods and Parameters

What are Methods?

A method is a reusable block of code that performs a specific task. Instead of writing the same code multiple times, you can create a method once and call it whenever you need it.

What are Parameters?

Parameters are inputs that you pass to a method. They allow you to customize what a method does without rewriting it.

Benefits

• Reusability: Write once, use many times
• Flexibility: Use parameters to change behavior
• Maintainability: Easier to fix bugs or make changes
• Clarity: Code is more readable and organized

import Enemy from '@assets/js/GameEnginev1/essentials/Enemy.js';
import Player from '@assets/js/GameEnginev1/essentials/Player.js';

class Guard extends Enemy {
    constructor(data = null, gameEnv = null) {
        super(data, gameEnv);
        this.velocity.y = -3 // Set an initial vertical velocity for the guard in the constructor. Because it is in the constructor, this velocity will be set as soon as the level starts.
    }

    /**
     * Override the update method to handle collision detection and update the vertical velocity
     */a
    update() {
        // Update begins by drawing the object
        this.draw();

        if (this.spriteData && typeof this.spriteData.update === 'function') {
            this.spriteData.update.call(this);
        }
        // Check for collision with the player
        if (!this.playerDestroyed && this.collisionChecks()) {
            this.handleCollisionEvent();
        }

        this.position.y += this.velocity.y; // update position

        // Ensure the object stays within the canvas boundaries
        this.stayWithinCanvas();
    }

    /**
     * stayWithinCanvas method ensures that the object stays within the boundaries of the canvas.
     * With this override, we can also reverse the velocity whenever the guard hits the edges of the canvas.
     */
    stayWithinCanvas() {
        // Bottom of the canvas
        if (this.position.y + this.height > this.gameEnv.innerHeight) {
            this.position.y = this.gameEnv.innerHeight - this.height;
            this.velocity.y *= -1; // Reverse vertical velocity to create a "bounce" effect
            console.log(this.velocity.y);
        }
        // Top of the canvas
        if (this.position.y < 0) {
            this.position.y = 1;
            this.velocity.y *= -1; // Reverse vertical velocity to create a "bounce" effects
            console.log(this.velocity.y);
        }
        // Right of the canvas
        if (this.position.x + this.width > this.gameEnv.innerWidth) {
            this.position.x = this.gameEnv.innerWidth - this.width;
            this.velocity.x = 0;
        }
        // Left of the canvas
        if (this.position.x < 0) {
            this.position.x = 0;
            this.velocity.x = 0;
        }
    }

    handleCollisionEvent() {
        var player = this.gameEnv.gameObjects.find(obj => obj instanceof Player); 

        console.log("Collision has occurred, player has been destroyed.");

        player.destroy();
        this.playerDestroyed = true;
    }
}

export default Guard;

What does this code do?

Methods:

1. constructor(data, gameEnv) - Starts up the Guard. It takes information about the guard and the game environment, then sets the guard’s starting speed.

2. update() - Runs every frame to keep the guard moving. It draws the guard, checks if it hits the player, and updates its position.

3. stayWithinCanvas() - Makes sure the guard stays inside the game area. If it hits an edge, it bounces back (reverses direction).

4. handleCollisionEvent() - Handles what happens when the guard touches the player. It destroys the player and marks that the player is gone.

Parameters:

• data (in constructor) - Stores the guard’s starting information
• gameEnv (in constructor) - Provides access to the game environment (like the canvas size and other game objects)

Simple explanation: The Guard class uses parameters to accept the game information it needs, and methods to control what the guard does (move, bounce, collide).

Try It Yourself

%%js // CODE_RUNNER: methods-parameters const enemy = { name: “Goblin”, takeDamage: function(amount) { return this.name + “ takes “ + amount + “ damage”; } }; console.log(enemy.takeDamage(25)); console.log(enemy.takeDamage(10));