Disparando contra el objetivo! | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

No siempre funciona el alert, no estoy seguro porque...
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bullseye</title>
  </head>

  <body>

    <style>
      body {
        margin: 20px;
        background-color: #caa95d;
      }

      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        align-content: center;
        height: 100vh;
      }

      #canvas-1 {
        position: relative;
        width: 600px;
        height: 400px;
        border: 3px solid black;
        border-radius: 10PX;
      }

      .item {
        text-align: center;
      }

      h1 {
        font-size: 2.5vw;
        font-weight: 900;
        margin: 10px;
        color: black;
      }

      p {
        font-family: 'Courier New', Courier, monospace;
        font-size: 2vw;
        margin: 20px;
        color: black;
        font-weight: 700;
      }
    </style>
  </body>

  <div class="container">
    <div class="item">
      <h1></h1>
      <p>bullseye</p>
    </div>
    <canvas id="canvas-1" width="600" height="400"> </canvas>
  </div>

  <!-- ---------------------*************************------------------------------------- -->

  <script>
    // VARIABLES --------------------------------------->
    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");
    brush.fillStyle = "#e5c16b";
    brush.fillRect(0, 0, 600, 400);

    // FUNCIONES ------------------------------------------->
    // crear circulo ********

    /* bullseye radio */ var radio = 10;

    function createCircle(x, y, radio, color) {
      brush.fillStyle = color;
      brush.beginPath();
      brush.arc(x, y, radio, 0, Math.PI * 2);
      brush.fill();
    };
    // limpiar canvas **********
    function clearCanvas() {
      brush.clearRect(0, 0, 600, 400);
    };

    // VARIABLES ------------------------------------->
    // circle ------------>

    var x = 0;
    var randomX;
    var randomY;

    // FUNCIÓN ANIMACIÓN --------------------->

    screen.oncontextmenu = noRightClick;
    function noRightClick() {
      return false; /* EVITAR MENU CONTEXTUAL, EL CLASICO CLICK SENCUDARIO */
    }



    function bullsEye(x, y) {
      createCircle(x, y, radio +43, 'black');
      createCircle(x, y, radio +40, 'red');
      createCircle(x, y, radio +30, 'white');
      createCircle(x, y, radio +20, 'red');
      createCircle(x, y, radio +10, 'white');
      createCircle(x, y, radio, 'red');
    };

    function randomBullseye(maxPos) {
      return Math.floor(Math.random()*maxPos);
    };

    function updateCanvas() { // actualizar canvas
      clearCanvas();
      randomX = randomBullseye(600);
      randomY = randomBullseye(400);
      bullsEye(randomX, randomY);
      console.log(randomX + "<---- 'X'");
      console.log(randomY + "<---- 'Y'");
    };



    setInterval(updateCanvas, 1000); //aplicar función 'UPDATE CANVAS' y velocidad en 'ms'.

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

      if((x < randomX + radio) && // e.g. 135 < 148
        (x > randomX - radio) && // e.g. 135 > 128
        (y < randomY + radio) && // e.g. 225 < 240
        (y > randomX - radio)) { // e.g. 225 > 220 'shot!'
        alert("HEADSHOT!");
        }
    };

    screen.onclick = shot;

    </script>

</html>