Minha versão - Alvo com pontuação

Resolvi adicionar um esquema de pontuação em cada parte do alvo.

<meta charset="UTF-8">
<canvas width="600" height="400" ></canvas>

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

  var aleatorioX;
  var aleatorioY;

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

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

  function criaAlvo (x, y) {
    criaCirculo(x, y, 30, 'red');
    criaCirculo(x, y, 20, 'white');
    criaCirculo(x, y, 10, 'red');
  }

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

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

  function atualizaTela () {
    limpaTela();
    aleatorioX = sorteiaPosicao(600);
    aleatorioY = sorteiaPosicao(400);
    criaAlvo(aleatorioX, aleatorioY);
  }
  setInterval(atualizaTela, 2000);

  function tiro (event){
    var x = event.pageX - tela.offsetLeft;
    var y = event.pageY - tela.offsetTop;

    if ((x > aleatorioX - 10) 
    && (x < aleatorioX + 10)
    && (y > aleatorioY - 10)
    && (y < aleatorioY + 10)){
      alert('No alvo!! Você fez 100 pts.')

    } else if ((x >= aleatorioX - 20) 
    && (x <= aleatorioX + 20)
    && (y >= aleatorioY - 20)
    && (y <= aleatorioY + 20)){
      alert('Chegou perto! Você fez 50 pts.')

    } else if ((x >= aleatorioX - 30) 
    && (x <= aleatorioX + 30)
    && (y >= aleatorioY - 30)
    && (y <= aleatorioY + 30)){
      alert('Passou longe! Você fez 25 pts.')
    }

  }

  tela.onclick = tiro;

</script>