Home | Clases | Videojuego sencillo con HTML5 | El movimiento de la nave

El movimiento de la nave


El "escuchador" de teclado

Para proveer a nuestra nave de movimiento, debemos implementar una funcionalidad de JavaScript (y de muchos otros lenguajes) que es la de "escuchar" eventos, lo que en inglés se traduce como listener.

En concreto, necesitamos implementar un listener del teclado, de modo que cuando pulsemos alguna tecla se ejecute una función. Esto se hace añadiendo al final de la función spaceStars() la siguiente instrucción:


//Añado el escuchador del teclado
window.addEventListener('keydown', moverNave, true);


Al presionar una tecla (keydown) se le pasará dicha tecla (evento) a la función moverNave, que decidirá qué hacer en cada caso.

La función moverNave()

Por tanto, lo que nos faltaría sería implementar la función moverNave() que habíamos inicializado anteriormente, pero pasándole el evento como parámetro. Para ello, debemos seguir varios pasos:

  • Inicializar las variables nave, fondo, naveX y naveY para los propósitos anteriores
  • Capturar el fondo al que vamos a mover la nave, de modo que podamos recuperarlo y pintarlo cuando la volvamos a mover (con sus posibles estrellas debajo). Además, evitaremos que quede un rastro de la nave a medida que nos movamos.
  • Capturar la imagen de la nave para irla moviendo a través de la pantalla
  • Mover la nave en X o en Y, según la tecla seleccionada


Paso 1: Inicialización de variables. Modifica la declaración de variables (al inicio del archivo script.js para que incluya las siguientes:


//Declaración de variables
var canvas, ctx;
var naveX = 0; //Posición original en x de la nave
var naveY = 0; //Posición original en y de la nave
var nave = new Image(); //Imagen para capturar la nave
var fondoNave = new Image(); //Imagen para capturar el fondo


Paso 2: Capturo el fondo donde voy a mover la nave. Modifica la función pintarFondo() para que incluya al final la siguiente línea que captura el fondo inicial antes de pintar la nave encima. Esta variable y la misma metodología la utilizaremos después en el método moverNave() para capturar el fondo antes de cada movimiento:


//Guardo el fondo de detrás de la nave como imagen
fondoNave = ctx.getImageData(0, 0, 30, 30);


Paso 3: Capturo la imagen de la nave. Modifica la función pintarNave() para que incluya al final la siguiente línea que captura la nave. Esta variable y la misma metodología la utilizaremos después en el método moverNave() para pintar la nave después de cada movimiento:


//Guardo la nave como imagen
nave = ctx.getImageData(0, 0, 30, 30);


Paso 4: Mover la nave en x o en y. El método moverNave() será llamado cuando pulsemos una tecla. Si la tecla es una de las que deben hacer que se mueva la nave, calcularemos la nueva posición (los pasos serán de 30 en 30 pixeles), capturaremos el fondo en la posición en la cual vamos a mover la nave (para poder recuperarlo después) y moveremos la nave a dicha posición:


//Muevo la nave
function moverNave(evento){

//Detecto la tecla que estoy pulsando
switch(evento.keyCode){

//Izquierda: 37 o 65 (flecha izquierda o letra A)
case 37:
case 65:
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la x
naveX = naveX - 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
break;
//Derecha: 39 o 68 (flecha derecha o letra D)
case 39:
case 68:
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la x
naveX = naveX + 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
break;
//Arriba: 38 o 87 (flecha arriba o letra W)
case 38:
case 87:
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la y
naveY = naveY - 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
break;
//Abajo: 40 o 83 (fle3cha abajo o letra S)
case 40:
case 83:
//Borro la nave (pintando fondoNave encima)
ctx.putImageData(fondoNave, naveX, naveY);
//Actualizo la y
naveY = naveY + 30;
//Capturo el fondo que voy a tapar
fondoNave = ctx.getImageData(naveX, naveY, 30, 30);
//Muevo la nave
ctx.putImageData(nave, naveX, naveY);
break;
}

}


Llegado este punto, la nave se debería mover en las 4 direcciones, si bien faltaría por detectar las diferentes colisiones, bien con los bordes del juego o bien con los asteroides o la base. Esto lo veremos en la siguiente clase.
Fecha de publicación: 12/01/2018
Asignaturas: realización de proyectos multimedia interactivosaplicaciones webmontaje y mantenimiento de equipos
Temas: javascript html5 space stars canvas
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos