3. ¿Cuál fue el emoji? 👑
💡 Introducción 💡
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! 💪
¡Aquí puedes encontrar el demo!
Paso 1: Crear vista del tablero de juego 🎮
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:
<div class="scoreScreen">
<label>
Score:
</label>
<label>
{{scoreGame || 0}}
</label>
<label>
/ Timer:
</label>
<label>
{{0}}s
</label>
</div>
<div class="fatherScreen">
<div class="childScreen" *ngIf='showBtnStart'>
<button (click)="startGame()">Iniciar Juego</button>
</div>
</div>Deberías ver algo así: 👇
Paso 2: Adicionar la lógica al tablero de juego 🔭
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:
scoreGame = '';
showBtnStart = true;
startGame() {
this.randomEmoji();
}
randomEmoji() {
}
Paso 3: Agregar estilos al tablero de juego 🎨🖌
¡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:
button { /* Afecta todas las etiquetas HTML button */
background-color: seashell; /* Determina el color de fondo de nuestro botón */
border: none; /* Nos elimina el borde a nuestro botón */
border-radius: 12px; /* Hace los extremos de nuestro botón redondeados */
padding: 16px; /* Crea un espacio entre el borde de nuestro botón y el centro del botón */
font-size: 20px; /* Determina el tamaño de letra dentro de nuestro bóton */
font-weight: bold; /* Hace que nuestro texto se vea en Negrita */
margin-right: 10px /* Crea un espacio entre el borde de nuestro botón y el exterior del mismo */
}
button:hover { /* Afecta todas las etiquetas HTML button en el momento que el cursor este sobre el */
background: salmon; /* Determina el color de fondo de nuestro botón */
border-style: solid; /* Nos crea un borde a nuestro botón de línea continuia */
border-color: pink; /* Nos da un color a el borde de nuestro botón */
}
label { /* Afecta todas las etiquetas HTML label */
white-space: nowrap; /* hace que nuestro texto no se quiebre, y se vea en una sola línea */
}
.childScreen { /* El . hace referencia a una clase, así que va a afectar todos los elementos HTML con esta clase */
width: 120px; /* Determina el ancho de la sección */
}
.fatherScreen { /* El . hace referencia a una clase, así que va a afectar todos los elementos HTML con esta clase */
height: 350px; /* Determina la altura de la sección */
display: grid; /* Define el elemento como un contenedor de cuadrícula */
justify-content: center; /* Centra los elementos horizontalmente */
align-items: center; /* Centra los elementos verticalmente */
background: #e9dbf1; /* Determina el color de fondo de la sección */
border-radius: 15px; /* Hace los extremos de nuestra sección redondeados */
}
.scoreScreen { /* El . hace referencia a una clase, así que va a afectar todos los elementos HTML con esta clase */
background: #e9dbf1; /* Determina el color de fondo de la sección */
border-radius: 15px; /* Hace los extremos de la sección redondeados */
box-sizing: content-box; /* controla cómo se maneja el elemento al que se aplica.
Los valores de ancho y alto se aplican al contenido, el relleno y el borde. */
padding: 20px; /* Crea un espacio entre el borde de la sección y el centro la sección */
margin-bottom: 8px; /* Crea un espacio entre el borde de la sección y el exterior de la misma */
font-weight: bold; /* Hace que nuestro texto se vea en Negrita */
font-size: 30px; /* Determina el tamaño de letra dentro de la sección */
}¿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. 🤓https://css-tricks.com/.
Deberías ver algo así: 👇
Paso 4: Crear elementos para emoji 🚧
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í:
<div class="childScreen" *ngIf='countDownEmoji > -1 && !showBtnStart'>
<label class='emoji'>
{{emojiArray[emojiIndex]}}
</label>
<br />
<label>
Tendrás {{countDownEmoji}}s para recordar este emoji
</label>
</div>Paso 5: Generación del emoji que debemos recordar ⏲
¡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:
// adicionamos en la línea 12, declaraciones de variables
countDownEmoji: number;
emojiArray = ['🚗', '🌌', '📻', '👻', '🍦', '👽', '👯'];
emojiIndex: number;
maxNumberEmoji = this.emojiArray.length - 1;
countDownEmojiSize = 5;
// adicionamos en la línea 15
this.showBtnStart = false;
// adicionamos en la línea 20, las siguientes funciones
randomEmoji() {
this.emojiIndex = Math.round(Math.random() * this.maxNumberEmoji);
this.startcountDownFirstEmoji();
}
startcountDownFirstEmoji() {
const intervalEmoji = setInterval(() => this.intervalEmojiControl(intervalEmoji), 1000);
}
intervalEmojiControl(intervalEmoji) {
this.countDownEmoji = this.countDownEmojiSize--;
// Cuando termine el numero de segundos para recordar la imagen, se debe parar el setInterval
if (this.countDownEmoji < 0) {
clearInterval(intervalEmoji);
}
}
Paso 6: Agregar estilos al emoji a recordar 🎨🖌
Vamos a hacer que nuestro emoji resalte agregando un poco de CSS. Adiciona en app.component.css lo siguiente:
.emoji { /* El . hace referencia a una clase, así que va a afectar todos los elementos HTML con esta clase */
font-size: 100px; /* Determina el tamaño de letra dentro de la sección */
}Deberías ver algo así: 👇
Paso 7: Crear elementos para comparar el primer emoji 🔎
¡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:
<div *ngIf='emojiAskIndex >= 0 && !youWin'>
<label class='emoji'>
{{emojiArray[emojiAskIndex]}}
</label>
<label>
¿este es tu emoji?
</label>
<br />
<button class="childScreen" (click)="compareAnswer('YES')">Si</button>
<button class="childScreen" (click)="compareAnswer('NO')">No</button>
</div>
Paso 8: Generación de elementos para comparar 🔦
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:
// adicionamos en la línea 17
emojiAskIndex: number;
youWin = false;
// adicionamos en la línea 40
this.thisIsYourEmoji();
// adicionamos en la línea 43
compareAnswer(answer) {
switch (answer) {
case 'YES':
if (this.emojiIndex === this.emojiAskIndex) {
this.scoreGame = this.scoreGame + '✅';
} else {
this.scoreGame = this.scoreGame + '❌';
}
break;
case 'NO':
if (this.emojiIndex !== this.emojiAskIndex) {
this.scoreGame = this.scoreGame + '✅';
this.thisIsYourEmoji();
} else {
this.scoreGame = this.scoreGame + '❌';
}
break;
}
}
thisIsYourEmoji() {
this.emojiAskIndex = Math.round(Math.random() * this.maxNumberEmoji);
}
Deberías ver algo así: 👇
Paso 9: Adicionar mensaje ganador 🏆
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:
<div *ngIf='youWin'>
<label class='youWinText'>
¡Lo lograste!
</label>
<br />
<img *ngIf='catURL' [src]="catURL" alt="Image Cat" />
</div>Paso 10: Mensaje finalización del juego 📃
¡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:
// adicionamos en la línea 49
this.finishGame();
// adicionamos en la línea 70
finishGame() {
this.youWin = true;
}
Paso 11: Crear servicio retornar imagen gatito 📷
¡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:
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError as observableThrowError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class CatsService {
APIUrl: string = 'https://api.thecatapi.com/v1/images/search';
constructor(private http: HttpClient) { }
getImage() {
return this.http
.get<Array<{}>>(this.APIUrl)
.pipe(data => data, catchError(this.handleError));
}
private handleError(res: HttpErrorResponse | any) {
console.error(res.error || res.body.error);
return observableThrowError(res.error || 'Server error');
}
}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:
// adicionamos en la línea 4
// Realizar llamados Http y va en imports
import { HttpClientModule } from '@angular/common/http';
// Reemplazar la línea imports, por la siguiente.
imports: [ BrowserModule, FormsModule, HttpClientModule ],
Deberías ver algo así: 👇
Paso 12: Utilizar el servicio para retornar gatito 🐱
¡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:
// adicionamos en la línea 2
// Servicio
import { CatsService } from './services/cats.service';
// adicionamos en la línea 21
catURL = '';
constructor(private catsService: CatsService) { }
// adicionamos en la línea 77
this.getCatImage();
// adicionamos en la línea 80
getCatImage(): void {
this.catsService
.getImage()
.subscribe(
resultQuestion => this.catURL = resultQuestion[0].url,
error => (console.log('Ups! we have an error: ', error))
)
}Toques finales: 👇 Vamos a adicionar estos estilos en nuestro app.component.css para que todo se vea aun mejor cuando ganes.
.youWinText { /* El . hace referencia a una clase, así que va a afectar todos los elementos HTML con esta clase */
font-size: 60px; /* Determina el tamaño de letra dentro de la sección */
color: steelblue; /* Determina el color del texto en la sección */
}
img { /* Afecta todas las etiquetas HTML img */
width: 250px; /* Determina el ancho de nuestra imagen */
height: 250px; /* Determina la altura de nuestra imagen */
}Deberías ver algo así: 👇
😎 Tu Misión 😎
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.
⭐️ Utiliza lo que ya conoces como: data binding, setInterval, clearInterval y así como decrementamos la variable en countDownEmoji deberás crear una variable que ahora incremente cada segundo.
💪💪¡¡Felicitaciones!! ¡Llegaste muy lejos y apenas termines el score habrás terminado todos los desafíos! 💪💪
🎉 ¡LO LOGRASTE! 🎉
Last updated
Was this helpful?