Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não entendi o por que.

<canvas width="600" height="600"></canvas>

<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = "lightgray";
pincel.fillRect = (0,0,600,400);

function desenhaCirculo(x,y,raio,cor){
    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.arc(x,y,raio,0,2 * Math.PI);
    pincel.fill();

}
function limpaTela(){
    pincel.clearRect(0,0,600,400);

}
var raio = 10
function desenhaAlvo(x,y){
desenhaCirculo(x,y,raio+20,"red")
desenhaCirculo(x,y,raio+10,"white");
desenhaCirculo(x,y,raio,"red");
}
function sorteiaPosicao(maximo){
    return Math.floor(Math.random() * maximo);
}
var xaleatorio;
var yaleatorio;
function atualizaTela(){
    limpaTela();
     xaleatorio = sorteiaPosicao(600);
     yaleatorio = sorteiaPosicao(400);
    desenhaAlvo(xaleatorio,yaleatorio);
}

setInterval(atualizaTela,500);

function dispara(evento){
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    ////////////////////////////////////////////////////////////////////////////////////////////////
    if((x > xaleatorio - raio)&&(x < xaleatorio + raio) 
        && (y > yaleatorio - raio) && (y < yaleatorio +raio) ){
        alert("Acertou!!");
/////////////////////////////////////////////////////////////////////////////////////////////////
    }
}
tela.onclick = dispara;
</script>

Olá , gostaria de saber por que ele construiu o if que eu deixei em evidencia desse jeito, não consegui entender.

Obrigado!

2 respostas

O porque de ter colocado as condições em duas linhas?

É apenas para ficar mais fácil de ler o código. Quando se tem muitas condições fica difícil de ver aonde começa e termina os parênteses ( ) que separam as condições. Quebrar em linhas fica mais evidente.

solução!

Ola seu Paulo!

É o seguinte, vamos imaginar um alvo como o apresentado no curso, sabemos que o circulo do centro é o ponto a ser acertado, e para que o JavaScript entenda que este é o lugar a ser clicado, precisamos mostrar a ele através do IF.

Olha só!

Para facilitar o caso vamos calcular somente a variável X. Ou o valor do comprimento da tela, deixando a altura de variável Y de fora.

if (( x > xaleatorio - raio ) && ( x < xaleatorio + raio ))

( xaleatório ) e ( yaleatorio ) são os números ( posições do alvo ) que o JavaScript esta "sorteando".

( x ) e ( y ) são os números que correspondem a posição onde o mouse esta na tela. Se o mouse estiver parado bem no canto direito e superior. então os valores de ( x vale 0 ) e ( y vale 0 ).

raio é o comprimento do circulo que vai da borda dele, até o seu centro absoluto, vamos imaginar o raio de 50, então o diâmetro total do circulo é de 100.

então:

Se o JavaScript sortear o número 60 para a variável ( x ). O exato centro do alvo vai ser desenhado nesta posição. Então vamos ter 50 para cada lado do centro absoluto, totalizando um total de 100.

Sabendo que o diâmetro total do círculo é igual a 100, vamos ter que clicar com o mouse entre a posição de número 10 e 110 ( que é igual a 50 para cada lado do centro, sorteado como 60 ) para pode acertar o círculo do centro.

Veja novamente o código

if (( x > xaleatorio - raio ) && ( x < xaleatorio + raio ))

Ou em português

Se (( posição do mouse > 60 - 50) E (posição do mouse < 60 + 50))

O IF esta verificando ao mesmo tempo se a posição do mouse é :

  • maior que o número sorteado (no caso deste exemplo 60), menos o valor do raio (neste caso 50) totalizando o valor de 10.

  • menor que o número sorteado (no caso deste exemplo 60), mais o valor do raio (neste caso 50), totalizando o valor de 110.

Então sempre que o mouse clicar na posição de número entre 10 e 110 o JavaScript sabe que o alvo esta desenhado nesta posição, devolvendo o alert "Acertou!".

Com a variável Y é a mesma coisa, mas precisam ser calculados ao mesmo tempo, para dar o valor exato do alvo.