Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Aula 3 Exercício 10 - Acertando o alvo!

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Acertando o alvo

por Clara Lessa
| 28.7k xp | 83 posts

Estou precisando de um direcionamento melhor sobre qual caminho traçar para chega ao objetivo final que o exercício propõe. Alguém poderia me dar alguma dica? 

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 10;

    var x = 300
    var y = 200

    function desenhaCirculo(x, y, raio, cor) {

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

    desenhaCirculo(x,y, raio + 20, 'red'); // maior círculo
    desenhaCirculo(x,y, raio + 10, 'white');
    desenhaCirculo(x,y, raio, 'red'); // menor circulo




    function dispara(evento) {

        var cliqueX= evento.pageX - tela.offsetLeft;
        var cliqueY = evento.pageY - tela.offsetTop;
        console.log(evento);

        if(cliqueX == x-10|cliqueX==x+10|cliqueY==y-10|cliqueY==y+10) {
            alert("Acertou")
        }



    }


    tela.onclick = dispara;

</script>

ps: o alert chegou a aparecer, porém só quando clico bem no canto do raio direito.

3 respostas
solução!
por Otávio Augusto Cartaxo Araújo
| 367.6k xp | 62 posts
Desenvolvedor de Software

Olá Clara, tudo bem?

O seu erro se encontra na função dispara, mais precisamente na condição do seu if.

Para que o usuário acerte o alvo, ele precisará clicar entre x - 10 E x + 10 E y - 10 E y + 10. Que é justamente a região que se encontra o círculo vermelho menor.

Portanto, o correto seria:

function dispara(evento) {

        var cliqueX= evento.pageX - tela.offsetLeft;
        var cliqueY = evento.pageY - tela.offsetTop;

        console.log(evento);
        if((cliqueX >= x - 10)
           && (cliqueX <= x + 10)
           && (cliqueY >= y - 10)
           && (cliqueY <= y + 10)) {

            alert("Acertou")
        }
    }

Obs1.: No seu if, você fez:

if(cliqueX == x-10|cliqueX==x+10|cliqueY==y-10|cliqueY==y+10)

Lembre-se que se quiser utilizar uma disjunção, isto é, um operador lógico de OU, o correto é || (duas barras verticais, ou também conhecida como pipe).

Obs2.: O && simboliza o operador lógico de conjunção, isto é, o E. Isso significa que para uma condição ser verdadeira, todas as suas "sub-condições" tem que ser verdadeiras também. Por exemplo:

if(aguaAcabou && temDinheiro){
    alert("Compre Água");
}

Nesse caso, o alert só será exibido quando aguaAcabou for verdadeiro E temDinheiro for verdadeiro também.

Espero ter ajudado =). Bons estudos.

por Clara Lessa
| 28.7k xp | 83 posts

Então o erro está no uso do "|", pois, como ele é o operador lógico de "ou", se apenas uma das afirmações for verdadeira ele já executa a função normalmente independente da veracidade das demais. Certo?

Muitíssimo obrigada, Otávio!!

:)

por Otávio Augusto Cartaxo Araújo
| 367.6k xp | 62 posts
Desenvolvedor de Software

Isso mesmo! E no uso do ==, pois para que acerte o alvo, o clique tem que ser em qualquer um dos pontos que esteja dentro círculo vermelho menor. Ou seja,

x - 10 <= cliqueX <= x + 10 e y - 10 <= cliqueY <= y+10.

Dessa forma, qualquer clique no qual as coordenadas estejam dentro desse intervalo, acertará o alvo.