Protagonista

Explicación del Código HTML con Canvas y Clase Protagonista

Este código crea una página web simple con un elemento canvas que muestra un personaje (protagonista) que puede ser una imagen o un rectángulo azul como fallback.

Funcionamiento del Canvas

El <canvas> es un elemento HTML que permite dibujar gráficos mediante JavaScript:

1. Declaración del canvas:

   html

   <canvas id="canvas" width="500" height="300" style="border:2px solid #000"></canvas>

   • Tiene un tamaño de 500x300 píxeles

   • Un borde negro de 2px para visualizarlo mejor

2. Inicialización (en la función inicializa()):

   • Se obtiene la referencia al elemento canvas con getElementById

   • Se obtiene el contexto de dibujo 2D con getContext('2d')

   • Se establece un intervalo para redibujar a 50 FPS (cuadros por segundo)

3. Borrado del canvas:

   javascript

   ctx.clearRect(0, 0, canvas.width, canvas.height);

   Esto limpia todo el área del canvas antes de cada nuevo dibujo.

Clase Protagonista

La clase Protagonista representa al personaje principal:

javascript

class Protagonista {
    constructor(x, y) {
        this.x = x; // Posición horizontal inicial
        this.y = y; // Posición vertical inicial
    }

    dibuja() {
        // Intenta dibujar la imagen, si no está cargada usa un rectángulo azul
        if (!imgMega.complete || !imgMega.naturalWidth) {
            ctx.fillStyle = "blue";
            ctx.fillRect(this.x, this.y, 50, 50);
        } else {
            ctx.drawImage(imgMega, this.x, this.y, 50, 50);
        }
    }
}

Características:

1. Constructor: Recibe las coordenadas iniciales (x, y) donde se dibujará el personaje

2. Método dibuja():

   • Verifica si la imagen está cargada (imgMega.complete)

   • Si la imagen no está lista, dibuja un rectángulo azul de 50x50 píxeles como placeholder

   • Si la imagen está cargada, la dibuja en las coordenadas del protagonista con tamaño 50x50

Flujo del Programa

1. Cuando la página carga (onload="inicializa()"):

   • Configura el canvas

   • Crea una instancia del protagonista en (200, 200)

   • Inicia el bucle de animación (50 veces por segundo)

2. En cada iteración del bucle (principal()):

   • Borra el canvas

   • Vuelve a dibujar al protagonista en su posición actual

Protagonista: Creando un Personaje Principal en JavaScript

En el desarrollo de juegos o animaciones web, el protagonista es el elemento central con el que el usuario interactúa. En este post, analizaremos cómo crear un protagonista utilizando JavaScript y el elemento <canvas> de HTML.

Estructura Básica del Protagonista

El código proporcionado define un objeto protagonista con propiedades básicas como posición (x, y) y velocidad. Además, utiliza una imagen (en este caso, mega.jpeg) para representar al personaje.

Definición del Protagonista

javascript

var protagonista = function (x, y) {
  this.x = x;
  this.y = y;
  this.velocidad = 3;

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

• x e y: Coordenadas donde se dibujará el personaje.

• velocidad: Define qué tan rápido se moverá el protagonista (no se usa en este ejemplo, pero podría aplicarse en movimiento).

• dibuja(): Método que renderiza la imagen del protagonista en el canvas.

Inicialización del Canvas y la Imagen

javascript

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

    imgMega = new Image();
    imgMega.src = 'img/mega.jpeg';

    setInterval(function () {
      principal();
    }, 1000 / FPS);
}

• Se obtiene el contexto del canvas (ctx) para dibujar.

• Se carga la imagen del protagonista (imgMega).

• Se establece un bucle de animación con setInterval.

Dibujando el Protagonista

En la función principal(), se limpia el canvas y se dibuja al protagonista junto con otros elementos:

javascript

function principal() {
  borraCanvas();
  // ... otros elementos ...
  prota.dibuja(); // Dibuja al protagonista
}

Posibles Mejoras

1. Movimiento del Protagonista:
   Se podría añadir un método mueve() similar al de los otros personajes para permitir interacción con teclado o ratón.

2. Colisiones:
   Implementar detección de colisiones con otros objetos del juego.

3. Animaciones:
   Cambiar la imagen según la dirección o acción del personaje.

Conclusión

Este ejemplo muestra cómo crear un protagonista básico en un entorno canvas usando JavaScript. Con algunas extensiones, este personaje podría convertirse en el centro de un juego interactivo.

🚀 ¿Qué más te gustaría que hiciera este protagonista? ¡Déjalo en los comentarios!

html

<!-- Código completo en el post -->

📌 ¿Interesado en aprender más sobre desarrollo de juegos en JavaScript? ¡Sigue nuestro blog para más tutoriales!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Protagonista Simple</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.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;

        this.y = y;

    }

    dibuja() {

        // Dibuja un rectángulo temporal si la imagen no está cargada

        if (!imgMega.complete || !imgMega.naturalWidth) {

            ctx.fillStyle = "blue";

            ctx.fillRect(this.x, this.y, 50, 50);

        } else {

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

        }

    }

}

// Instancia del protagonista

let prota = new Protagonista(200, 200);

// Borra el canvas

function borraCanvas() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}

// Función principal

function principal() {

    borraCanvas();

    prota.dibuja();

}

</script>

</body>

</html>