[Dúvida] Como posso colocar um Contador de pontos? Consegui alterar a cor após acertar o alvo | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Alvo Aleatório</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

<script>

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

    //alterar cores
    var corAlvo =["red", "purple", "black", "yellow", "blue", "green"];
    var ctrlCor = 0;


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

    var raio = 10;
    var xAleatorio;
    var yAleatorio;

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

    }

    function desenhaAlvo(x,y) {

        desenhaCirculo(x, y, raio+20, corAlvo[ctrlCor]);
        desenhaCirculo(x, y, raio+10, 'white');
        desenhaCirculo(x, y, raio, corAlvo[ctrlCor]);

    }

    function sorteiaPosicao(maximo) {

        return Math.floor(Math.random() * maximo);

    }

function atualizaTela() {
    limpaTela();
    xAleatorio = sorteiaPosicao(540);// colocamos 540 em vez de 600, para não cortar o alvo do lado direito 
    if(xAleatorio < 60){// verificamos o valor mínimo se não é menor que o raio total, se for igualamos ao raio total, para não cortar em cima e do lado esquerdo
        xAleatorio = 60;
    }

    yAleatorio = sorteiaPosicao(340);// colocamos 340 no lugar de 400, para não cortar o alvo no lado de baixo
    if (yAleatorio < 60) {
        yAleatorio =60;  
    }
    desenhaAlvo(xAleatorio, yAleatorio);
}

setInterval(atualizaTela, 1000);

function dispara(evento) {

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

    if((x > xAleatorio - raio)
    && (x < xAleatorio + raio)
    && (y > yAleatorio - raio)
    && (y < yAleatorio + raio)) {

        alert('Acertou!');
        if (ctrlCor >=5) { //se acertar o alvo ele mudara de cor
            ctrlCor = 0;            
        }else{
            ctrlCor++;
        }

    }
}

tela.onclick = dispara;

</script>

</body>
</html>

Oi Luiz, tudo bem com você?

Agradeço por aguardar um retorno nosso.

Ao testar o seu código ele está funcionando corretamente e a mudança de cor quando acerta ficou muito legal, meus parabéns!

Para que possamos exibir a pontuação na tela, primeiro temos que criar um elemento HTML que será responsável por exibir o texto dessa pontuação e para isso, podemos utilizar o elemento parágrafo, como mostro abaixo:

<p></p>

Além disso, temos que identificar esse elemento de forma única, pois, através do JavaScript, iremos inserir a pontuação do usuário neste elemento <p> quando houver um acerto. Como identificação, utilizaremos o atributo id:

<p id="pontos"> </p>

Após isso, precisamos criar uma variável responsável por coletar os pontos, outra variável para capturar o elemento <p> como mostro abaixo:

var pontos = 0;
var areaQueExibePontos = document.querySelector('#pontos');

Indo adiante, dentro da função dispara(evento), precisaremos incrementar a contagem de pontos quando o usuário acertar e além disso será necessário inserir essa quantidade no elemento parágrafo que foi selecionado:

function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if ((x > xAleatorio - raio) 
                && (x < xAleatorio + raio) 
                && (y > yAleatorio - raio) 
                && (y < yAleatorio + raio)) {
            pontos++
            alert('Acertou');
            areaQueExibePontos.textContent = "Pontuação: " + pontos; 
        }

Com isso, será possível acessar na parte inferior do jogo, uma área que mostra a pontuação. Segue abaixo o código completo e o resultado de execução:

Código Completo:

<canvas width="600" height="400"></canvas>
<p id="pontos"> </p> 
<script>
   // busca o elemento do HTML que receberá a pontuação do jogador
    var areaQueExibePontos = document.querySelector('#pontos'); 
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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

    var raio = 10;
    var xAleatorio;
    var yAleatorio;
    var pontos = 0; // essa linha

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

    function desenhaAlvo(x, y) {
        desenhaCirculo(x, y, raio + 20, 'red');
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, 10, 'red');
    }

    function posicaoAlvo(maximo) {

        return Math.floor(Math.random() * maximo);

    }

    function atualizaTela(){

        limpaTela();
        xAleatorio = posicaoAlvo(600);
        yAleatorio = posicaoAlvo(400);
        desenhaAlvo(xAleatorio, yAleatorio);
    }
    setInterval(atualizaTela, 1000);

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if ((x > xAleatorio - raio) 
                && (x < xAleatorio + raio) 
                && (y > yAleatorio - raio) 
                && (y < yAleatorio + raio)) {
            pontos++
            alert('Acertou');
            areaQueExibePontos.textContent = "Pontuação: " + pontos;
        }
    }

    tela.onclick = dispara;

</script>

Resultado:

Frame do jogo tiro ao alvo mostrando que quando o jogador acerta o alvo, representado por um círculo vermelho, marca um ponto, representado pela palavra pontuação em seguida o número de acertos. Um alerta de “Acertou” também é mostrado quando o jogador acerta o alvo.

Conte sempre com o fórum da Alura para evoluir seus estudos.

Bons estudos!

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