jogo de tiro ao alvo com contador de pontos

Olá Pedro,

A função de pontuação está aguardando que a função de dispara retorne true, e no caso ela está apenas disparando uma mensagem pro usuário.

Você pode fazer a função do acerto retornar True caso as condições sejam verdadeiras.

Tenho uma sugestão mais simples, que é você incrementar a variável pontos no mesmo momento que exibe a mensagem de "acertou", ou seja, se todas aquelas condições forem verdadeiras o usuário ganha 1 ponto e recebe a mensagem de que acertou.

Abraço, e bons estudos, espero ter ajudado

Ola Lucas,

Ajudou sim, na verdade a ideia foi muito boa, eu alterei isso e removi a funcao pontuacao, a ideia seria tirar o alert e so alterar a pontuacao, mas o problema eh que o inremento nao funciona! vou passar o codigo aqui novamente. Valeu demais!

<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 xAleatorio;
    var yAleatorio;
    var pontos = 0;

    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)) {
            alert("acerto")
            pontos++
        }
    }
    document.write("Pontos: " + pontos);
    tela.onclick = dispara;


</script>

Já experimentou mostrar a pontuação na hora que ela acerto, assim:

    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("Parabéns, acertou! Sua pontuação atual é " + pontos); 
        }
    }

O problema é que você não pode usar o document.write. Ele foi usado no curso de lógica de programação um pois o foco era lógica de programação e não manipular DOM, algo específico do mundo JavaScript quando entramos a fundo nessa linguagem.

A solução que eu te passei funciona, mas exibe no alerta. Então, para dar uma solução um pouco melhor, terei que entrar mais a fundo na linguagem JavaScript. Mas não se preocupe, a Alura possui cursos focados nessa linguagem caso se identifique com ela e queria se especializar. Alterando seu código:

<canvas width="600" height="400"></canvas>
<p>Pontuação <span id="pontos"></span></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;

    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 = pontos; 
        }
    }

    tela.onclick = dispara;

</script>

Veja que eu busquei a tag <span> pela ID dela e guardei uma variável. Através dessa variável eu consigo escrever a pontuação.

No curso de lógica 1 você aprendeu a trabalhar um pouquinho com busca de elementos do DOM. A diferença é que você agora buscou e esta escrevendo nele.

Sucesso e bom estudo meu aluno!

Perfeito Flavio, obrigado, era exatamente o que eu queria fazer, me faltou conhecimento, mas isso ai a gente vai buscando. Show de bola. um abraco!

(desculpa a falta de acentuacao)