Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Creando Objetivo Aleatorio

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>
1 respuesta

Hola Roberto, espero que estés bien! Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos!

Si este post te ayudó, por favor, marca como solucionado ✓.