Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Solução código - Alvo

Ola galera,

Segue meu código com algumas marcações visuais e a formação de alvos aleatórios após o alvo central sugerido inicialmente.

<h1>..:: Acerte o Alvo ::..</h1>
<h3>Você consegue acertar o alvo?</h3>
<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 tentativas = 0;
    console.log(tentativas);

    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);
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
    }

    function montaAlvo() {

        alvoX = Math.floor(Math.random() * 550);
        alvoY = Math.floor(Math.random() * 350);
        desenhaCirculo(alvoX, alvoY, raio + 20, 'red'); // maior círculo
        desenhaCirculo(alvoX, alvoY, raio + 10, 'white');
        desenhaCirculo(alvoX, alvoY, raio, 'red'); // menor circulo
        return alvoX, alvoY;
    }

    function tiroAlvo(x, y) { // marcação do tiro disparado

        desenhaCirculo(x-2, y, 1, 'black'); 
        desenhaCirculo(x+2, y, 1, 'black');
        desenhaCirculo(x, y-2, 1, 'black');
        desenhaCirculo(x, y+2, 1, 'black');
        desenhaCirculo(x, y, 1, 'blue');
    }

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        tiroAlvo(x, y); //marcação do tiro
        tentativas += 1;

        console.log('Alvo:: ' + alvoX + ' - ' + alvoY);
        console.log('Tiro:: ' + x + ' - ' + y);
        console.log(tentativas);

        var tolerancia = 10;
       // lógica de acerto?
        if ( alvoX <= (x + tolerancia) && alvoX >= (x - tolerancia) ) {
            if ( alvoY <= (y + tolerancia) && alvoY >= (y - tolerancia) ) {
                alert('Legal! Você acertou o alvo em ' + tentativas + ' tentativas...');
                limpaTela();
                montaAlvo();
                tentativas = 0;
            }
        }
    }

    // Alvo inicial (central) proposto pela exercício
    var alvoX = 300;
    var alvoY = 200;
    desenhaCirculo(alvoX, alvoY, raio + 20, 'red'); // maior círculo
    desenhaCirculo(alvoX, alvoY, raio + 10, 'white');
    desenhaCirculo(alvoX, alvoY, raio, 'red'); // menor circulo  

    tela.onclick = dispara;

</script>
1 resposta
solução!

Olá Fábio,

Ficou bacana, continue assim! Quanto mais exercitar e pesquisar mais experiência você vai ganhar!