Juego del Ahorcado - Alura Challenge - Challenge ONE

Sprint 02 - Challenge ONE: Principiante en programación

Fue ideado para colocar en práctica los conocimientos que se van adquiriendo mientras se realizan los cursos de la ruta de aprendizaje.

Es un Challenge cuyo objetivo fue crear un juego del ahorcado, en el cual existe una palabra secreta que se tiene que adivinar, y cuentas con una cantidad limitada de intentos para llegar con ella, adivinando letra por letra, mientras que la página que va guiando en las letras acertadas y las incorrectas. Finalmente se llega a un resultado, en el que puedes triunfar o en caso contrario, se te muestra cual era la palabra que no pudo ser adivinada.

Tecnologías:

Principales:

  • HTML5 HTML5
  • CSS3 CSS3
  • JavaScript JS
  • Sass JS

Extra:

  • Responsive: Mobile First

Sobre el Desafío:

Requisitos:

  • Debe funcionar solo con letras mayúsculas;
  • No deben ser utilizadas letras con acentos ni caracteres especiales;
  • Al completar o dibujo de la horca, debe ser mostrado un mensaje "Fin del juego" en la pantalla;
  • Si se completa la palabra correcta antes de que se acaben los intentos, debe ser mostrado un mensaje de "Ganaste, Felicidades!" en la pantalla.
  • La página debe tener los guiones indicando cada letra da palabra, separados por un espacio;
  • Para comenzar el juego la página debe tener un botón de "Iniciar Juego";
  • No debe ser posible escribir números dentro del juego.
  • Las letras equivocadas deben aparecer en la pantalla, pero no pueden aparecer de forma repetida;
  • Las letras correctas deben aparecer en la pantalla encima de los guiones, en la posición correcta em relación a la palabra.

Extras:

  • La página debe tener un campo para inserción de texto con la finalidad de adicionar nuevas palabras al juego, e un botón "Agregar palabra".

Otras caracteristicas:

En esta ocasión, se agarró el concepto principal de la plantilla propuesta por el equipo de Alura, a la vez que se dieron unos pocos toques personales para conservar el diseño responsive , para poder practicar y simular un ambiente de trabajo en el que se trata de imitar un modelo con colores, imagenes y medidas otorgadas.


Galería:

Responsive Design y Ejemplo de uso

2022-09-09.18-37-35.mp4