- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Pistas, tips y lecturas complementarias
- 6. Hacker edition
Los videojuegos son una verdadera prueba cuando se trata de tecnología. Uno de los factores de éxito para el equipo de android, por ejemplo, fue que pudiesen tener un juego corriendo en los primeros teléfonos. La idea era que si un juego podía ejecutarse en la plataforma, un programa más simple con pantallas mucho más fáciles de trabajar que solo tuviese botones y texto debería funcionar aun mejor.
Entonces la idea de este proyecto es llevar los frameworks de aplicaciones web al límite de lo que pueden ofrecer, tratar de explorar sus funcionalidades más avanzadas y lograr un producto que se luzca con tu talento y creatividad dominando el framework que elijas.
Battleship es un juego clásico, con múltiples versiones en juegos de mesa y en linea (si no lo conoces, puedes verlo en este link : battle-ship).
El juego es para dos personas. Consiste en que en un tablero cada jugador coloca un conjunto de barcos, ocultando su posición del contrincante. Luego, por turnos, van anunciando una posición del tablero y el enemigo informa si le han dado a uno de sus barcos o no. El juego termina cuando un jugador ha conseguido hundir todos los barcos del otro.
En este proyecto deberás crear una nueva versión, agregándole algún giro para actualizarlo y hacerlo más atractivo para las nuevas generaciones. También, no estás atada a hacer este juego sobre barcos, puedes hacerlo con el tema que más te guste, siempre y cuando el modo de juego sea parecido.
También el juego debe ser para dos jugadores, para lograrlo debes pensar en cómo puedes estructurar la información, estado de la aplicación y cómo guardarlos en alguna base de datos como Firebase o MongoDB Stitch.
-
El objetivo principal de hacer este juego es que puedas diseñar un esquema de datos y lo apliques a una base de datos conocida, como firebase o mongodb. Muchas veces el como modeles la información es más importante a como estructures tu código, ya que los problemas que puedan aparecer en el futuro tendrán su origen acá.
-
No menos importante, tendrás que diseñar y mantener el estado dentro de la aplicación, esto es la información que usas y guardas temporalmente por cada ejecución. Para esto unas herramientas para react que te pueden servir son Redux o también Context API así como también los estados internos de cada componente. Por el lado de angular tendrás a los observables y su uso conjunto con los servicios y por supuesto las propiedades que uses en cada componente.
-
Y finalmente tendrás que diseñar una interfaz llamativa, usando y abusando de todo lo que sabes de CSS y animaciones para que tengas un juego vistoso y que guste a la gente. Tienes que invitar a jugar tu juego.
Tópicos: react, angular, redux, firebase, mongodb stitch.
Este proyecto se debe resolver en equipos de 3 personas.
La planificación es clave, por lo que debes coordinarte con tu equipo e identificar las historias de usuario, priorizarlas y trabajarlas sprint a sprint cuidando de que hayan test para el código, se haya hecho test con usuarios sobre la usabilidad y cumpliendo con las ceremonias de SCRUM que has aprendido a lo largo del bootcamp.
También para este proyecto, usa cualquier framework (react, angular, etc...) cuidando de que se vea bien en las pantallas de celular o computador, que los jugadores puedan elegir la plataforma libremente sin prejuicio de la jugabilidad. Para esto considera un tamaño variable de pantalla y que los elementos del juego se redimensionen dependiendo de ella.
Para la base de datos, trata de modelar bien cómo guardarás los datos y piensa bien el cómo soportar varios usuarios a la vez en diferentes salas de juego. Recuerda que "battleship" se juega de a dos. Usa tu creatividad para asignar contrincantes a cada jugador.
- Debes haber recibido code review de al menos una compañera.
- Haces test unitarios y, además, has testeado tu producto manualmente.
- Hiciste tests de usabilidad e incorporaste el feedback del usuario.
- Desplegaste tu aplicación y has etiquetado tu versión (git tag).
-
Modelar los datos, es un paso muy importante, considera que el juego es de dos personas, pero más de una pareja puede estar jugando a la vez (modelo de salón de juego).
-
Haz un fork de este repositorio (en GitHub). Luego que tus compañeras de proyecto hagan a su vez fork de tu repositorio. Recuerda, como en proyectos anteriores, que una de ustedes debe ser la integradora o maestra del repositorio principal.
-
Para facilidad piensa en una cuadrícula y que cada barco solo ocupa una de ellas. Si quieres escalar en dificultad para este proyecto, puedes intentar con barcos de formas y tamaños diferentes.
-
Ten el concepto de turno y guarda de quién es el turno cada vez en la base de datos. También define la condición de término en una forma que tu código lo pueda detectar, como por ejemplo : todos los barcos se han hundido.
-
Llevar el estado del juego es primordial, define bien las acciones, reducidores y datos que estarán en cada juego, turno y movida de los jugadores. Puedes hacer un diagrama de estados para esto : diagrama-estados
- redux
- animaciones-react
- animaciones-angular
- servicios-angular
- contexto-react
- hooks-react
- Más animaciones para frameworks
Hasta el momento has usado javascript, html, css, react, angular, y otras herramientas para hacer tus aplicaciones, pero ¿qué tal si te aventuras con tu grupo a hacer este proyecto usando algún framework orientado a videojuegos?. Te invitamos a aceptar el desafío e intentar hacer el juego usando algún game engine como los que están a continuación o el que tu encuentres en la internet: