Creación de Personajes en Canvas (JavaScript) - Explicación Detallada

 Creación de Personajes en Canvas (JavaScript) - Explicación Detallada

Aquí te explico parte por parte cómo funciona este código para crear personajes básicos en un canvas HTML:

🌐 Estructura HTML Básica

html
<!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" width="500" height="300" style="border:2px solid #000000"></canvas>
    <script>
        // Todo el código JavaScript aquí
    </script>
</body>
</html>

🖌️ Componentes JavaScript Explicados

1. Variables Globales

javascript
var canvas;    // Referencia al elemento canvas
var ctx;       // Contexto de dibujo 2D
var FPS = 50;  // Fotogramas por segundo (aunque hay un error en la implementación)

2. Constructor del Personaje

javascript
var personaje = function(x, y) {
    this.x = x; // Posición horizontal
    this.y = y; // Posición vertical
    
    // Método para dibujar el personaje
    this.dibuja = function() {
        ctx.fillStyle = "#fff000"; // Color amarillo
        ctx.fillRect(this.x, this.y, 50, 50); // Dibuja un rectángulo
    };
};

3. Inicialización

javascript
function inicializa() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d"); // Obtenemos el contexto 2D
    
    // Intervalo de animación (con error en la implementación)
    setInterval(function() {
        principal();
    }, 1000) / FPS; // Esto no funciona como esperado
}

4. Creación de Personajes

javascript
var per1 = new personaje(10, 50);
var per2 = new personaje(10, 120);
var per3 = new personaje(10, 230);

5. Limpieza del Canvas

javascript
function borraCanvas() {
    // Reinicia las dimensiones del canvas (forma rápida de limpiar)
    canvas.width = 500;
    canvas.height = 400;
}

6. Función Principal de Animación

javascript
function principal() {
    borraCanvas(); // Limpia el canvas en cada frame
    
    // Dibuja los tres personajes
    per1.dibuja();
    per2.dibuja();
    per3.dibuja();
    
    console.log("funcion"); // Debug (puede eliminarse)
}

🔍 Problemas y Observaciones

  1. FPS incorrecto: La implementación actual de los FPS no funciona correctamente. 1000/FPS debería estar dentro del setInterval.

  2. Tamaño del canvas: En borraCanvas() se cambia la altura a 400, pero el canvas se definió inicialmente con altura 300.

  3. Colisión de variables: Sería mejor usar let/const en lugar de var para evitar posibles problemas de scope.

  4. Estructura del personaje: Podría mejorarse usando clases ES6 para mayor claridad.

¿Te gustaría que implemente alguna funcionalidad adicional o corrija alguno de estos problemas? Estoy listo para ayudarte a mejorar este código.

Comentarios

Publicar un comentario