Implementando o jogo

Meu código de implementação:

<div style="background-color: rgb(109, 235, 109); width: 700px; padding: 30px">
  <h1>Tiro ao alvo</h1>
  <label style="color: blue">Tentativas</label>
  <p style="color: red" id="vidas"></p>
  <div style="margin-top: 50px"><canvas width="600" height="400"></canvas></div>
  <div>
    <label style="font-weight: bold; color: green">Acertos</label>
    <p style="color: green" id="acertos"></p>
    <label style="font-weight: bold; color: red">Erros</label>
    <p style="color: red" id="erros"></p>
    <p style="font-weight: bold" id="endgame"></p>
  </div>
  <div>
    <button id="start">Iniciar Jogo</button>
  </div>
</div>
<script>
  let tela = document.querySelector("canvas");
  let pincel = tela.getContext("2d");

  desenhaTela = () => {
    pincel.fillStyle = "green";
    pincel.fillRect(0, 0, 600, 400);
  };

  let raio = 10;
  let xAleatorio;
  let yAleatorio;

  let vidas = 10;
  let acertou = 0;
  let errou = 0;
  let game;

  let acertos = document.querySelector("#acertos");
  let erros = document.querySelector("#erros");
  let vida = document.querySelector("#vidas");
  vida.innerHTML = 10;

  let endgame = document.querySelector("#endgame");
  let reset = document.querySelector("#start");

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

  limpaTela = () => {
    pincel.clearRect(0, 0, 600, 400);
  };

  desenhaAlvo = (x, y) => {
    desenhaCirculo(x, y, raio + 20, "red");
    desenhaCirculo(x, y, raio + 10, "white");
    desenhaCirculo(x, y, raio, "red");
  };

  sorteiaPosicao = (maximo) => {
    return Math.floor(Math.random() * maximo);
  };

  atualizaTela = () => {
    limpaTela();
    desenhaTela();
    xAleatorio = sorteiaPosicao(600);
    yAleatorio = sorteiaPosicao(400);
    desenhaAlvo(xAleatorio, yAleatorio);
  };

  dispara = (evento) => {
    let x = evento.pageX - tela.offsetLeft;
    let y = evento.pageY - tela.offsetTop;

    if (
      x > xAleatorio - raio &&
      x < xAleatorio + raio &&
      y > yAleatorio - raio &&
      y < yAleatorio + raio &&
      vidas >= 1 &&
      acertou < 10 &&
      inicia
    ) {
      acertos.innerHTML = acertou + 1;
      acertou++;
    } else {
      if (vidas > 0 && acertou < 10 && inicia) {
        vidas--;
        errou++;
        erros.innerHTML = errou;
      }
      vida.innerHTML = vidas;
    }
    vitoriaOuDerrota();
  };

  let end = false;

  // função para vitória ou derrota
  vitoriaOuDerrota = () => {
    if (vidas == 0) {
      endgame.style.color = "red";
      endgame.innerHTML = "Game Over!";
      end = true;
    } else if (acertou === 10) {
      endgame.style.color = "green";
      endgame.innerHTML = "You Win!";
      end = true;
    }
    if (end) clearInterval(game);
  };

  // reinicia o jogo e zera os parâmetros
  let inicia = false;
  reiniciar = () => {
    endgame.innerHTML = "";
    end = false;
    vidas = 10;
    errou = 0;
    acertou = 0;
    erros.innerHTML = "";
    acertos.innerHTML = "";
    vida.innerHTML = 10;
    reset.innerHTML = "Reiniciar";
    clearInterval(game);
    game = setInterval(atualizaTela, 1500);
    inicia = true;
  };

  desenhaTela();
  reset.addEventListener("click", reiniciar);

  tela.addEventListener("click", dispara);
</script>