8-vida protagonista

 



<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Protagonista y Disparos con Barra de Vida</title>
</head>
<body onload="inicializa()">
    <canvas id="canvas" width="500" height="300" style="border:2px solid #000"></canvas>

<script>
let canvas, ctx;
let FPS = 50;
let vida = 100;

// Imagen del protagonista
let imgMega = new Image();
imgMega.src = 'img/mega.jpg';

// Inicialización
function inicializa() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    setInterval(principal, 1000 / FPS);
}

// Clase Protagonista
class Protagonista {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.velocidad = 3;
    }

    dibuja() {
        ctx.drawImage(imgMega, this.x, this.y, 50, 50);
    }

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

    arriba() {
        if (this.y > 0) this.y -= this.velocidad;
    }

    abajo() {
        if (this.y < canvas.height - 50) this.y += this.velocidad;
    }

    izquierda() {
        if (this.x > 0) this.x -= this.velocidad;
    }

    derecha() {
        if (this.x < canvas.width - 50) this.x += this.velocidad;
    }
}

// Clase Personaje (enemigos)
class Personaje {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vivo = true;
        this.direccion = 1; // 1 para derecha, -1 para izquierda
    }

    dibuja() {
        if (this.vivo) {
            ctx.fillStyle = "#fff000";
            ctx.fillRect(this.x, this.y, 50, 50);
        }
    }

    mueve() {
        if (this.vivo) {
            this.x += 2 * this.direccion;

            // Cambiar dirección al alcanzar el borde
            if (this.x <= 0 || this.x >= canvas.width - 50) {
                this.direccion *= -1;
            }
        }
    }
}

// Clase Bala
class Bala {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.velocidad = 5;
    }

    dibuja() {
        ctx.fillStyle = "#ff0000";
        ctx.fillRect(this.x, this.y, 10, 5);
    }

    mueve() {
        this.x += this.velocidad;
    }
}

// Instancias
let prota = new Protagonista(200, 200);
let enemigos = [
    new Personaje(50, 50),
    new Personaje(150, 120),
    new Personaje(250, 200)
];
let balas = [];

// Control del teclado
document.addEventListener('keydown', function (tecla) {
    if (tecla.keyCode == 38) prota.arriba(); // Arriba
    if (tecla.keyCode == 40) prota.abajo(); // Abajo
    if (tecla.keyCode == 37) prota.izquierda(); // Izquierda
    if (tecla.keyCode == 39) prota.derecha(); // Derecha
    if (tecla.keyCode == 32) { // Espaciadora
        balas.push(new Bala(prota.x + 50, prota.y + 20)); // Disparo
    }
});

// Borra el canvas
function borraCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Detecta colisiones entre balas y enemigos
function detectaColisiones() {
    balas.forEach((bala, balaIndex) => {
        enemigos.forEach((enemigo, enemigoIndex) => {
            if (enemigo.vivo &&
                bala.x < enemigo.x + 50 &&
                bala.x + 10 > enemigo.x &&
                bala.y < enemigo.y + 50 &&
                bala.y + 5 > enemigo.y) {
                enemigo.vivo = false; // Eliminar enemigo
                balas.splice(balaIndex, 1); // Eliminar bala
            }
        });
    });
}

// Detecta colisiones entre el protagonista y los enemigos
function detectaColisionesProta() {
    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 -= 1; // Reducir vida

            if (vida <= 0) {
                alert("¡Has perdido!");
                location.reload();
            }
        }
    });
}

// Función principal
function principal() {
    borraCanvas();

    prota.dibuja();
    prota.dibujaVida();

    enemigos.forEach(enemigo => {
        enemigo.dibuja();
        enemigo.mueve();
    });

    balas.forEach((bala, index) => {
        bala.dibuja();
        bala.mueve();

        // Eliminar balas fuera del canvas
        if (bala.x > canvas.width) {
            balas.splice(index, 1);
        }
    });

    detectaColisiones();
    detectaColisionesProta();
}
</script>
</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Leer más

5-Protagonista

Imagen
  Flujo del programa Al cargar la página, se ejecuta inicializa() . inicializa() : Configura el lienzo. Carga la imagen del protagonista. Establece un bucle con setInterval que llama a principal() 50 veces por segundo. En cada llamada a principal() : Se limpia el canvas con borraCanvas() . Se dibujan y actualizan las posiciones de los personajes ( per1 , per2 , per3 ). Se dibuja al protagonista ( prota ) en su posición actual. Resultado esperado Tres cuadrados amarillos se mueven horizontalmente dentro del canvas, rebotando entre los límites izquierdo ( x > 50 ) y derecho ( x < 400 ). Una imagen ( img/mega.jpg ) estática, que representa al protagonista, se dibuja en (200, 200) en cada frame. Por ahora, el protagonista no tiene movimiento ni interacción, pero está preparado para ser extendido con lógica adicional, como teclas para moverse. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta h...
Leer más