Haciendo juegos con Html5

Usando el teclado con Phaser.

Ya vimos algo básico sobre eventos del mouse ahora vamos a explorar un poco con nuestro teclado, usaremos las teclas mas comunes me refiero a las direccionales y otras complementarias usadas muy seguido en juegos de plataformas, disparos me refiero a nuestra barra esparceadora.



Creamos una nueva instancia de nuestra clase Phaser.Game:

var game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo', { preload: preload,create:create, update:update });  

Declaramos nuestras variables :

var _alien,teclas,saltar;

Cargamos nuestra imagen:

function preload() {
    game.load.image('X', 'alienx.png');
} 

En nuestra función create tenemos los siguiente:

function create() { 
    game.stage.backgroundColor = 0x114755;
    _alien = game.add.sprite(100,150,"X");
    teclas = game.input.keyboard.createCursorKeys();
saltar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
}

Colocamos un poco de color al canvas, agregamos nuestro sprite, ahora mediante game.input accedemos a la clase Phaser.Input que a su vez tiene una propiedad llamada keyboard que apunta a la clase Phaser.KeyBoard la cual tiene un método llamado createCursorKeys() que retorna cuatro objetos que son las cuatro teclas(up,down,left,right) de esta manera tenemos preparado nuestras direccionales y también podemos agregar de manera individual cada tecla en este caso la barra esparceadora mediante el método addKey(tecla) el numero de esta tecla es el 32 y en phaser esta definida por Phaser.Keyboard.SPACEBAR. 

Creamos la función update”actualizar” :

function update (){

 if(teclas.right.isDown){

_alien.x +=5;

}else if (teclas.left.isDown){

 _alien.x-=5;
}

 if(teclas.up.isDown){

   _alien.y -=5;

}else if (teclas.down.isDown){

_alien.y +=5;
}

if(saltar.isDown){

_alien.y -=20;
};

 };

Ahora en nuestra variable teclas tenemos cuatro objetos almacenados apuntando a nuestras teclas solo necesitamos acceder al evento, aquí tenemos cuatro posibilidades si (derecha,izquierda,arriba,abajo) es presionada isDown aumentamos en 5(pixeles) la posición de los respectivos ejes de nuestro sprite. Por último se encuentra nuestra barra esparceadora como la agregamos directamente solo necesitamos comprobrar si es presionada, si esto sucede nuestro sprite se moverá rápidamente hacia arriba. Como puedes ver esto es muy sencillo de hacer y es el mismo concepto para cualquier tecla o evento que deseamos comprobar. Hasta la próxima.