En la entrega pasada se analizaron las variables globales y los metodos: crearEscenario(), moverNave() y Disparar(). Para hoy se analizaran moverFondo(), loop() y el metodo que detecta el teclado. Ademas subire el codigo para todos los que quieran verlo completo.
Primero el metodo que detecta el teclado
Este codigo es muy sencillo, nos valemos del metodo onkeydown propio de javascript, al cual le entra una variable (e) que es la tecla presionada. Entonces lo que se hace, es validar el valor de esa tecla y en base a ello, se realiza la accion correcta. La tecla se puede validar utilizando e.which, este valor corresponde al ascii, por lo tanto si queremos hacer algo al presionar la tecla 'a' se puede utilizar if(e.which == 65).
Para aclarar un poco mas el codigo, en el primer if se valida si la tecla presionada es la tecla izquierda, en caso que sea asi, se llama el metodo moverNave() y se le pasa como parametro "izq", que indicaria que hay que desplazar la nave hacia la izquierda.
Ademas observar que en el ultimo if, si la tecla es 90, se llama el metodo Disparar(), esto es porque 90 corresponde al valor ascii de la tecla z, que es con la cual se dispara.
Observar tambien que en cada if se validan dos teclas, esto es porque tuve que añadir la opcion de mover la nave con las teclas W,S,D,X ya que el juego al estar insertado en el blog, si un usuario presionaba flecha abajo, se movia la nave en esa direccion pero a la vez se movia tambien el propio blog hacia abajo.
Ahora el ciclo principal
Este metodo es el que se ejecutara cada 50 milisegundos, aqui tendremos que hacer las validaciones más importantes del juego, como en este caso no hay enemigos, y solo se dispara una bala al tiempo, lo unico que necesitamos validar es si la bala esta en el escenario, en caso de ser asi hay que moverla una posicion mas hacia la derecha.
La seccion de codigo if(balaX >= canvas.width) valida si la bala supero la parte derecha de canvas, para en ese caso borrarla del escenario y poner existeBala como false.
Ahora el metodo moverFondo()
¿Que hace este metodo?, para explicar esta parte, primero hay que aclarar que el fondo no esta dibujado dentro de <canvas>, sino que fue puesto en el <div> que contiene a <canvas>, utilizando la propiedad background. ¿Por que?, por la sencilla razon que es mucho mas practico; se puede desplazar el fondo segun se requiera y en ningun momento es necesario utilizar clearRect(), lo cual haria el codigo mucho mas complejo.
¿Que hace exactamente esa porcion de codigo?, primero disminuye el valor de fondoX en uno, que esa variable es la que maneja la posicion en X del fondo y luego al <div> con el id 'fondo', se le asigna en el background una imagen y se le posiciona. Hay que recordar algo, desde el concepto de CSS, si se pone un background en un div, es posible posicionar ese fondo asignando su valor en X y en Y.
El CSS para poner un bacgkround tiene esta forma:background: url('Ruta Imagen') posX posYY debido a que el metodo moverFondo() se llama cada 100 milisegundos, por eso es posible generar un efecto de desplazamiento, tambien quiero recordar que la imagen utilizada es bastante ancha 1090px y que el metodo css(), que utilice para poner esa imagen es propio de jquery.
Espero haya sido de utilidad, por el momento el juego es muy muy simple, pero le ire añadiendo más aspectos a medida que vayan pasando los tutoriales. Y dejo el codigo completoCodigo del Juego