7-Protagonista-disparos

 <!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</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;

// 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);
    }

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

    abajo() {
        this.y += this.velocidad;
    }

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

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

// Clase Personaje (enemigos)
class Personaje {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vivo = true;
    }

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

// 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(100, 50), new Personaje(200, 120), new Personaje(300, 230)];
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 personajes
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
            }
        });
    });
}

// Función principal
function principal() {
    borraCanvas();
   
    prota.dibuja();

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

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

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

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

Comentarios

Publicar un comentario

Entradas populares de este blog

1-Teclas

Imagen
En este codigo implementamos tres funciones para capturar los eventos del teclado. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Ejemplo de Keypress.js </title> </head> <body>     <script src = "https://cdn.jsdelivr.net/npm/keypress.js@2.1.5/keypress.js" ></script>     <script>         // Configuración del teclado         var configTeclado = { prevent_repeat : true };         var eventoTeclado = new window . keypress . Listener ( this , configTeclado );         // Funciones asociadas a las combinaciones         function pulsaA () {             console . log ( 'has pulsado a' );         } ...
Leer más

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

3-1-Personajes

Imagen
 El código está diseñado para dibujar personajes en un lienzo ( canvas ), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame. Solución: Hacer que los personajes se muevan Para que los personajes se muevan, debes modificar sus coordenadas ( x o y ) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje . <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>             </head> <body onload = " inicializa ()" >     <canvas id = "canvas...
Leer más