Prota-Movimiento

Prota-Movimiento - Explicación del Código

En este post vamos a analizar cómo funciona el movimiento del protagonista en este sencillo juego HTML5 usando Canvas y JavaScript.

Estructura Básica

El código crea un canvas de 500x300 pixels donde ocurre toda la acción. Tenemos dos tipos principales de objetos:

1. El protagonista controlado por el usuario

2. Tres personajes NPC que se mueven automáticamente

El Protagonista

La parte más interesante es el objeto 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);
  }

  this.arriba = function(){
    this.y -= this.velocidad;
  }

  this.abajo = function(){
    this.y += this.velocidad;
  }

  this.izquierda = function(){
    this.x -= this.velocidad;
  }

  this.derecha = function(){
    this.x += this.velocidad;
  }
}

Movimiento con Teclado

El movimiento se controla mediante eventos del teclado:

javascript

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

Cómo funciona:

1. Event Listener: Detecta cuando se presiona una tecla

2. Key Codes:

   • 38: Flecha arriba

   • 40: Flecha abajo

   • 37: Flecha izquierda

   • 39: Flecha derecha

3. Acciones: Llama a los métodos correspondientes del protagonista

Métodos de Movimiento:

• arriba(): Reduce la coordenada Y (mueve hacia arriba)

• abajo(): Aumenta la coordenada Y (mueve hacia abajo)

• izquierda(): Reduce la coordenada X (mueve a la izquierda)

• derecha(): Aumenta la coordenada X (mueve a la derecha)

La velocidad de movimiento está definida por this.velocidad = 3, lo que significa que cada movimiento cambia la posición en 3 pixels.

Actualización del Canvas

El juego se redibuja 50 veces por segundo (FPS = 50) gracias al setInterval en la función inicializa(). En cada ciclo:

1. Se borra el canvas

2. Se dibujan los NPCs

3. Se actualizan sus posiciones

4. Se dibuja el protagonista en su nueva posición

Este es un sistema básico pero efectivo para manejar el movimiento de personajes en un juego simple con JavaScript y Canvas.