0

Hola tengo el siguiente problema, necesito aumentar la velocidad a la bolas por separado pero no encuentro la solución:

window.onload = () =>{
    setInterval(NBolas,30);
    array = document.getElementsByTagName('circle');
}

let incX = 20;
let incY = 2;
function NBolas(){


    for (const s of array) {

        animar2(s);


    }


}

function animar2 (bola) {
    
    let radio = parseInt(bola.getAttribute("r"));
    let posXActual= parseInt(bola.getAttribute("cx"))+incX;
    bola.setAttribute("cx",posXActual);

    let posYActual = parseInt(bola.getAttribute("cy"))+incY;
    bola.setAttribute("cy",posYActual);
    let sizeSVG = document.getElementsByTagName("svg")[0].getBoundingClientRect();
    if ((posXActual-radio)<=0 || (posXActual+radio)>=sizeSVG.width)
        incX*= -1;
    if ((posYActual-radio)<=0 || (posYActual+radio)>=sizeSVG.height)
        incY*= -1;
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio SVG</title>
  <script src="bola.js"></script>
</head>
<body>
<h1>Práctica SVG</h1>
<svg width="100%" height="100vh">
  <circle id="bola1"  cx="80" cy="20" r="20" stroke="green" stroke-width="4"
          fill="yellow"/>
  <circle id="bola2" cx="30" cy="40" r="50" stroke="blue" stroke-width="4"
          fill="lightblue"/>
  <circle id="bola3" cx="50" cy="50" r="30" stroke="red" stroke-width="4"
          fill="lightcoral"/>
</svg>

</body>
</html>

Necesito saber si esta bien planteado así.

Se me pide es lo siguiente:

Crear 2 bolas más de diferente tamaño y/o atributos gráficos con SVG. A continuación, prepararemos nuestro código JS para recibir un número indefinido de bolas; definiremos la función NBolas para recorrer todos los tags <circle> que podamos tener (podemos usar un for), y después proceder a animar cada una de ellas. El mismo método que nos animaba antes una bola ahora las animará todas. 2) Teniendo en cuenta que podemos añadir una propiedad al objeto bola de esta manera: bola[x].incX, hacer que cada una de las bolas tenga una velocidad diferente.

1
  • Ahora puedes probar el código directamente desde la pregunta. Puedes insertar snippets en tus preguntas y respuestas haciendo clic en el último botón del segundo grupo (tiene unos símbolos así <>). Si no me equivoco el atajo es Ctrl + M.
    – Mateo
    el 11 nov. 2022 a las 21:29

1 respuesta 1

0
  1. Para definir una velocidad random podemos ocupar la siguiente función
function GetRandomVelocidad(){
  //retornamos una velocidad entre 1 y 100
  return Math.floor(Math.random() * 100) + 1;
}
  1. Ahora un poco de matematicas

La velocidad es V=D/T, en este caso la mediremos en pixeles por segundos (1000 milisegundos)

Un FPS (frames por segundos) es FPS = 1000ms/T

Además la velocidad puede tener un sentido

  1. Reordenación del código

Cuando se ejecuta la función onload, setamos cada bola con sus propiedades y llamamos a la función que anima. Es al revés de cómo está en la pregunta, porque a mí me parece más cómodo. El resto de la explicación está en los comentarios del código

const bolas = document.getElementsByTagName('circle');
const FPS = 25; 
const TIME = 1000 / FPS; //tiempo en segundos
const sizeSVG = document.getElementsByTagName("svg")[0].getBoundingClientRect();

window.onload = () =>{
    for (const s of bolas) {
       //seteamos una velocidad random para cada circulo. Y para cada eje
       s.incX = GetRandomVelocidad();  
       s.incY = GetRandomVelocidad();
       
       //seteamos sentido inicial
       s.dirX = 1; 
       s.dirY = 1;
       
       //seteamos valores que estan dentro del SVG
       s.radio = Number(s.getAttribute("r"));
       s.posXActual= Number(s.getAttribute("cx"));
       s.posYActual= Number(s.getAttribute("cy"));
       
       //iniciamos animacion
       setInterval(() => animar2(s),TIME);
    }
    
   
}
function GetRandomVelocidad(){
  //retornamos una velocidad entre 1 y 100
  return Math.floor(Math.random() * 100) + 1;
}

function animar2 (bola) {

    //la distancia a recorrer es velocidad/FPS y multiplacamos por 1 o -1 para darle dirección a la bola
    bola.posXActual += bola.dirX * bola.incX / FPS;
    bola.posYActual += bola.dirY *  bola.incY / FPS;
    
    //cambios de dirección para que la bola rebote
    if ((bola.posXActual-bola.radio)<=0 || (bola.posXActual+bola.radio)>=sizeSVG.width)
    {
      bola.dirX*=-1;
    }
    if ((bola.posYActual-bola.radio)<=0 || (bola.posYActual+bola.radio)>=sizeSVG.height)
    {
      bola.dirY*=-1;
    }
    
    bola.setAttribute("cx",bola.posXActual);
    bola.setAttribute("cy",bola.posYActual);

}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio SVG</title>
  <script src="bola.js"></script>
</head>
<body>
<h1>Práctica SVG</h1>
<svg width="100%" height="100vh">
  <circle id="bola1"  cx="80" cy="20" r="20" stroke="green" stroke-width="4"
          fill="yellow"/>
  <circle id="bola2" cx="60" cy="60" r="50" stroke="blue" stroke-width="4"
          fill="lightblue"/>
  <circle id="bola3" cx="50" cy="50" r="30" stroke="red" stroke-width="4"
          fill="lightcoral"/>
</svg>

</body>
</html>

4
  • Hola Yussef, muchas gracias, esta perfecto, pero hay algo que no me funciona. const sizeSVG = document.getElementsByTagName("svg")[0].getBoundingClientRect(); Me da este error: Cannot read properties of undefined (reading 'getBoundingClientRect') sabes por que puede ser? el 11 nov. 2022 a las 23:47
  • @GuillermoMora Que raro, ese es código es tuyo (no es algo que haya agregado yo). Prueba colocando el script al final de la página. Es decir si leemos la página de arriba hacia abajo, primero tiene que estar el html con el svg y abajo (antes de cerrar el body) el javascript
    – Yussef
    el 11 nov. 2022 a las 23:54
  • podes agregar la propiedad "defer" a la etiqueta script para asegurarse de que se carge el documento antes de ejecutar el script el 11 nov. 2022 a las 23:57
  • Muchisimas gracias @Yussef, me has ayudado muchisimo. Era eso... ajjajaja disculpa por ser tan novato :):) el 11 nov. 2022 a las 23:57

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.