Introduction: Why use Classes?

When developing a game, organizing code efficiently is essential. Instead of writing separate functions and variables for each game character, classes allow us to create a blueprint that defines shared properties and behaviors. In my Adventure game, I used JavaScript classes to structure different entities, such as the player and NPCs. By defining a class once and creating multiple objects from it, I was able to keep my code organized and reusable. This made it easier to manage game mechanics like movement, interactions, and dialogue while keeping the game scalable and efficient.

Draw.io and How It is Useful

To better understand how classes and objects work in JavaScript, I created a Draw.io diagram to illustrate their relationship. For me, the most helpful tip when creating the diagram was the “is a” and “has a” visualization that my teacher introduced me to. This allows me to better understand how everything is structured and what file belongs where.

Creating and Using Object in JS

In JavaScript, a class acts as a blueprint, and we create objects from it using the new keyword. In my Adventure game, I used a Character class to define the properties and behaviors of different game characters. For example, when the player encounters an NPC, an object representing that NPC is created from the Character class. Each character can have different attributes like sprites and position.

%%js

//Example of an object class from the game

const sprite_src_spider = path + "/images/gamify/spider.png";
    console.log(`Loading NPC sprite from: ${sprite_src_spider}`); // Log image path
    const sprite_data_spider = {
      id: 'Spider',
      greeting: "Time to dieeeee-",
      src: sprite_src_spider,
      SCALE_FACTOR: 15,
      ANIMATION_RATE: 50,
      pixels: { height: 655, width: 390 },
      INIT_POSITION: { x: width / 4, y: height / 4 },
      orientation: { rows: 4, columns: 4 },
      down: { row: 0, start: 0, columns: 3 },
      hitbox: { widthPercentage: 0.3, heightPercentage: 0.3 },
    };

Parameters

In my game, the resize() method ensures that objects adjust their size and position dynamically when the game window changes. While this method does not take direct parameters, it still calculates new values using GameEnv.innerWidth and GameEnv.innerHeight to update the object’s scale, position, and velocity. If I wanted to make this method more flexible, I could modify it to accept parameters, such as resize(newWidth, newHeight), allowing me to manually set the object’s dimensions instead of relying on the game environment. This demonstrates how parameters can be used to pass specific values into methods, making them more versatile and adaptable in different situations.

resize() {
    // Calculate the new scale resulting from the window resize
    const newScale = { width: GameEnv.innerWidth, height: GameEnv.innerHeight };

    // Adjust the object's position proportionally
    this.position.x = (this.position.x / this.scale.width) * newScale.width;
    this.position.y = (this.position.y / this.scale.height) * newScale.height;

    // Update the object's scale to the new scale
    this.scale = newScale;

    // Recalculate the object's size based on the new scale
    this.size = this.scale.height / this.scaleFactor; 

    // Recalculate the object's velocity steps based on the new scale
    this.xVelocity = this.scale.width / this.stepFactor;
    this.yVelocity = this.scale.height / this.stepFactor;

    // Set the object's width and height to the new size (object is a square)
    this.width = this.size;
    this.height = this.size;
}

Overall summary

Using methods in my game makes it easier to control and update objects dynamically. Whether it’s adjusting the player’s movement, scaling objects when resizing the window, or handling collisions, methods allow for structured and reusable code. By incorporating parameters, I can make these methods even more flexible, letting them take in specific values instead of relying only on internal calculations. This approach improves both the functionality and maintainability of the game, making it easier to expand and modify in the future.