Olá, Alan! Tudo bom contigo?
De início, peço desculpas pela demora em retornar.
Quando a estrutura condicional if é iniciada, algumas verificações ocorrem. Caso todas sejam verdadeiras, significa dizer que o usuário acertou o alvo. Vamos analisar cada condição?
- Primeira: a posição x do click dado pelo usuário precisa ser maior que a subtração entre o
xAleatorio e o tamanho do raio; - Segunda: a posição x necessita ser menor que a soma entre o
xAleatorio e o tamanho do raio; - Terceira: a posição y do click dado pelo usuário tem que ser maior que a subtração entre o
yAleatorio e o tamanho do raio; - Quarta: a posição y precisa ser menor que a soma entre o
yAleatorio e o tamanho do raio;
As condições acima aumentam a probabilidade do usuário de acertar o alvo. Se não houvesse isso, o usuário teria que clicar exatamente no ponto de xAleatorio e yAleatorio, o que é muito difícil. Dessa forma, utilizamos o valor do raio para expandir os valores de xAleatorio e yAleatorio; caso o usuário clique em uma pequena área em torno destes valores, ele também sairá vitorioso.
Pensando agora sobre o motivo da mensagem não aparecer em tela assim que o usuário acertar o alvo: dentro da função atualizaTela(), as variáveis xAleatorio e yAleatorio estão sendo inicializadas mais uma vez.
Portanto, precisamos remover a palavra reservada var , chegando em algo assim:
function atualizaTela() {
apagarTela();
xAleatorio = sorteiaposicao(2100);
yAleatorio = sorteiaposicao(1000);
desenhaAlvo(xAleatorio, yAleatorio);
}
Mas qual a explicação para essa mudança? Uma vez que as variáveis foram inicializadas dentro da função, não teremos acesso a elas fora dela. Isso é explicado a partir dos diferentes tipos de variáveis.
- Variável de escopo global: é aquela que está fora de qualquer classe, função ou bloco. Por esse motivo, ela poderá ser acessada em qualquer lugar do código;
var saudacao = "Olá!"
- Variável de escopo local: é aquela cujo acesso é restrito ao ambiente em que ela se encontra. Quando criamos uma variável dentro de uma função, por exemplo, não poderemos acessá-la (isso só é possível se utilizarmos o
return);
No exemplo abaixo, estou passando o nome “Alan” como parâmetro da função; dentro dela a variável saudacao é criada.
// a variável saudacao não existe fora da função
function realizarSaudacao(nome) {
var saudacao = "Oi, " + nome + "!"
console.log(saudacao)
}
realizarSaudacao("Alan")
- Variável de escopo de bloco: semelhante à anterior, esta somente pode ser manipulada dentro de um bloco de código que é reservado a ela. Uma estrutura condicional com declaração de variáveis é um exemplo disso.
No caso abaixo estou verificando se um nome foi passado como parâmetro. Se isso não acontecer, cria-se uma variável saudacao .
// a variável saudacao não existe fora do if
function realizarSaudacao(nome) {
if (!nome) {
var saudacao = "Oi, tudo bem?"
console.log(saudacao)
}
}
Observação: a palavra “escopo” está associada aos conceitos de visibilidade e acessibilidade.
Por isso, quando verificamos se o usuário clicou no alvo, sempre teremos como retorno o valor false, já que as variáveis xAleatorio e yAleatorio utilizadas são, na realidade, aquelas declaradas no topo do nosso código (elas são variáveis globais e possuem valor undefined) e não as que estão dentro da função atualizaTela().
Com essa mudança, o usuário já consegue se divertir com o jogo do alvo!
Caso tenha dúvidas com relação a minha explicação ou ao decorrer dos seus estudos na plataforma, sinta-se confortável para enviá-las ao fórum. Ficarei contente em te ajudar.
Até mais, Alan!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.
