El objetivo para este tutorial y el tercero sera obtener algo asi (dar click sobre el juego para desplazar la nave con las flechas, en caso que el navegador haga scroll la presionar flecha arriba o flecha abajo, entonces mover la nave con W,S,D,X):
Tendremos una nave que se podra mover por todo el escenario, el fondo se desplazara automaticamente y la nave podra hacer un disparo (se dispara con z). Lo interesante es que con este tutorial se practicara, colisiones, el loop del juego y deteccion del teclado.
Todo el codigo se agregara en un etiqueta <script> que estara dentro del head, el codigo sera asi: primero necesitamos las variables para el manejo de la nave y de la bala (ambos son sprites).
Tendremos una variable para la imagen de la nave, otra para la posicion en X de la nave, la posicion en Y y tamaño de la nave; lo mismo aplicara para la bala, la unica diferencia es que habra otra variable que nos permitira saber, si la bala ya ha sido disparada (solo se dispara una bala por vez).
Luego tendremos, una variable para manejara el loop del juego, el fondo tambien tendra un timer propio (porque el fondo se desplazara) y luego las variables canvas y ctx que permiten hacer operaciones sobre canvas.
Ahora hay que desarrollar todos los metodos, los cuales seran 5: crearEscenario(), moverNave(), moverFondo(), disparar(), loop() y otra seccion de codigo que manejara el teclado.
Primero el metodo crearEscenario()
Este metodo basicamente lo que realiza es cargar la imagen de la nave y la imagen de la bala. Cuando se termina la carga de la nave, se dibuja la nave en su posicion inicial, se activa el loop del juego y el metodo que mueve el fondo, ambos son timer que se les asigna una funcion y un determinado tiempo para que vuelvan a ser llamados.
El loop del juego sera una funcion que se llamara cada 50 milisegundos (equivalente a 20 FPS), esta funcion tendra por nombre loop(), para el caso del fondo sera una funcion que se llamara cada 100 milisegundos.
Ahora moverNave()
El metodo moverNave() sencillamente lo que permite, es desplazar la nave por todo el escenario, validando siempre las colisiones. El desplazamiento se realiza sumando 10 pixeles a las posicion actual de la nave, sea en X o Y. Tambien hay que decir que el metodo recibe una variable llamada direccion, la cual permite saber hacia donde sera el desplazamiento.
Si direccion es izq (izquierda), hay que validar que la nave no se salga del escenario, validar esta colision es muy sencillo, simplemente si la nave en su posicion X esta en 0, ya no la desplazamos más. La seccion de codigo & naveX != 0, garantiza que la nave solo se movera hacia la izquierda cuando no este en su limite.
Luego cuando la nave se desplaza hacia la derecha, tambien hay que validar que no se salga del escenario, esta es un poco mas dificil. Lo primero que necesitamos saber, es que si al ancho de canvas le restamos el ancho de la nave, obtendremos el punto mas lejano hacia la derecha, en el cual puede estar la nave sin salirse del escenario, por eso esa colision se valida: & nave != (canvas.width - naveW).
Con el codigo anterior pudimos observar como se pueden validar colisiones de un sprite de manera sencilla, espero no sea muy confuso, de todos modos cualquier duda la pueden preguntar en los comentarios.
Metodo Disparar()
Lo primero que tenemos que hacer es validar que la bala no este en el escenario (solo se manejara una bala cuando se haga un disparo), luego lo que se hace es obtener la posicion inicial, la bala saldra de la mitad de la nave, por eso se utiliza naveX y naveY para obtener esa posicion.
Luego se dibuja la bala en la posicion que se acabo de obtener y se pone existeBala en true, y ¿como se mueve la bala?, la bala se mueve por medio del metodo loop, pero eso se vera en el proximo tutorial.
Muchas gracias espero haya sido de utilidad. El tutorial 3 lo desarrollare lo mas pronto posible.