Desarrollo de un juego vía web para adivinar canciones

Abstract

En este Trabajo Fin de Máster se ha desarrollado una aplicación web de carácter lúdico que permite a los usuarios competir por adivinar canciones a partir de breves fragmentos de audio. La aplicación permite crear partidas personalizadas, buscar partidas existentes, unirse a ellas y jugar simultáneamente con otros jugadores. Aunque existen plataformas similares, presentan ciertos inconvenientes. Por un lado, se encuentra la complejidad de uso, que dificulta la participación de los usuarios y genera barreras innecesarias para disfrutar del juego. Por otro lado, la oferta de listas de canciones suele ser limitada y poco variada, lo que restringe la personalización y disminuye la diversidad de las partidas. En busca de superar estas limitaciones, la aplicación ofrece un entorno sencillo que facilita la participación y se integra con una plataforma de streaming musical, poniendo a disposición de los usuarios su amplio catálogo de listas de reproducción. La aplicación se ha desarrollado siguiendo una arquitectura cliente-servidor, con un backend implementado en Spring Boot y un frontend desarrollado con Angular. El backend se encarga de gestionar las partidas y el desarrollo del juego. Por su parte, el frontend se limita a presentar la información y gestionar la interacción de los usuarios. Esta separación simplifica el desarrollo y mantenimiento de la aplicación, mejora su escalabilidad y garantiza una experiencia de usuario fluida y coherente. Concretamente, el backend gestiona el ciclo de vida de las partidas, desde su creación hasta su finalización, pasando por su desarrollo, durante el cual establece las rondas y, en cada una, envía el fragmento de audio con las opciones de respuesta, valida las respuestas, calcula las puntuaciones y comunica estas y la respuesta correcta. El frontend, por su parte, se centra en ofrecer una experiencia de usuario intuitiva y atractiva. Se encarga de la navegación entre menús, la gestión de formularios, la reproducción de fragmentos de audio, la captura de respuestas y la visualización tanto de la solución como de las puntuaciones. La comunicación entre cliente y servidor se realiza principalmente mediante peticiones HTTP estándar. No obstante, durante el transcurso de una partida, se establece una conexión WebSocket por jugador, permitiendo un intercambio bidireccional: el servidor envía los datos de cada ronda, el cliente responde y, finalmente, el servidor devuelve la respuesta correcta y las puntuaciones. Durante el desarrollo del proyecto, se realizaron múltiples pruebas para garantizar el correcto funcionamiento de la aplicación. Además, se desplegó en una plataforma de hosting, asegurando su accesibilidad desde cualquier equipo con conexión a Internet. En resumen, este Trabajo Fin de Máster presenta una aplicación web completa que permite disfrutar de un juego musical, que supera las limitaciones de otras plataformas y proporciona una experiencia fluida, intuitiva y personalizable.

In this Master’s Thesis, a playful web application was developed, allowing users to compete by guessing songs from short audio clips. The application offers the possibility to create custom games, search for existing games, join them and play simultaneously with other players. Although similar platforms exist, they present certain drawbacks. On the one hand, the complexity of use makes it difficult for users to participate, creating unnecessary barriers to enjoying the game. On the other hand, the song lists offered are often limited and little varied, which restricts customization and reduce the diversity of the games. Seeking to overcome these limitations, the application offers a simple environment that facilitates participation and integrates with a music streaming platform, making its extensive catalog of playlists available to users. The application was developed following a client-server architecture, with a backend implemented in Spring Boot and a frontend developed with Angular. The backend manages the games and game flow, while the frontend focuses on presenting information and handling user interactions. This separation simplifies development and maintenance, improves scalability, and ensures a smooth and coherent user experience. Specifically, the backend manages the game lifecycle, from creation to completion, including development, during which it establishes the rounds and, for each round, sends the audio clip with the answer options, validates the answers, calculates the scores, and communicates both the scores and the solution. The frontend, in turn, focuses on offering an intuitive and engaging user experience. It handles menu navigation, form management, audio clip playback, response capture, and the display of both the correct answer and scores. Communication between client and server is primarily done through standard HTTP requests. However, during the course of a game, a WebSocket connection is established for each player, allowing bidirectional exchange: the server sends the round data, the client responds, and finally, the server returns the correct answer and scores. During the project’s development, multiple tests were conducted to verify the correct functioning of the application. Furthermore, it was also deployed on a hosting platform, ensuring its accessibility from any device with an Internet connection. In summary, this Master’s Thesis presents a complete web application that enables users to enjoy a musical game, overcoming the limitations of other platforms and providing a fluid, intuitive, and customizable experience.