Portanto, para garantir que o computador possa realmente terminar o jogo e adivinhar o
número certo, precisamos verificar o que o computador adivinhou e terminar o
jogo se for o número que inserimos. Para isso, podemos usar outro gancho React e esse é o gancho useEffect.
useEffect permite executar efeitos colaterais ou, em geral, permite executar a lógica após cada ciclo de renderização e, como mencionado anteriormente,
se toda essa coisa do React hooks for relativamente nova para você, confira definitivamente
alguns recursos dedicados do React hooks ou mergulhe no meu Guia completo do React
Course, onde abordo os ganchos em detalhes. Então, o que vou fazer com o useEffect agora é que eu
o chamo aqui depois de inicializar meu estado e meus refs aqui e ali, temos uma função, então useEffect recebe uma função e essa função por padrão
é executada após cada ciclo de renderização para este componente. Portanto, toda vez que ela
é renderizada, essa função é executada, depois de renderizada, isso também
é importante, não antes, nem simultaneamente, depois.
Agora, quero verificar se o computador de palpite atual é igual à escolha do usuário, porque isso significa
que o jogo acabou.
Agora, isso não pode ser o caso do primeiro ciclo de renderização, é claro, porque
excluímos a escolha do usuário dos números possíveis, mas
da segunda linha em diante. Assim, quando clicamos em menor ou maior pela primeira vez, isso pode acontecer.
Então, aí, eu quero acionar uma mensagem de
que o jogo acabou e enviar para o aplicativo. js para que possamos trocar a tela do jogo por uma tela
de game over.
Agora, ainda não temos essa tela, então
vamos adicioná-la, vamos adicionar uma tela de game over aqui na pasta screens e vamos criar uma muito simples por enquanto, vamos
ajustá-la mais tarde. Lá, eu
simplesmente terei uma visualização, um texto e uma
folha de estilo; portanto, o que normalmente importamos do React Native e, em seguida, temos o componente game over screen, que pega alguns
objetos e depois retorna jsx no final.
Aqui temos esses estilos com a Folha de estilo. criar e depois exportamos o game over screen como padrão.
Agora, como eu disse, quero manter isso simples, por enquanto, apenas visualizarei o texto do
jogo e mostraremos mais detalhes mais tarde. Por enquanto, aqui, apenas atribuirei
algum estilo, meu estilo de tela que adicionarei a esse objeto que passamos para a folha
de estilos aqui na parte inferior, defina flex como 1 e talvez justifiqueContent para centralizar e depois alinhe os itens para centralizar, para
que este texto esteja centralizado no momento.
Agora temos a tela do game over e queremos renderizar isso em vez
da tela do jogo, se o jogo terminar. Então, vamos voltar ao aplicativo. js e importe o game over screen da
pasta screens e depois do game over screen, e
a pergunta agora é claro: qual é a nossa condição para renderizar isso? Bem, no final, precisaremos de mais uma informação
adicional e esse é
o número de rodadas necessárias para o computador terminar o jogo.
Então, uma coisa que eu quero armazenar aqui no componente de aplicativo é outro estado que eu gerencio e
esse é o número de rodadas necessárias para terminar, que é zero inicialmente, porque ainda não começamos o
jogo, e vou dar
o nome de palpites e defina rondas de adivinhação e você pode nomear isso como quiser.
Agora, o objetivo é definir isso quando o jogo terminar.
Então, para isso, também adicionarei outra função aqui ao componente
do aplicativo, game over handler e ali, quero obter meu número de rodadas como argumento, portanto, espero obtê-lo
aqui para que eu possa chamar rodadas de palpite ao
meu número de rodadas que cheguei aqui. Agora, o game over handler deve ser acionado de dentro da tela do jogo, obviamente.
Então aqui na tela do jogo, eu quero passar um suporte que eu nomeei em GameOver, soa como um
nome apropriado que pode ser chamado de dentro da tela do jogo ou que contém uma referência de função
que pode ser chamada de dentro do tela do jogo e a referência de função é uma
referência nesta função de manipulador de jogo, é claro.
Portanto, dentro da tela do jogo, agora podemos usar o suporte onGameOver para executar esta função e
passar o número de rodadas que o computador levou para
adivinhar o nosso número. Em seguida, definimos esse número de rodadas aqui, armazenamos em nosso estado de rodadas e agora no
componente de aplicativo, sabemos que, se as rodadas de adivinhação são zero, o jogo ainda não começou ou está sendo executado, se for maior que
zero, o manipulador de game over é executado e
o jogo termina.
Então, queremos mostrar a tela do game
over se as rodadas de palpites forem maiores que zero.
A propósito, se iniciarmos um novo jogo, eu também quero redefinir minhas rodadas de palpite para zero, porque se um novo
jogo
for iniciado, queremos redefinir o número de rodadas que o computador levou para 0.
Então, se for maior que zero,
o jogo acabou. Nesse caso, quero mostrar a tela do game over.
Então, aqui, se eu verificar se temos um número de usuário, caso em que mostro a tela
do jogo, isso só será correto se as rodadas de palpite forem menores ou iguais a
zero, menor não é possível, mas ainda assim, podemos verificar isso.
Então, se for esse o caso, sabemos que o jogo
certamente está rodando; caso contrário, se as rodadas de palpites forem maiores que zero, sabemos que o jogo acabou e, portanto,
o conteúdo será igual ao game over screen,
neste momento esse é apenas um componente como este sem adereços pelos quais passamos.
Portanto, agora temos uma condição em que renderizamos o game over screen, tudo o que precisamos fazer agora, precisamos usar o
onGameOver Prop aqui na tela do jogo para, no final, chamar essa função e encaminhar o número de rodadas para
o componente do aplicativo .
Então, de volta à tela do jogo, se useEffect aqui determinar que a escolha certa foi feita, a suposição correta
foi feita e, portanto, o jogo acabou, então aqui, quero chamar adereços onGameOver como uma função e encaminhar a
quantidade de rodadas levou o computador para adivinhar nosso resultado ou nossa escolha e, portanto, esse é outro
estado que precisamos gerenciar aqui na tela do jogo. Temos nossas rodadas e rodadas definidas e, inicialmente, é zero,
quando esse componente é criado pela primeira vez, é claro que zero e rodadas é, portanto, agora o que encaminhar aqui, porque é um
número que incrementaremos a cada palpite, porque no próximo manipulador de palpites, se
estivermos gerando um próximo palpite, além de definir esse palpite aqui em nosso estado, é claro
que também quero definir minhas rodadas e usar o formulário da função onde recebo minhas rodadas atuais e retorno as rodadas
atuais mais um.
Portanto, adiciono uma à quantidade atual de rodadas armazenada em meu estado, para que o novo estado seja rodadas
antigas mais uma porque uma nova rodada foi iniciada. Então, com isso, estamos gerenciando a quantidade de rodadas e estamos
usando isso como uma condição no componente do aplicativo para renderizar a tela do game over e na tela do jogo, verificamos
se o jogo terminou aqui em usoEfeito e agora , fazemos isso sempre que esse componente
é renderizado novamente.
Agora poderíamos fazer isso, mas também podemos simplesmente ser mais honestos ou mais diretos com relação às dependências desse efeito
e isso é algo que você pode ser ou pode fazer adicionando um segundo argumento
para useEffect, primeiro argumento é a função que ele deve executar após renderizar o componente, segundo
argumento que você passou para useEffect é uma matriz de
dependências dessa função e aqui você deve especificar qualquer valor proveniente de fora dessa função de efeito.
Portanto, no nosso caso, esse seria o palpite atual e seria a escolha do usuário e o onGameOver e sempre que esse valor for
alterado, esse efeito será executado novamente; sempre que uma tarefa for alterada após
um ciclo de renderização, o efeito será executado novamente, devo dizer . Se um ciclo de renderização ocorrer e os valores
especificados aqui ainda forem os mesmos do ciclo de renderização
anterior, o efeito não será executado novamente, portanto o efeito será executado novamente
apenas se uma de nossas dependências for alterada. Agora, como eu disse, props escolha do
usuário e props onGameOver são todas as dependências, e para cuidar delas, usarei uma sintaxe Javascript moderna em
que uso a destruição de objetos para desestruturar meus props e obter a opção do usuário e onGameOver. A sintaxe pode parecer
estranha,
mas é como uma desestruturação de matriz, apenas para objetos, estamos retirando essas propriedades. Portanto,
esses nomes de propriedades desse objeto de suporte e os armazenam em constantes com nomes iguais,
para que agora possamos usar apenas a escolha do usuário e apenas use onGameOver, pois agora temos esses valores armazenados em
constantes com esse nome, e estou fazendo isso porque agora podemos adicionar opções de usuário e onGameOver
como dependências nesta lista, caso contrário, teríamos que adicionar objetos
aqui e que realmente muda sempre que o componente pai é alterado e, portanto, não
é uma boa verificação.
Essa é uma verificação melhor, porque agora garantimos que, se algo mais nos adereços mudar, não nos importamos,
apenas se um desses dois valores mudar, esse efeito deve ser executado novamente. Agora, com isso, temos nosso check-in no lugar
que, esperamos, levará a tela do game over se o computador
adivinhar nossos números, então agora vamos
salvar isso e experimentá-lo, talvez aqui no Android para misturar as coisas. Então, digito um número aqui, 32, confirmo, inicio um jogo e é 2; portanto, deve ser maior;
deixe-me também mostrar
como o aviso aparece quando estou no Android; esse
é o alerta padrão do Android. Então era 32, portanto é claro que
deveria ser maior, ainda deveria ser maior, agora deveria ser mais baixo,
deveria ser mais baixo, deveria ser maior, deveria ser mais baixo, deveria ser mais baixo, deveria ser mais baixo, deveria ser maior, deveria
ser maior, o o
jogo acabou.
Isso parece bom, o palpite provavelmente era 32, faria sentido em relação à sequência de números
que tínhamos aqui e, portanto, essa saída faz sentido aqui.