Práctica 2: Carta secreta

Descripción de la actividad

Esta práctica debe ser elaborada de manera individual.

Escribe una aplicación web que permita jugar el juego de Carta secreta que se describe a continación. Crea un directorio llamado practica2 y coloca allí todos los archivos que requiera la aplicación incluyendo el archivo HTML principal el cual debe llamarse index.html.

Reglas del juego

Requisito: una baraja inglesa convencional de 52 cartas con 4 palos:

♣ tréboles (clubs)
♦ diamantes (diaomonds)
♥ corazones (hearts)
♠ picas (spades)

Cada palo a su vez está conformado de 13 cartas con valores numéricos del 1 al 13, en donde el as vale 1, la jota vale 11, la reina vale 12 y el rey vale 13.

Estas son las reglas del juego de Carta secreta:

1. Para comenzar el juego se deben barajar todas las cartas.

2. En cada partida se sacan dos cartas de la baraja. Una de esas cartas se coloca boca abajo (la carta secreta) y la otra descubierta boca arriba.

3. El jugador debe adivinar si la carta secreta es menor, mayor, o igual que la carta descubierta. Para ello solo se considera únicamente el valor numérico de las carta tal como se explicó anteriormente. El palo de la carta no debe influir en la comparación.

4. Tras revelar la identidad de la carta secreta el jugador descubre si acertó o no. Se debe llevar la cuenta de cuántas partidas ha ganado y perdido el jugador.

5. Las dos cartas de la partida ya concluida se desechan (no se regresan a la baraja) y se inicia una nueva partida (ir al paso 2). El juego termina cuando ya no existan más cartas en la baraja.

6. Si el jugador así lo desea, puede comenzar otra vez el juego (ir al paso 1).

El siguiente video demuestra la presentación y flujo de ejecución que debe tener el programa.

Requerimientos técnicos

• La aplicación debe estar diseñada como una single-page application (SPA).

• El nombre y matrícula del autor debe estar claramente visible en la página.

  NOTA: Recuerda que esta actividad se debe elaborar de manera individual. Ignora el hecho de que en el video aparecen los datos de dos autores.

• La aplicación debe ser responsiva. Específicamente, las cartas deben estar alineadas en un mismo renglón en una pantalla ancha y alineadas en una misma columna en una pantalla angosta. Lo mismo para los tres botones de selección (“menor”, “mayor”, “igual”). En caso de duda ver el video de arriba. Para lograr la responsividad solicitada se pueden usar los frameworks de W3.CSS o Bootstrap.

• Exceptuando los elementos responsivos del punto anterior, cualquier otro aspecto sobre los estilos usados en la aplicación queda a libre criterio del autor. Esto incluye uso de colores, emojis, tipos de fuentes, justificado de elementos, espaciado, tamaños de márgenes, etc.

• El código de JavaScript y las hojas de estilo CSS deben estar en archivos externos al documento HTML principal.

• Para la visualización de las cartas del juego se deben utilizar las gráficas vectoriales escalables (SVG) contenidas en el archivo comprimido cards.zip.

• Para barajar las cartas al inicio del juego se debe aplicar el algoritmo de Fisher–Yates.

• Al momento de que la carta secreta sea revelada se le debe presentar al usuario un mensaje indicando si acertó o falló junto con un emoji que sea distintivo del resultado obtenido.

• Al finalizar el juego debe haber un botón de “reiniciar” que permita recargar la página con el fin de comenzar el juego desde zero.

Importante: Verifica al final que tu documento HTML no tenga errores ni adevertencias en el W3C Markup Validation Service.

¿Qué se debe entregar?

Crea un archivo tarball con el directorio practica2 y todo su contenido (código HTML, CSS, JavaScript, imágenes, etc.). Nombra a este archivo practica2.tgz. Este archivo se puede crear desde la terminal tecleando lo siguiente (asegúrate de que te encuentres en el directorio padre del directorio practica2):

tar czf practica2.tgz practica2

La fecha límite es el miércoles 3 de abril.