[Projeto] Tiro ao Alvo

Basicamente,

Primeira função pra desenhar um círculo;

Segunda para calcular e retornar um número aleatório, arredonda-o para baixo e recebe um número máximo como parâmetro o If serve para evitar que o Alvo seja desenhado fora do Canvas;

Terceira desenha o Alvo, puxando a primeira função 3x, definindo proporcionalidade entre os círculos;

Quarta na real é uma constante que contém uma função genérica com intervalo de 1seg ela vai estabelecer a cor de fundo do canvas e animar ele, definindo o raio do círculo e suas coordenadas X e Y, que ambas tem o valor aleatório da segunda função, mas o máximo é de acordo com a limitação do canvas de cada;

e a Última é o placar, que eu substitui a função alert() da aula por um elemento HTML pra ser mais din

      function drwCircle (cx, cy, r, color) {
          ctx2D.fillStyle = `${color}`;

          ctx2D.beginPath();
          ctx2D.arc(cx, cy, r, 0, 2 * Math.PI);
          ctx2D.fill();
      }

      function max(max) {
          let calc = Math.floor(Math.random() * max);

          if (calc < 45) {
              calc += 45;
          }

          return calc;
      }

      function target() {
          drwCircle(cx, cy, r * 3, 'darkred');

          drwCircle(cx, cy, r * 2, 'white');

          drwCircle(cx, cy, r, 'darkred');
      }

      const alvoJogo = setInterval(function() {
          r = 15;

          cx = max(555);
          cy = max(355);

          drwRect(0, 0, canvasW, canvasH, 'lightgrey');

          target();

      }, 1000);


        let points = 0; 

      console.groupCollapsed('coordenadas');

        canvas1.addEventListener('click', function(event){
            let mouseCanvX = event.clientX - canvas1.offsetLeft;
            let mouseCanvY = event.clientY - canvas1.offsetTop;

            if ((mouseCanvX > cx - r 
                && mouseCanvX < cx + r) 
                && (mouseCanvY > cy - r 
                && mouseCanvY < cy + r)) 
            {
                points += 1;

                document.getElementById('score').innerHTML = `Acertos: ${points}`;
            }

          console.log(event.clientX + ', ' + event.clientY);
        });