Platzi Game
Platzi Game es un juego en el que compiten 2 personajes. Cada personaje comienza el juego con una vida del 100%
pero la ir谩 perdiendo cada que su oponente presione el bot贸n Play
, ya que este bot贸n resta la vida del oponente de forma aleatoria. Una vez la vida de uno de los jugadores llega a 0%
se abrir谩 un modal que mostrar谩 un gif, el nombre del ganador y un bot贸n para volver a comenzar el juego.
Consideraciones:
- El bot贸n
Play
inicialmente estar谩 deshabilitado para el jugador 2 y habilitado para el jugador 1 (qui茅n comenenzar谩 a jugar siempre). - Una vez el jugador 1 presione el bot贸n
Play
, este se debe deshabilitar y habilitarse el bot贸n dePlay
del jugador 2, qui茅n ahora tiene turno de jugar. Una vez el jugador 2 termine de jugar, se debe deshabilitar su bot贸nPlay
, habilitar el del jugardor 1 y as铆 sucesivamente.
- Enlace de Figma 馃憠馃徏 Aqu铆
- Hacer la maquetaci贸n de los dos dise帽os dados (pantalla principal y modal). En el footer de la pantalla principal donde dice @pepito_01, debe ir tu nombre de usuario en GitHub y los enlaces correspondientes a tus redes sociales (m铆nimo una).
- Hacer los dos personajes de las cards con CSS. Puedes escoger 2 personajes de este enlace.
- La barra de progreso debe mostrar visualmente (color rosado) el estado de la vida del personaje y tambi茅n su equivalente en porcentaje.
- El bot贸n
Play
debe restar la vida del oponente de forma aleatoria y deshabilitarse en caso de no tener el turno para jugar. El bot贸n deshabilitado debe cambiar de color para indicar visualmente qui茅n es el que tiene el turno. - En cuanto la vida de uno de los dos jugadores llegue a
0%
, debe aparecer el modal. - El modal debe contener un Gif aleatorio (para esto se debe consumir la API de Giphy) con un texto que indique qui茅n fue el ganador y un bot贸n
Play again
que cerrar谩 el modal y resetear谩 las vidas de los personajes para volver a jugar.
- HTML.
- CSS (o cualquier preprocesador de tu elecci贸n).
- JavaScript (o cualquier Framework o Librer铆a de tu elecci贸n).
- Colores: #1A46E5 (azul), #43D8C9 (verde), #FFBD11 (amarillo), #FF89BB (rosado), #FFFFFF (blanco) y #000000 (negro).
- Fuente Poppins
- 脥conos de redes sociales
- Imagen de los personajes
- Video gu铆a para hacer los personajes con CSS
- Gu铆a de inicio r谩pido de API | Giphy
- Curso de Fundamentos de JavaScript | Platzi
- Curso de Frontend Developer | Platzi
- Hacer un "Fork" de este proyecto.
- Revolver el reto.
- Crear un Pull Request hacia este repositorio.
challenge-frontend-01 se lanza bajo la licencia MIT.