Writing Classes

What are writing classes?

Writing classes are a big part of OOP (Object Oriented Programming), A class is an organized, repeatable way to make multiple functions for an object that share similar properties.

Benefits of writing classes?

• Writing classes help in not rewrting and repeating code
• Much more efficient way to write code
• You can have multiple functions and objects in one class

class GameLevelPatrollingGuard {
    constructor(gameEnv) {
        const path = gameEnv.path;
        const width = gameEnv.innerWidth;
        const height = gameEnv.innerHeight;

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

        const playerData = {
            id: 'playerData',
            src: path + "/images/gamebuilder/sprites/astro.png",
            SCALE_FACTOR: 5,   
            STEP_FACTOR: 1000,
            ANIMATION_RATE: 50,
            INIT_POSITION: { x: 100, y: 300 },
            pixels: { height: 770, width: 513 },
            orientation: { rows: 4, columns: 4 },
            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: { widthPercentage: 0, heightPercentage: 0 },
            keypress: { up: 87, left: 65, down: 83, right: 68 }
            };

        const npcData = {
            id: 'ufo',
            greeting: 'Hello!',
            src: path + "/images/gamebuilder/sprites/ufos.png",
            SCALE_FACTOR: 8,
            ANIMATION_RATE: 50,
            INIT_POSITION: { x: 259, y: 223 },
            pixels: { height: 500, width: 500 },
            orientation: { rows: 4, columns: 3 },
            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: { widthPercentage: 0.1, heightPercentage: 0.2 },
        };


        this.classes = [      
            { class: GameEnvBackground, data: bgData },
            { class: Player, data: playerData },
            { class: Guard, data: npcData }
        ];
    }
}

export default GameLevelPatrollingGuard;

So what does this class do?

• Makes a background, player and npc
• Stores the three classes in an array
• Tells the computer to configure the game with this npc, character, background etc.

With classes, you can make a whole level in one big class.

class ExampleEnemy extends Enemy {
    constructor(data = null, gameEnv = null) {
        super(data, gameEnv);
    }

    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 ExampleEnemy;

What does this class do?

• It extends the Enemy classs, which has all the properties/methods of the enemy.
• handleCollisionEvent() detects if the player hits the enemy, and if it does it logs to the console and destroys the player
• With one class, you have made a full collision mechanic

Game Runner

Try out this game made by using classes:

Engine v1 Engine v1.1 Select Level...

Game Status: Not Started

Try It Yourself

%%js // CODE_RUNNER: writing-classes class Player { constructor(name) { this.name = name; } } const player = new Player(“Astro”); console.log(player.name);