jairogarcíarincón

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.

---

Publicado el 03 de Diciembre de 2024

javascripthtml5space starscanvas