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

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

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: Control de teclado para mover al personaje Límites para que no salga del canvas 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 Protagoni...
Leer más