2
respostas

n exibe o alerta de acerto

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

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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 1300, 600);

    var xx;
    var yy;

    function bola(a, b ,c , cor)
    {
        pincel.fillStyle = cor ;
        pincel.beginPath();
        pincel.arc(a, b, c, 2 * 3,14);
        pincel.fill();
    }

        function vassoura()
        {
            pincel.fillStyle = 'black';
            pincel.fillRect(0, 0, 1300, 600);
        }

        function alvo(x, y){
    bola(x, y, 30, 'green');
    bola(x, y, 20, 'white');
    bola(x, y, 10, 'green');
}

    function pst(Max)
    {
        return Math.floor(Math.random() * Max);
    }

    function loop ()
    {
        vassoura();
        xx = pst(1300);
        yy = pst(600);


    alvo(xx, yy);
    }

    setInterval(loop, 1000);

    function tiro (Tiroo)
    {
        var Xx = Tiroo.pageX - tela.offsetLeft;
        var Yy = Tiroo.pageY - tela.offsetTop;

        if((Xx > xx - c) && (Xx < xx + c) && (Yy > yy - c) && (Yy < yy + c))
        {
            alert('pei');
        }
    }

    tela.onclick = tiro;

</script>
2 respostas
<canvas width="1300" height="600"></canvas>

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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 1300, 600);

    var xx;
    var yy;

    function bola(a, b ,raio , cor)
    {
        pincel.fillStyle = cor ;
        pincel.beginPath();
        pincel.arc(a, b, raio, 2 * 3,14);
        pincel.fill();
    }

        function vassoura()
        {
            pincel.fillStyle = 'black';
            pincel.fillRect(0, 0, 1300, 600);
        }

        function alvo(x, y){
    bola(x, y, 30, 'green');
    bola(x, y, 20, 'white');
    bola(x, y, 10, 'green');
}

    function pst(Max)
    {
        return Math.floor(Math.random() * Max);
    }

    function loop ()
    {
        vassoura();
        xx = pst(1300);
        yy = pst(600);


    alvo(xx, yy);
    }

    setInterval(loop, 1000);

    function tiro (Tiroo)
    {
        var Xx = Tiroo.pageX - tela.offsetLeft;
        var Yy = Tiroo.pageY - tela.offsetTop;

        if((Xx > xx - raio) && (Xx < xx + raio) && (Yy > yy - raio) && (Yy < yy + ra))
        {
            alert('pei');
        }
    }

    tela.onclick = tiro;

</script>

Oi, Gustavo, tudo bem?

Obrigado por aguardar uma resposta!

O problema que você relatou decorre do fato de você não ter definido um valor para o raio na função tiro, responsável por verificar se o centro do alvo foi acertado pelo click do mouse. Dessa forma, mesmo que você acertasse o centro do alvo o alerta não iria aparecer, pois não havia parâmetros para verificar as condições aplicadas a esta função.

Para que o problema seja resolvido você precisa substituir a letra "c", na função tiro pelo valor do raio do menor círculo criado para o alvo, neste caso 10.

Com essa mudança o código da condição que verifica o click do mouse seria escrito da seguinte maneira:

if((Xx > xx - 10)
&& (Xx < xx + 10)
&& (Yy > yy - 10)
&& (Yy < yy + 10))
{

Após isso, você conseguirá solucionar o seu problema e o alerta aparecerá ao acertar o centro do alvo.

Caso tenha dúvidas em seus estudos, estarei à disposição para te ajudar.

Grande abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!