Post: Vida Dos - Explicación del Juego JavaScript

 

Post: Vida Dos - Explicación del Juego JavaScript

Aquí tienes una explicación detallada del código de tu juego "Vida Dos", que incluye un protagonista, enemigos y sistema de disparos:

Estructura Básica HTML

html
<!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>
    <p id="vida">Vida: 100</p>

  • El juego usa un elemento <canvas> de 500x300 pixels con borde negro

  • Muestra un contador de vida que comienza en 100

  • Al cargar la página, ejecuta la función inicializa()

Inicialización del Juego

javascript
let canvas, ctx;
let FPS = 50;
let vida = 100;

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

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

    setInterval(principal, 1000 / FPS);
}

  • Configura los FPS (cuadros por segundo) a 50

  • Inicializa la vida del jugador en 100

  • Carga una imagen para el protagonista (debería existir en la ruta 'img/mega.jpeg')

  • Obtiene el contexto 2D del canvas

  • Establece el bucle principal del juego que se ejecutará 50 veces por segundo

Clases del Juego

1. Protagonista

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

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

    // Métodos de movimiento (arriba, abajo, izquierda, derecha)
    // que incluyen límites para no salir del canvas
}

  • El protagonista se dibuja usando la imagen cargada

  • Tiene métodos para moverse en las 4 direcciones con límites de pantalla

  • Cada movimiento cambia su posición según la velocidad (3px por frame)

2. Personaje (Enemigos)

javascript
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;
            // Cambia dirección al chocar con los bordes
        }
    }
}

  • Los enemigos son rectángulos amarillos (#fff000)

  • Se mueven horizontalmente cambiando dirección al llegar a los bordes

  • Tienen un estado "vivo" que cambia al ser impactados por balas

3. Bala

javascript
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;
    }
}

  • Las balas son pequeños rectángulos rojos (10x5 px)

  • Se mueven solo horizontalmente hacia la derecha

  • Son eliminadas al salir del canvas o impactar un enemigo

Control del Juego

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

  • Crea el protagonista en posición (200,200)

  • Crea 3 enemigos en posiciones diferentes

  • Configura los controles:

    • Flechas para movimiento

    • Barra espaciadora para disparar (crea nuevas balas)

Lógica del Juego

javascript
function principal() {
    borraCanvas();

    prota.dibuja();

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

  1. Borra el canvas en cada frame

  2. Dibuja y mueve al protagonista

  3. Dibuja y mueve a los enemigos

  4. Dibuja, mueve y limpia las balas

  5. Detecta colisiones bala-enemigo y protagonista-enemigo

Sistemas de Colisión

javascript
function detectaColisiones() {
    // Detecta cuando una bala impacta un enemigo
    // Elimina ambos en caso de colisión
}

function detectaColisionesProta() {
    // Detecta cuando el protagonista choca con un enemigo
    // Reduce la vida en 1 por frame de colisión
    // Si vida llega a 0, muestra alerta y recarga el juego
}

El juego tiene dos tipos de colisiones:

  1. Balas que impactan enemigos: elimina el enemigo y la bala

  2. Protagonista que choca con enemigos: reduce la vida gradualmente

Conclusión

Este código crea un juego simple donde:

  • Controlas un personaje con las flechas

  • Disparas con la barra espaciadora

  • Debes evitar chocar con los enemigos amarillos

  • Puedes eliminarlos disparándoles

  • Tienes un sistema de vida que se reduce al contacto con enemigos

Para mejorarlo podrías añadir:

  • Puntuación por enemigos eliminados

  • Sonidos de disparo y explosión

  • Más tipos de enemigos

  • Niveles progresivos

  • Sistema de vidas en lugar de barra de vida continua

Comentarios

Publicar un comentario

Entradas más populares de este blog

codigo

  <! 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.jpeg' ; // 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;       ...
Leer más

5. 04.funciones parte1

  Post: Funciones en JavaScript - Parte 1 https://image.png Duración:  8:17 / 8:34 Introducción a las funciones en JavaScript Hola, ¿qué tal? Vamos a ver ahora el tema de las funciones en JavaScript, un concepto fundamental para desarrollar nuestros videojuegos. Variables iniciales javascript var vida = 100 ; var ataque = 10 ; var pocion = 20 ; Creando nuestra primera función La sintaxis básica de una función comienza con la palabra reservada  function , seguida del nombre de la función: javascript function muestraVida ( ) { console . log ( vida ) ; } Esta función tiene la tarea de mostrar nuestra vida actual en la consola. Para llamarla, simplemente usamos su nombre: javascript muestraVida ( ) ; Integrando funciones con HTML Podemos conectar esta función a un botón en HTML: html < button onClick = " muestraVida ( ) " > Mostrar Vida </ button > Cada vez que hagamos clic en este botón, se ejecutará la función y veremos nuestro nivel de vida (10...
Leer más