3. ¿Cuál fue el emoji? 👑
Last updated
Was this helpful?
Last updated
Was this helpful?
Construiremos un juego de memoria. 🧠 Tendremos: Un botón que inicie el juego, un contador de segundos que nos dirá cuanto tiempo hemos llevamos jugando, e inmediatamente se nos presentará un emoji que vamos a memorizar, paso siguiente, aparecerá una serie de emojis en pantalla y tú tendrás que responder si es el emoji que tenias que recordar o no, ademas celebraremos cuando identifiques exitosamente el emoji ¡¡Con una linda imagen de un gatito 😻😻!!
¿Estás lista?
¡Claro que sí! ¡Ya tienes experiencia! 💪
Vamos a crear el entorno donde vamos a jugar. Para ello iremos al archivo app.component.html y borramos todo el contenido para adicionar lo siguiente:
Deberías ver algo así: 👇
Ahora vamos a modificar el archivo app.component.ts, en este vamos a adicionar la declaración de variables que vimos en el archivo app.component.html y además vamos a agregar unas funciones. En este archivo vamos a encontrar el siguiente código:
¡Vamos a hacer que nuestro tablero tenga color agregando CSS! ¿recuerdas las clases que usamos en nuestro app.component.html? ¡llego el tiempo de usarlas! Reemplaza el contenido de app.component.css con éste:
Deberías ver algo así: 👇
Llego el momento de mostrar un emoji en pantalla, este emoji nos definirá ¡todo el juego! con este compararemos los demás emojis que saldrán aleatoriamente y ¡no solo eso! pondremos un contador de 5s a 0s donde decrementará el tiempo en el que nos memorizaremos éste. Actualmente nuestro app.component.html tiene el siguiente código, pero lo modificaremos así:
¡Ahora sí! vamos a hacer la lógica para que nuestro emoji aparezca y se oculte a los 5s. Vamos a tomar nuestro archivo app.component.ts que actualmente luce así, pero adicionaremos lo siguiente:
Vamos a hacer que nuestro emoji resalte agregando un poco de CSS. Adiciona en app.component.css lo siguiente:
Deberías ver algo así: 👇
¡Vas muy bien! ya tenemos el emoji que debemos memorizar y desaparece a los 5s. Ahora vamos a hacer que aparezcan emojis random de nuestra lista de emojis y responder un "Si" o "No" dependiendo si él emoji que se nos presenta es el esperado. Para esto en el archivo app.component.html vamos a encontrar el siguiente código:
Adicionaremos la lógica que nos generará de manera random los emojis a comparar y la función a donde irán nuestras respuestas de si/no. Haciéndonos acumular ✅o ❌en nuestro score dependiendo de nuestra respuesta. En caso de no ser el emoji correcto llamaremos una función que nos generará otro emoji random para comparar. El app.component.ts actualmente luce así, pero adicionaremos lo siguiente:
Deberías ver algo así: 👇
Vamos a adicionarle un mensaje que salga cuando respondas correctamente identificando entre los emojis random el emoji correcto a memorizar. Actualmente nuestro app.component.html tiene el siguiente código, pero vamos a adicionar lo siguiente:
¡Vamos a adicionar la lógica para mostrar el mensaje cuando ganes! Ahora vamos a modificar el archivo app.component.ts, en este archivo vamos a adicionar las funciones necesarias para que podamos visualizar el mensaje de éxito cuando efectivamente le demos clic al emoji que debíamos memorizar. Actualmente nuestro app.component.ts tiene el siguiente código, pero vamos a adicionar lo siguiente:
¡Estas a punto de terminar! ¿Qué tal si hacemos algo nuevo? Vamos a crear una nueva carpeta llamada services y dentro de esta carpeta adicionaremos un archivo llamado cats.service.ts, este archivo será nuestro servicio. Básicamente un servicio es un proveedor de datos que mantiene lógica de acceso a los datos que no están dentro de nuestra aplicación. El servicio será consumido por nuestro componente app.component.ts, que dará al servicio la responsabilidad de acceder a la información para que el componente pueda disponer de los datos.
Debes hacer algo así: 👇
Ahora en nuestro nuevo archivo cats.service.ts adicionaremos esto:
Ahora vamos a modificar un archivo que no habíamos tocado el día de hoy, se llama app.module.ts y vamos a importar la función HttpClientModule que nos permitirá hacer los llamados HTTP colocándolo aquí podrá ser usado en toda nuestra aplicación. Si tuviéramos más de un componente ¡todos podrían acceder a él! Actualmente nuestro app.module.ts tiene el siguiente código, pero vamos a adicionar lo siguiente:
Deberías ver algo así: 👇
¡El último paso guiado! El servicio será consumido por nuestro componente app.component.ts así que vamos a llamarlo de la siguiente manera. Actualmente nuestro app.component.ts tiene el siguiente código, pero vamos a adicionar el siguiente:
Toques finales: 👇 Vamos a adicionar estos estilos en nuestro app.component.css para que todo se vea aun mejor cuando ganes.
Deberías ver algo así: 👇
Parece que nuestra aplicación está lista excepto por un pequeño detalle 😵. No está mostrando el Timer, este es el encargado de mostrar el tiempo transcurrido en segundos del juego.
💪💪¡¡Felicitaciones!! ¡Llegaste muy lejos y apenas termines el score habrás terminado todos los desafíos! 💪💪
1. La etiqueta Div nos ayuda a definir un orden. 2. La etiqueta label es usada para contener texto. 3. El elemento {{}} es una forma de comunicar nuestro . De esta manera el app.component.ts, se comunica con app.component.html, y el || dentro del elemento es una condición "o" que nos va a mostrar el número cero mientras no exista datos en las variables. 4. El elemento ="" nos va a ayudar a definir los estilos de nuestra aplicación (no solo tiene esa utilidad, pero la usaremos para eso en el ejercicio de hoy). 5. El elemento *= nos va a ayudar a ocultar o mostrar elementos, depende de la variable que tengamos asignada dentro del *ngIf=, en este caso tenemos la variable showBtnStart donde la asignaremos en el app.component.ts más adelante. 6. El elemento button nos va a crear un botón que será el que usaremos para iniciar nuestro juego. 7. El elemento (click)="" controla el evento cuando tú le des clic a él botón y se va a llamar la función startGame().
1. A la variable scoreGame se le asigna vacío, de esta manera le estamos diciendo que es String. 2. A la variable showBtnStart se le asigna true, de esta manera le estamos diciendo que es Boolean. Además, cuando le asignamos true, en nuestro *ngIf de app.component.html deberá mostrar todas las líneas de código que contenga éste, pero cuando su valor sea false ocultará las lineas de código.
¿Luce como mucho verdad? Pero en cada una de las líneas puedes encontrar la explicación sobre su funcionamiento. Si quieres profundizar tus conocimientos en CSS, aquí te dejo una Wiki con gran cantidad de definiciones y artículos. 🤓.
7. En la función randomEmoji() generaremos un número de 0 a 6 (emojiArray tiene 7 posiciones) y lo asignaremos a emojiIndex, con esto procedemos a llamar la función que se encargara de llamarse cada segundo.
8. En la función startcountDownFirstEmoji() nos encargaremos de llamar la función que nos va a decrementar el contador cada segundo con un . Ésta función ejecuta en intervalos específicos de tiempo (en milisegundos) una función o las líneas de código que tenga asignadas. El método setInterval() se continuará llamando hasta que se llame la función clearInterval() o se cierre la ventana. La función clearInterval la explicaremos más adelante.
9. Creamos la función intervalEmojiControl() ésta recibe como parámetro una variable llamada intervalEmoji que almacena todo el setInterval, esto nos ayudará a detenerlo cuando la variable countDownEmoji sea menor a 0 con la función (), ésta borra el intervalo establecido por la función setInterval() y esto hace que el contenido de la función setInterval() no se ejecute nunca más.
3. Esta función compareAnswer() será la encargada de administrar nuestra respuesta, recibirá como parámetro la variable answer que tendrá el valor 'YES'/'NO', mediante un compararemos si el actual emoji es igual o diferente al que debemos memorizar y adicionar al score una ✅ en caso de respuesta correcta y ❌ en caso de respuesta incorrecta.
4. ¿Qué es un ? Se utiliza para agilizar la toma de decisiones múltiples; trabaja de la misma manera que lo hace un if, en nuestro caso el case: 'YES' es como si tuviéramos un if (answer === 'YES') y case:'NO' es como si tuviéramos un if (answer === 'NO').
1. La importación de la función permite realizar el llamado para acceder a la donde están las imágenes de los gatitos y nos ayuda a controlar los errores que puedan llegar a pasar.
2. La importación de la función Injectable nos permite usar el para determinar éste como un servicio.
6. La función getImage() se encargará de lanzar el llamado para obtener la URL de los gatitos.
⭐️ Utiliza lo que ya conoces como: data , , y así como decrementamos la variable en countDownEmoji deberás crear una variable que ahora incremente cada segundo.
puedes encontrar el ejercicio resuelto.
