1
resposta

Minha solução!

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

<script>

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

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

    function desenhaAlvo (faixas) {

        for (var i = faixas; i > 0; i--) {

            var tamanhoDoCirculo = i * 10;

            if (i % 2) {

                var cor = "red";

            } else {

                var cor = "white";

            };

            desenhaCirculo (tela.width / 2, tela.height / 2, tamanhoDoCirculo, cor);

        };

    };

    function dispara (evento) {

        var x = evento.pageX - tela.offsetLeft;

        var y = evento.pageY - tela.offsetTop;

        for (var i = 0; i < faixas; i++) {

            if (Math.sqrt (Math.pow (x-(tela.width/2),2) + Math.pow (y-(tela.height/2),2)) <= ((i+1)*raio)) {

                alert ((10 - i) + " pontos");

                break;

            };

        };

    };

    function desenhaRetanguloCinza () {

        pincel.fillStyle = 'lightgray';

        pincel.fillRect (0, 0, tela.width, tela.height);

    };

    var tela = document.querySelector ('canvas');

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

    var faixas = 8;

    var raio = 10;

    desenhaRetanguloCinza ();

    desenhaAlvo (faixas);

    tela.onclick = dispara;

</script>
1 resposta

Oi, Yann! Tudo bem por aí? =)

Mandou bem demais, parabéns!

Ficou com alguma dúvida durante a resolução?

Caso tenha ficado não deixe de compartilhar com a gente.

Continue mergulhando.

Bons estudos e até mais!