COLISIONES 2: Sistema Avanzado de Detección con Barra de Vida

En esta segunda parte sobre colisiones, analizaremos las mejoras implementadas en tu juego, incluyendo la nueva barra de vida visual y optimizaciones en el sistema de colisiones.

🩹 Barra de Vida Visual

Implementación en la Clase Protagonista

javascript

dibujaVida() {
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, vida * 2, 20); // 2px por unidad de vida
    ctx.strokeStyle = "black";
    ctx.strokeRect(10, 10, 200, 20); // Marco de la barra
}

Características:

• Se actualiza en tiempo real

• Escala proporcional (200px = 100 puntos de vida)

• Marco negro para mejor visibilidad

🚀 Optimizaciones en el Sistema de Colisiones

1. Mejora en la Detección Bala-Enemigo

javascript

function detectaColisiones() {
    for (let i = balas.length - 1; i >= 0; i--) {
        for (let j = enemigos.length - 1; j >= 0; j--) {
            if (enemigos[j].vivo && 
                balas[i].x < enemigos[j].x + 50 &&
                balas[i].x + 10 > enemigos[j].x &&
                balas[i].y < enemigos[j].y + 50 &&
                balas[i].y + 5 > enemigos[j].y) {
                
                enemigos[j].vivo = false;
                balas.splice(i, 1);
                break; // Salir del bucle interno
            }
        }
    }
}

2. Sistema de Daño Mejorado

javascript

// Variables globales añadidas
let ultimoDano = 0;
const tiempoInvulnerabilidad = 1000; // 1 segundo

function detectaColisionesProta() {
    const ahora = Date.now();
    
    if (ahora - ultimoDano < tiempoInvulnerabilidad) return;
    
    enemigos.forEach(enemigo => {
        if (enemigo.vivo &&
            prota.x < enemigo.x + 50 &&
            prota.x + 50 > enemigo.x &&
            prota.y < enemigo.y + 50 &&
            prota.y + 50 > enemigo.y) {
            
            vida -= 10; // Más daño por colisión
            ultimoDano = ahora;
            
            if (vida <= 0) {
                vida = 0;
                gameOver();
            }
        }
    });
}

function gameOver() {
    alert("¡Has perdido!");
    setTimeout(() => location.reload(), 2000);
}

🛡️ Sistema de Invulnerabilidad Temporal

Efecto Visual de Daño

javascript

dibuja() {
    const ahora = Date.now();
    if (ahora - ultimoDano < tiempoInvulnerabilidad) {
        // Parpadeo cuando es invulnerable
        if (Math.floor(ahora / 100) % 2 === 0) {
            ctx.globalAlpha = 0.5; // Transparencia
        }
    }
    
    ctx.drawImage(imgMega, this.x, this.y, 50, 50);
    ctx.globalAlpha = 1.0; // Restaurar opacidad
}

📊 Debugging Avanzado

Modo Desarrollo con Hitboxes Visibles

javascript

function dibujarHitboxes() {
    if (!modoDesarrollo) return;
    
    // Hitbox del protagonista
    ctx.strokeStyle = "blue";
    ctx.strokeRect(prota.x, prota.y, 50, 50);
    
    // Hitbox de enemigos
    enemigos.forEach(enemigo => {
        if (enemigo.vivo) {
            ctx.strokeStyle = "red";
            ctx.strokeRect(enemigo.x, enemigo.y, 50, 50);
        }
    });
    
    // Hitbox de balas
    balas.forEach(bala => {
        ctx.strokeStyle = "green";
        ctx.strokeRect(bala.x, bala.y, 10, 5);
    });
}

🎯 Próximas Mejoras Sugeridas

1. Sistema de combo: Aumentar daño por enemigos eliminados consecutivamente

2. Power-ups: Recuperar vida o obtener escudos temporales

3. Colisiones por píxel perfecto: Para sprites con formas irregulares

4. Efectos de partículas: Al recibir daño o eliminar enemigos

javascript

// Ejemplo de sistema de combo
let combo = 0;
let multiplicadorDano = 1;

function actualizarCombo() {
    combo++;
    multiplicadorDano = 1 + Math.floor(combo / 5) * 0.5;
    setTimeout(() => {
        combo--;
        if (combo < 0) combo = 0;
        multiplicadorDano = 1 + Math.floor(combo / 5) * 0.5;
    }, 3000); // Combo dura 3 segundos
}

¿Qué característica te gustaría implementar en el próximo nivel de colisiones? Podemos desarrollar cualquiera de estas mejoras o trabajar en nuevas mecánicas de juego