Creando Objetivo Aleatorio | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Por el momento, funcionando :)
<!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: #BA9848;
      }

      .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;

    // FUNCIÓN ANIMACIÓN --------------------->
    function repeatCanvas() {
      clearCanvas();
      createCircle(x, 20, 10);
      x++;

      console.log(x);
    };

    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);
    };

    randomX = randomBullseye(500);
    randomY = randomBullseye(300);

    bullsEye(randomX, randomY);

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

    </script>

</html>