Sesion Laboratorio 10 Practica 4 1 - jesusgpa/2023-2024-CSAAI GitHub Wiki

Sesión Laboratorio 10: Práctica 4-1

  • Tiempo: 2h
  • Fecha: Jueves 11 de Abril de 2024
  • Objetivos de la sesión:
    • Presentar la práctica memory

Contenido

Introducción

Con esta práctica aumentaremos nuestros conocimientos de javascript y también mejoraremos la memoria.

El juego consiste en dar vuelta a cada una de las cartas para tratar de encontrar la pareja correspondiente.

Cuando encontramos la pareja correcta las cartas se quedan visibles.

Pero si fallamos se vuelven a ocultar.

El tiempo seguirá corriendo hasta que encontremos todas las parejas.

En esta animación puedes ver cómo quedaría el juego terminado.

Si no te gusta la fruta no hay problema, puedes utilizar las imágenes que tú quieras.

Elementos básicos de la práctica

HTML

Comenzaremos por montar la estructura en nuestro documento html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Memory </title>

        <link rel="stylesheet" href="memory.css" />
        <script src="memory-game.js" defer></script>
    </head>
    <body>
        <div class="game">
            <div class="controles">
                <button>Comenzar</button>
                <div class="display">
                    <div class="movimientos">0 movimientos</div>
                    <div class="timer">tiempo: 0 sec</div>
                </div>
            </div>
            <div class="grid-container">
                <div class="tablero" grid-dimension="4"></div>
                <div class="win">¡Has Ganado!</div>
            </div>
        </div>
    </body>
</html>
  • Fíjate como separamos html, css y javascript. Necesitarás otros dos ficheros que puedes guardar en la misma carpeta o en una carpeta de recursos.
  • Tendremos un contenedor para el juego el div "game". Que tiene dos partes bien diferenciadas, los controles y el tablero.
  • Cada click para descubrir una carta cuenta como un movimiento, que se acumulará en el contador de movimientos.
  • Si te fijas, el div "tablero" tiene una atributo "grid-dimension" que tiene un valor inicial de 4. Esto nos permitirá definir las dimensiones mediante código javascript.

Empezando siempre con estilo

Vamos utilizar un tipo de fuente determinado para nuestra práctica.

Y para eso vamos aprender a utilizar las fuentes de Google, porque solo utilizando bien las fuentes de un documento html podemos conseguir un diseño espectacular.

Os animo a seleccionar vuestro tipo de fuente.

Yo he seleccionado uno muy conocido, se llama Montserrat a 40 pixels.

Vamos a ver el proceso de descargar y utilizar estos archivos especiales con la tipografía.

Lo primero es ir a la página y seleccionar un tamaño.

Y después le damos a descargar.

La descarga consiste en un fichero zip que contiene todos los tipos disponibles, lo recomendable es descargar solo los que vamos a utilizar, pero para este ejercicio no pasa nada si los descargamos todos y luego escogemos el que vamos a utilizar.

Descargamos un fichero .zip, al descomprimirlo tenemos una carpeta con el mismo nombre, Monserrat.

Dentro de la carpeta static, encontramos el fichero que vamos a utilizar: Montserrat-Regular.ttf.

Lo copiamos en la carpeta de nuestro proyecto y lo referenciamos dentro del documento css como se muestra a continuación.

@font-face {
    font-family: Montserrat;
    src: url(./Montserrat-Regular.ttf);
}

/* Y así podremos hacer referencia al font-family Montserrat más adelante
font-family: Montserrat;
*/

Además queremos centrar el tablero, así que añadimos la siguiente clase:

.game {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Y añadimos un par de reglas más.

La primera para mostrar el puntero diferente cuando pasamos sobre el botón con el puntero.

Y la segunda para crear un estado desactivado, para poder desactivar el botón cuando comenzamos el juego.

button {
    cursor: pointer;
}

.disabled {
    color: #757575;
}

Girando Cartas

Necesitamos hacer algo más con nuestro css para crear el efecto girar las cartas.

Vamos a ver que contiene el tablero para entender un poco mejor lo que vamos a hacer en css.

<div class="tablero" grid-dimension="4">
    <div class="card">
        <div class="card-front"></div>
	<div class="card-back">🍍</div>
    </div>
</div>

Cada carta está compuesta de tres elementos div:

  • Uno nos hace de contenedor.
  • El segundo para mostrar el frente que inicialmente estará vacío.
  • Y el tercero estará oculto y será el que contiene el emoji oculto en la carta.

Para crear el efecto de dar vuelta a la carta vamos a utilizar la propiedad "transform".

Vamos a darle dimensiones a la carta, y nos aseguramos de cambiar el puntero:

.card {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

Para el frente y el reverso de la carta vamos a necesitar las siguientes reglas:

.card-front,
.card-back {
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background: #282A3A;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

Lo más importante del conjunto de reglas anterior son las dos últimas.

Vamos a utilizar una transición sobre la propiedad de transformación para crear el efecto de animación al darle la vuelta a las cartas.

La transformación que estamos utilizando se llama cubic-bezier.

Puedes investigar un poco más sobre este tipo de transiciones en estos enlaces:

Práctica con las diferentes opciones, y si quieres configura tu propia transformación.

La otra propiedad es "backface-visibility", que se utiliza para esconder el reverso de la carta.

Ahora tenemos que rotar las cartas en posición correcta, y para eso utilizamos el siguiente código:

.card-back {
    font-size: 28pt;
    text-align: center;
    line-height: 100px;
    background: #FDF8E6;
    transform: rotateY(180deg) rotateZ(50deg);
    user-select: none;
}

.card.flipped .card-front {
    transform: rotateY(180deg) rotateZ(50deg);
}

.card.flipped .card-back {
    transform: rotateY(0) rotateZ(0);
}

Es importante poner "user-select" a "none" porque no queremos que el texto se pueda seleccionar.

Con esto conseguiremos rotar la carta 180 grados y ocultarla de nuestra vista.

Después utilizaremos la clase de apoyo ".flipped" para rotar la carta de 0 a 180 y al contrario.

Y estas mismas reglas aplicarán a todas las cartas del tablero, así que al descubrir todas las parejas, veremos todo el tablero al descubierto.

The Game

En la próxima sesión comenzaremos con el juego, no te lo pierdas, o sí.

¡A practicar!

  • Empieza a montar la estructura.
  • Prueba diferentes fuentes.
  • Encuentra tu propia transformación.
  • Añade más cartas, con emojis diferentes.
  • Prueba a mostrar el mismo emoji para el reverso de todas las cartas en lugar de negro.
  • Prueba con diferentes colores para el reverso.

Resumen de tareas recomendadas

  • Haz los ejercicios propuestos en esta sesión.

No olvides subir todas las pruebas que hagas al repo, en la carpeta P4.

Aunque sean pruebas temporales que luego no formen parte del juego, súbelas.

Son una prueba objetiva de tu trabajo y de tus "horas de vuelo".

Conclusiones

Con lo que se ha indicado en esta sesión deberías ser capaz de empezar a plantear tu juego.

Autor

Jesús Parrado Alameda (jesusgpa)

Creditos

Licencia

Enlaces

⚠️ **GitHub.com Fallback** ⚠️