Clásico juego de serpientes con Jetpack Compose. | de Mukesh Solanki | mayo 2022

En esta publicación, vamos a crear un pequeño clon del clásico juego Snake usando Jetpack Compose. Nos centraremos en construir el bucle del juego, administrar el estado del juego y dibujar las formas básicas en la pantalla. No administraremos los menús, puntajes altos, etc. Sin embargo, estos se implementan en mi repositorio de GitHub adjunto en la parte inferior de la publicación. La serpiente clásica solo podía moverse en 4 direcciones, por lo que crearemos una clase de objeto que tendrá también presentes las diferentes direcciones en las que la serpiente podría moverse. Comencemos por crear la clase de datos principal que contendrá el estado del juego.

• Comida: contiene las coordenadas x e y de la comida.
• Serpiente: contiene una lista de las coordenadas x e y de todas las partes del cuerpo de la serpiente.
• currentDirection: mantiene la dirección en la que se mueve la serpiente.

A continuación, creemos nuestro motor de juego. Comencemos creando una clase llamada GameEngine y declarando un estado mutable que contenga el objeto State que creamos en el paso anterior, ya que esta es la única fuente de verdad. Que luego se administraría utilizando la API de flujo. A continuación, definimos otra variable para mantener la dirección del movimiento de la serpiente y necesitaríamos un CoroutineScope para hacer que este movimiento sea infinito. Ahora que nuestro motor está construido, comencemos a jugar el juego de inmediato. Usemos el método init para asegurarnos de que el juego comience y juegue inmediatamente para que podamos jugar el juego sin fin. Necesitaríamos CoroutineScope para evitar obstruir el hilo principal. También crearemos dos funciones Lambda que actuarían como oyentes, informando si el juego terminó o si se comió la comida. Es en nuestro ámbito donde sucede la verdadera magia. Mantendremos el tamaño de la serpiente, generaremos nuevas ubicaciones para la comida y comprobaremos si hay colisiones con los bordes o con ella misma. El código se vería así. La variable SnakeLength es responsable de mantener la longitud de la serpiente. Ejecutamos un bucle while con retraso porque queremos que el código del bucle se repita después de un pequeño retraso, en este caso 150. Ahora que nuestra fuente de verdad es el estado mutable. Solo necesitamos actualizar los valores de estado y estamos listos para comenzar. Hacemos esto llamando mutableState.update{} Calculamos el valor del nuevo lugar de alimentación y verificamos si el juego ha terminado o no. Primero comprobamos si la serpiente ha llegado al final de la pantalla. Hacemos esto al obtener la ubicación de la cabeza de serpiente a través de una llamada telefónica. es.serpiente.primero() y luego verifique si la dirección aún se deja. Hacemos lo mismo por los cuatro lados. Si alguna de las 4 condiciones es verdadera, lo llamamos enJuegoTerminado función y restablecer el tamaño de la serpiente. A continuación, comprobamos la dirección en la que va la serpiente. Esto lo hacemos con el siguiente código. luego los calculamos nueva posición la serpiente. Podemos hacer esto simplemente calculando la posición de la cabeza y agregándole el tamaño del bloque. Entonces tenemos que comprobar si el si el nueva posición contiene la serpiente o la comida. Si contiene la comida, debemos llamar enComidaComida y agrandar la serpiente. Si el nueva posición contiene la serpiente entonces llamamos enJuegoTerminado y restablecer el tamaño de la serpiente. Por último, actualicemos el estado del juego llamando a lo siguiente y actualizando los nuevos valores para que nuestro motor tenga valores actuales con los que trabajar. A continuación, crearemos un nuevo método para reiniciar el motor del juego si sucede algo o cuando necesitamos reiniciar el juego. Podemos hacer esto también. Ahora que nuestro motor de juego está listo. Vamos a crear la interfaz de usuario para que funcione nuestro motor de juego. Vamos a crear un nuevo componible que simplemente contenga las cuatro teclas direccionales y se active y dispare en función de la tecla presionada. AppIconButton es solo un complemento simple que creé para evitar el código repetitivo, lo que mejora la estética del juego. Ahora vamos a crear el tablero que dibuja los bordes, la comida y la serpiente. El tablero usa el estado del juego como parámetro para dibujar el estado actual del juego. Primero dibujemos los bordes. Ahora dibujemos la comida para la serpiente. Por último, dibujemos el cuerpo de la serpiente. Pasaremos por la serpiente y dibujaremos cada bloque. Ahora tenemos la placa, el controlador y el motor del juego. Vamos a consolidarlos todos en una sola actividad para que funcionen de manera eficiente. Comencemos declarando algunas variables en la actividad. Ahora en el enCrear Representaremos la interfaz de usuario del juego, asignaremos el motor del juego a la placa y lo actualizaremos. motor de juegos cuando alguien hace clic en el teclado direccional. Y ahí tienes un juego Snake clásico completamente funcional con Jetpack Compose. Puedes ver el juego completo con el menú y la puntuación más alta en el repositorio a continuación.