Open the Door

Ready to build your first WORLD? πŸ—ΊοΈ One room was just the beginning - now you’re about to create interconnected spaces like the dungeons in Zelda, the sprawling stations in Metroid, or the mysterious houses in classic RPGs. You’re about to become a world builder! ✨

Try it! Move around with arrow keys and walk into the yellow doors to explore different rooms! πŸšͺ✨

CREATING MULTIPLE ROOMS 🏰

Modern Room System:

Let’s build a clean, flexible system for managing multiple rooms:

// Our room database - easy to expand!
const rooms = {
    1: {
        name: "Village Square",
        map: [
            [1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 2, 1],  // Door (tile type 2)
            [1, 1, 1, 1, 1, 1, 1, 1]
        ],
        music: "village_theme.ogg",
        background: "#2c3e50"
    },
    
    2: {
        name: "Mysterious Cave", 
        map: [
            [1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 1, 0, 0, 1, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 1],
            [3, 0, 0, 0, 0, 0, 0, 1],  // Different door (tile type 3)
            [1, 1, 1, 1, 1, 1, 1, 1]
        ],
        music: "cave_ambient.ogg",
        background: "#1a1a2e"
    }
};

// Door destinations - where each door type leads
const doors = {
    2: { 
        toRoom: 2, 
        playerX: 1, 
        playerY: 4,
        message: "Entering the mysterious cave..."
    },
    3: { 
        toRoom: 1, 
        playerX: 6, 
        playerY: 4,
        message: "Returning to the village..."
    }
};

// Game state manager
const gameState = {
    currentRoom: 1,
    previousRoom: null,
    transitionInProgress: false
};

Why this approach rocks:

ROOM TRANSITIONS: SMOOTH & PROFESSIONAL πŸš€

Step 1: Door Detection

// Check if player is standing on a door
function checkForDoors(hero, currentRoom) {
    const map = rooms[currentRoom].map;
    const tileType = map[hero.tileY][hero.tileX];
    
    // Is this tile a door?
    if (doors[tileType]) {
        return doors[tileType];
    }
    
    return null; // No door here
}

Step 2: Room Transition System

function transitionToRoom(doorData, hero, gameState, app) {
    // Prevent multiple rapid transitions
    if (gameState.transitionInProgress) return;
    
    gameState.transitionInProgress = true;
    
    // Optional: Show transition effect
    showTransitionEffect(doorData.message);
    
    // Update game state
    gameState.previousRoom = gameState.currentRoom;
    gameState.currentRoom = doorData.toRoom;
    
    // Move hero to new position
    hero.tileX = doorData.playerX;
    hero.tileY = doorData.playerY;
    
    // Rebuild the room
    buildRoom(gameState.currentRoom, app);
    
    // Re-enable transitions after a brief delay
    setTimeout(() => {
        gameState.transitionInProgress = false;
    }, 500);
}

function showTransitionEffect(message) {
    // Simple fade effect or message display
    console.log(`πŸš€ ${message}`);
    
    // You could add visual effects here:
    // - Screen fade
    // - Flash effect  
    // - Loading animation
    // - Sound effects
}

Step 3: Integration with Movement

function updateMovement(hero, keys, gameState, app) {
    // ... normal movement code ...
    
    // After successful movement, check for doors
    const doorData = checkForDoors(hero, gameState.currentRoom);
    if (doorData) {
        transitionToRoom(doorData, hero, gameState, app);
    }
}

ADVANCED FEATURES πŸŽ†

Enhanced Room System:

// Advanced room building with atmosphere
function buildRoom(roomId, app) {
    const room = rooms[roomId];
    
    // Clear previous room
    app.stage.removeChildren();
    
    // Change background color based on room
    app.renderer.background.color = room.background || 0x2c3e50;
    
    // Render the map
    renderMap(room.map, app);
    
    // Add atmospheric effects
    if (room.particles) {
        addParticleEffects(room.particles, app);
    }
    
    // Play room music
    if (room.music) {
        playBackgroundMusic(room.music);
    }
    
    // Add room title
    displayRoomTitle(room.name, app);
    
    console.log(`🏠 Entered: ${room.name}`);
}

// Different door types with special effects
const specialDoors = {
    LOCKED: {
        canUse: (hero) => hero.hasKey,
        message: "This door is locked. You need a key!",
        sound: "door_locked.ogg"
    },
    
    MAGIC: {
        canUse: (hero) => hero.mana >= 10,
        cost: { mana: 10 },
        message: "The magical portal shimmers as you pass through...",
        effect: "sparkle"
    },
    
    TELEPORTER: {
        canUse: () => true,
        message: "*WHOOSH* Instant teleportation!", 
        effect: "flash"
    }
};

// Smart door system
function tryUseDoor(tileType, hero) {
    const doorData = doors[tileType];
    if (!doorData) return false;
    
    // Check if door can be used
    if (doorData.special) {
        const specialType = specialDoors[doorData.special];
        if (!specialType.canUse(hero)) {
            showMessage(specialType.message);
            return false;
        }
        
        // Apply costs
        if (specialType.cost) {
            Object.assign(hero, specialType.cost);
        }
        
        // Show special effects
        if (specialType.effect) {
            playEffect(specialType.effect);
        }
    }
    
    return true; // Door can be used!
}

πŸ† WORLD BUILDER ACHIEVED!

You’ve just mastered the art of creating interconnected game worlds! This is the same system used in classic RPGs, adventure games, and modern indies. Your players can now explore rich, connected environments that feel alive and purposeful.

What you’ve built:

Ready to add some vertical action to your world? Next up: jumping mechanics that’ll make your hero soar! Next: Jumping