[Projeto] Aprimorei o projeto! Disparando contra o alvo - 3 vidas | | 150 pontos && Restart! | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Olá , pessoal!

A partir da Aula Disparando contra o alvo, aproveitei alguns conhecimentos a mais e elaborei um pequeno jogo.

Acertar no círculo menor fornece 20 pontos;
Acertar no círculo branco fornece 10 pontos;
Acertar no círculo maior fornece 5 pontos;
O jogo é encerrado ao completar 150 pontos ou ao errar 3 vezes;
Usei um pouco de CSS pra tornar ele mais amigável.

Espero que isso possa ser útil pra vocês, aceito dicas de como melhorá-lo!

<!DOCTYPE html>
<html lang="pt-Br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(9, 9 , 38);
            font-size: 20px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-variant-caps:small-caps;
            font-weight: 200;
            text-align: center;
            text-decoration:overline;
            color: white;
        }
    </style>
</head>

<body>

    <p>acerte o alvo</p>

    <canvas id="canvas" width="600" height="500"></canvas>
<script>

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

    var raio = 10;
    
    var x, y;

    var contador = 0;

    var velocidade = 1000;

    var vidas = 3;

    function apagador () {
        pincel.fillStyle = 'black';
        pincel.fillRect(0, 0, 600, 400);        
    }

    function sorteiaPosicao (maximo) {
        return Math.floor(Math.random() * maximo)
    }

    function restart () {
        apagador();
        contador = 0;
        vidas = 3;
        atualizar();
        tela.onclick = dispara;
        intervaloDeTempo();   
    }
    
    function atualizar () {
        apagador();
        x = sorteiaPosicao(600);
        y = sorteiaPosicao(380);
        alvo (x, y);
        verificaFimDeJogo();
        placar('Vidas: '+ vidas + '     Pontuação: ' + contador);
    }

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

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

    function placar(mensagem) {
        pincel.fillStyle = 'rgb(15,15,38)';
        pincel.fillRect(0,400,600,600);
        pincel.font = '20px Verdana';
        pincel.fillStyle = 'white';
        pincel.fillText(mensagem, 50, 450);
    }

    function dispara(evento) {
        var xMira = evento.pageX - tela.offsetLeft;
        var yMira = evento.pageY - tela.offsetTop;

        if ((xMira > x - raio) && (xMira < x + raio) && (yMira > y - raio) && (yMira < y + raio)) {
            contador += 20;
            alert('20 pontos!');
            placar('Vidas: '+ vidas + '     Pontuação: ' + contador);
        } else if (xMira > x - (raio + 10) && xMira < x + (raio + 10) && yMira > y - (raio + 10) && yMira < y + (raio + 10)) {
            contador += 10;
            alert('10 pontos!');
            placar('Vidas: '+ vidas + '     Pontuação: ' + contador);
        } else if (xMira > x - (raio + 20) && xMira < x + (raio + 20) && yMira > y - (raio + 20) && yMira < y + (raio + 20)) {
            contador += 5;
            alert('5 pontos!');
            placar('Vidas: '+ vidas + '     Pontuação:' + contador);
        } else {
            alert('-1 Vida');
            vidas -=1};
            placar('Vidas: '+ vidas + '     Pontuação: ' + contador)
    }

    function verificaFimDeJogo() {
        if (contador >= 150 || vidas == 0) {
            fimDeJogo();
        }
    }

    function fimDeJogo () {
        apagador();
        pincel.font = '30px Verdana';
        pincel.fillStyle = 'white';
        pincel.fillText('Fim de Jogo', 200, 250);
        pincel.fillText('Pontuação Final: ' + contador, 150, 300);
        pincel.fillText(' - CLIQUE PARA REINICIAR -',80,200);
        tela.onclick = restart;
        clearInterval(intervalo);
    }

    function intervaloDeTempo () {
        intervalo = setInterval(atualizar, velocidade);
    }

    intervaloDeTempo ();
    // chama a função dispara ao clicar na tela
    tela.onclick = dispara;

    // inicia o jogo chamando a função atualizar
    atualizar();

</script>

</body>
</html>