MoverPersonaje

 

Explicación del Código con Movimiento del Protagonista

Este código implementa un personaje (protagonista) que se puede mover por el canvas usando las teclas de flecha del teclado. Vamos a analizarlo en detalle:

Estructura General

El código mantiene la misma estructura básica del anterior pero añade:

1. Control de teclado para mover al personaje

2. Límites para que no salga del canvas

3. Un sistema de velocidad constante

La Clave: borraCanvas()

javascript

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

¿Por qué es necesario?

• El canvas es como una pizarra: cuando dibujas algo, permanece allí hasta que lo borras

• Sin borrar, cada nuevo dibujo del personaje se superpondría sobre los anteriores, creando un efecto de "estela"

• clearRect() borra un área rectangular (en este caso, todo el canvas) antes de cada nuevo cuadro de animación

• Parámetros: (xInicial, yInicial, ancho, alto)

Movimiento del Protagonista

La clase Protagonista ahora incluye métodos para moverse:

javascript

class Protagonista {
    // ... constructor y dibuja() como antes ...

    arriba() {
        if (this.y > 0) this.y -= this.velocidad; // Mueve hacia arriba si no está en el borde
    }

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

    izquierda() {
        if (this.x > 0) this.x -= this.velocidad; // Mueve a la izquierda
    }

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

Características del movimiento:

1. Cada dirección tiene su propio método

2. Verifica límites para no salir del canvas (if condiciones)

3. Usa this.velocidad (definida en 3 píxeles por cuadro) para movimiento uniforme

4. Resta 50 al tamaño del canvas porque el personaje mide 50x50 píxeles

Control por Teclado

javascript

document.addEventListener('keydown', function(tecla) {
    if (tecla.keyCode == 38) prota.arriba();    // Flecha arriba
    if (tecla.keyCode == 40) prota.abajo();     // Flecha abajo
    if (tecla.keyCode == 37) prota.izquierda(); // Flecha izquierda
    if (tecla.keyCode == 39) prota.derecha();   // Flecha derecha
});

Cómo funciona:

• Escucha eventos de teclado en todo el documento

• keyCode identifica qué tecla se presionó (códigos numéricos)

• Llama al método correspondiente de la instancia prota

Ciclo de Animación

El flujo completo es:

1. inicializa() configura el canvas y empieza el bucle

2. Cada 20ms (1000ms/50FPS) se ejecuta principal()

3. principal():

   • Borra el canvas

   • Redibuja al protagonista en su nueva posición

4. Cuando se presiona una tecla, actualiza la posición

5. En el siguiente ciclo, se dibuja en la nueva posición

MoverPersonaje - Explicación del Código de Movimiento

Aquí te explico cómo funciona este código JavaScript que crea personajes que se mueven horizontalmente en un canvas:

Conceptos Clave

1. Canvas HTML5: Elemento donde dibujamos los gráficos

2. Contexto (ctx): Herramientas para dibujar en el canvas

3. FPS (Frames Per Second): Fotogramas por segundo que determinan la fluidez

Estructura del Código

1. Constructor del Personaje

javascript

var personaje = function (x, y) {
  this.x = x;
  this.y = y;
  this.derecha = true;

  this.dibuja = function () {
    ctx.fillStyle = "#fff000";
    ctx.fillRect(this.x, this.y, 50, 50);
  };
  
  this.mueve = function (velocidad) {
    // Lógica de movimiento
  };
};

2. Lógica de Movimiento

javascript

this.mueve = function (velocidad) {
  if (this.derecha == true) {
    if (this.x < 400) {
      this.x += velocidad;
    } else {
      this.derecha = false; // Cambia dirección
    }
  } else {
    if (this.x > 50) {
      this.x -= velocidad;
    } else {
      this.derecha = true; // Cambia dirección
    }
  }
};

3. Inicialización y Bucle Principal

javascript

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

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

function principal() {
  borraCanvas();
  per1.dibuja();
  per2.dibuja();
  per3.dibuja();

  per1.mueve(1);
  per2.mueve(3);
  per3.mueve(70);
}

Cómo Funciona

1. Se crean 3 personajes en diferentes posiciones verticales

2. Cada personaje tiene:

   • Posición (x,y)

   • Dirección (derecha: true/false)

   • Método para dibujarse (cuadrado amarillo)

   • Método para moverse con velocidad específica

3. El movimiento:

   • Si va a la derecha, aumenta x hasta llegar a 400

   • Si va a la izquierda, disminuye x hasta llegar a 50

   • Cuando llega a los límites, cambia de dirección

4. Cada personaje tiene diferente velocidad:

   • Personaje 1: velocidad 1 (lento)

   • Personaje 2: velocidad 3 (moderado)

   • Personaje 3: velocidad 70 (rápido)

Personalización

Puedes modificar:

• Color del personaje (#fff000)

• Tamaño del personaje (50x50)

• Límites de movimiento (50 y 400)

• Velocidades de cada personaje

• Número de personajes

¡Experimenta con estos valores para crear diferentes efectos de movimiento!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Protagonista 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;

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

        this.velocidad = 3;

    }

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

        }

    }

    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;

    }

}

// Instancia del protagonista

let prota = new Protagonista(200, 200);

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

});

// Borra el canvas

function borraCanvas() {

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

}

// Función principal

function principal() {

    borraCanvas();

    prota.dibuja();

}

</script>

</body>

</html>