Dificuldade em criar um placar dentro do código.

Tentei inserir a pontuação atual no "alert" exibido, mas não sei pq ele não está incrementando nada além do primeiro ponto que o usuário faz. Tentei refazer a lógica, mas o problema não parece ser esse.

Grato desde já :)

<meta charset="UTF-8">

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

<script>

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

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

    var raio = 15;

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

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    } //Função desenvolvida para desenhar os círculos apresentados.

    function dispara(evento) {

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

        var pontuacaoAtual = 0;

        if (x >= 200 - raio && x <= 200 + raio && y >= 200 - raio && y <= 200 + raio) {
            pontuacaoAtual++;
            alert("Sua pontuação atual é " + pontuacaoAtual + "!");
            console.log(evento);

        } //Se o alvo for atingido, será exibido um alerta com a pontuação atualizada.

    } //Função desenvolvida para definir se o alvo foi atingido ou não.

    //Começamos desenhando primeiro do maior para o menor, se tivéssemos feito ao contrário o círculo maior vermelho seria desenhado em cima dos demais. 
    desenhaCirculo(200,200, raio + 30, 'red');
    desenhaCirculo(200,200, raio + 15, 'white');
    desenhaCirculo(200,200, raio, 'red');

    tela.onclick = dispara;

</script>

PS: existem algumas pequenas diferenças entre o meu código e o utilizado pelo professor.