Canvas 2: Movimiento de Objetos en JavaScript

 Canvas 2: Movimiento de Objetos en JavaScript

¡Hola que tal! 👋

En esta clase, vamos a darle funcionalidad de movimiento a los objetos que creamos anteriormente en el canvas.

🔹 Miniatura de la clase:
⏱️ 0:06 / 11:12

📌 ¿Qué haremos?

Aprenderemos a mover los objetos que ya habíamos creado, los cuales tenían un estilo y posición definidos (50x50 en X e Y).

📌 Pasos clave:

1. Método dibuja: Ya lo teníamos implementado para renderizar los objetos en pantalla.

2. Nuevo método mueve: Lo crearemos para permitir el movimiento de los objetos.

3. Control de dirección: Usaremos una variable booleana (derecha) para manejar el movimiento (izquierda ↔ derecha).

4. Velocidad personalizada: Pasaremos un parámetro velocidad para que cada objeto se mueva a distinta velocidad.

📝 Código clave:

javascript

// Método mueve con parámetro 'velocidad'
mueve(velocidad) {
  if (this.derecha === true) {
    if (this.x < 400) {
      this.x += velocidad; // Mueve a la derecha
    } else {
      this.derecha = false; // Cambia dirección
    }
  } else {
    if (this.x > 50) {
      this.x -= velocidad; // Mueve a la izquierda
    } else {
      this.derecha = true; // Cambia dirección
    }
  }
}

🎥 Resultado:

Al ejecutarlo, los objetos se moverán de un lado a otro en el canvas, cada uno con su velocidad asignada (ej: 1, 3, 7).

✅ ¡Así logramos un movimiento continuo y controlado!

🔗 ¿Quieres ver el código completo? ¡Déjalo en los comentarios! 👇

#JavaScript #Canvas #Programación #DesarrolloWeb #Juegos