Sección 01 · Ruddy

Fundamentos de Objetos

Un objeto es una colección de pares clave-valor. Piénsalo como una ficha de personaje en un juego de rol.

¿Por qué objetos y no arrays?

❌ Con Array (confuso)
// ¿Qué significa cada posición?
const héroe = ["Kael", 100, 15, "Mago"];
console.log(héroe[2]); // ¿Qué es 15?
✅ Con Objeto (claro)
const héroe = {
  nombre: "Kael",
  vida:   100,
  ataque: 15,
  clase:  "Mago"
};
console.log(héroe.ataque); // 15 ← ¡obvio!

🛠 Demo 1 — Crea tu personaje global

Completa los campos y pulsa Crear Personaje. Este objeto viajará por toda la aplicación.

🛠 Demo 2 — Acceder a propiedades

Dot Notation .propiedad
personaje.nombre  → "Kael"
personaje.vida    → 100
Bracket Notation ["propiedad"]
personaje["nombre"] → "Kael"
// Útil con variables dinámicas

🛠 Demo 3 — Métodos y this

Un método es una función dentro de un objeto. this se refiere al objeto en sí mismo. 

// Método dentro del objeto:
personaje.presentarse = function() {
  return `Soy ${this.nombre}, un ${this.clase} con ${this.vida} de vida`;
  //             ↑ this = personaje
}

🛠 Demo 4 — Destructuring

Extraer propiedades en variables separadas de forma elegante. 

// Sin destructuring (verboso):
const nombre = personaje.nombre;
const vida   = personaje.vida;

// ✅ Con destructuring (limpio):
const { nombre, vida, clase } = personaje;
Sección 02 · Ana

Manipulación Avanzada

Trabajamos directamente sobre personaje — el objeto creado por Ruddy. Lo copiamos, exploramos y mejoramos.

📦 Estado actual del objeto personaje

Crea primero el personaje en la Sección 01 →

🛠 Demo 5 — Spread Operator { ...obj }

Crea una copia independiente del objeto y añade o sobreescribe propiedades sin tocar el original. 

// Copia con modificación (sin mutar el original):
const personajeMejorado = {
  ...personaje,       // copia todas las propiedades
  nivel: 2,           // nueva propiedad
  ataque: personaje.ataque + 5  // sobreescribe ataque
};

🛠 Demo 6 — Object.keys · values · entries

Métodos estáticos para iterar sobre un objeto como si fuera un array.

Object.keys()
Devuelve un array de las claves
Object.values()
Devuelve un array de los valores
Object.entries()
Devuelve un array de pares [clave, valor]

📘 TypeScript — Interfaces y Type Aliases

En TypeScript podemos definir la forma que debe tener un objeto. Aquí simulamos su validación.

Interface
interface Personaje {
  nombre:  string;
  clase:   string;
  vida:    number;
  ataque:  number;
  activo:  boolean;
}

// TypeScript ERROR si falta una propiedad
// o si el tipo no coincide
Type Alias
type Personaje = {
  nombre:  string;
  clase:   string;
  vida:    number;
  ataque:  number;
  activo:  boolean;
};

// Más flexible — puede usarse
// con uniones: string | number

🔬 Simulador de validación TypeScript

Introduce una propiedad y un valor para ver si superaría la validación de tipo.

Sección 03 · Dani

Batalla de Objetos

El mismo personaje ahora combate contra un enemigo. Dos objetos interactuando en tiempo real.

HÉROE
⚔
— Sin personaje —
VIDA —
ATK —
LVL —
VS
¡Prepárate para la batalla!
ENEMIGO
💀
Zarak el Oscuro
Nigromante · Lv.3
VIDA 120
ATK 12
LVL 3

📜 Registro de Batalla

⚡ ¡La arena está lista! Crea un personaje en la Sección 01 para comenzar.

💻 Los objetos detrás de la magia

// personaje (creado por Ruddy)
// Crea primero el personaje →
// enemigo (objeto de Dani)
let enemigo = {
  nombre: "Zarak el Oscuro",
  clase: "Nigromante",
  vida: 120,
  vidaMax: 120,
  ataque: 12,
  nivel: 3,
  activo: true
};
// La función que conecta ambos objetos:
function atacarEnemigo() {
  // 1. Calcular daño del personaje al enemigo
  const daño = personaje.ataque;
  enemigo.vida -= daño;                   // mutamos el objeto enemigo

  // 2. El enemigo contraataca
  const contraataque = enemigo.ataque;
  personaje.vida -= contraataque;         // mutamos el objeto personaje

  // 3. Actualizar la interfaz
  actualizarBarrasDeVida();
  agregarLog(`${personaje.nombre} hace ${daño} de daño`);
}