2
respostas

Melhor solução para problema de ACERTAR AO ALVO

A solução proposta na resposta do professor é simples e prática mas não é precisa. Veja que se vc clicar um pouquinho fora do circulo nas diagonais o programa te diz que acertou mas na realidade errou. A solução que eu achei é mais precisa, porque não tem esse problema. Claro, não sei se do ponto de vista computacional é a melhor, mas pelo menos funciona. Para isso calculei a distancia do ponto do clique ao centro do circulo. Se essa distancia é menor ao raio acertou, senão errou. Esta explicado no código.

<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;

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

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

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

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

       // lógica de acerto?
/*
         if (x > 300 - raio 
            && x < 300 + raio
                && y > 200 - raio 
                    && y < 200 + raio) {
        }

                     ------------------------------------------------------------------- 
                                        //     Outra lógica de acerto?
*/
//                   ------------------------------------------------------------------- 
                                        //     PRIMEIRA PARTE:
                                        //     Calcula distancia desde o ponto do clique
                                        //     até o centro do alvo.

        var a = Math.abs(200 - y);      //     estas instrucoes calculam a distancia do 
        var b = Math.abs(300 - x);      //     ponto do clique até o centro do alvo nos
                                        //     eixos y e x

        var a2 = Math.pow(a,2);         //     estas instrucoes calculam os quadrados das 
        var b2 = Math.pow(b,2);         //     distancias a e b calculas anteriormente

        var c = Math.sqrt(a2 + b2);     //     calcula a distancia final, c

//                   ------------------------------------------------------------------- 
                                        //     SEGUNDA PARTE 
                                        //     Compara a discancia c (distancia do clique
                                        //     até o centro do alvo)
        if (c <= raio) { 
            alert('Acertou');           //     Se essa distancia é menor do que o raio
            }                           //     significa que acertou no alvo.

        else alert('Errou');            //     Se essa distancia é maior, significa
                                        //     significa que errou.
}

    tela.onclick = dispara;

</script>
2 respostas

Yuri, você saberia me dizer pq eu não posso colocar as condições do If assim?

if (290 <= x <= 310 && 190 <= y <= 210) {

   if (290 <= x <= 310 
    && 190 <= y <= 210) {
        alert("VOCÊ ACERTOU O ALVO!!! X = " + x + "Y = " + y);
    }

Nao sei. Acho que interpreta essa sequencia como x >= 290 OR x <= 310, entao se x for por exemplo 350, ele considera true porque x é maior a 290.

Teriamos que perguntar ao professor.