Objects (JSON)

What are objects?

Objects are collections of properties (key-value pairs) grouped together. They let you organize related data and represent real-world entities like game characters, items, or settings.

Benefits of using objects?

• Organize related data together
• Access data using descriptive property names
• Represent complex entities (characters, items, etc.)
• Pass multiple related values efficiently
• Structure data in a readable way

const player = {
    name: "Astro",
    health: 100,
    score: 0,
    position: { x: 100, y: 300 },
    inventory: ["shield", "weapon"]
};

// Accessing properties
console.log(player.name); // Astro
console.log(player.health); // 100
console.log(player.position.x); // 100
console.log(player.inventory[0]); // shield

// Modifying properties
player.health -= 20;
player.score += 100;

// Adding new properties
player.level = 1;

// Using in functions
function displayPlayer(character) {
    console.log(character.name + " has " + character.health + " health");
}

What does this code do?

• Creates an object with multiple properties
• Objects can contain nested objects and arrays
• Accesses properties using dot notation
• Modifies property values
• Adds new properties to existing object
• Passes objects to functions

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

class GameLevelCollisionMechanicsLessonLevel {
    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: ExampleEnemy, data: npcData }
        ];
    }
}

export default GameLevelCollisionMechanicsLessonLevel;

We create JSON objects like the background, NPC and player and assign properties to them.

Try It Yourself

%%js // CODE_RUNNER: objects const player = { name: “Astro”, level: 5, health: 100 }; console.log(player.name); console.log(player[“level”]); player.health = 80; console.log(player);