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.
<>
). Si no me equivoco el atajo es Ctrl + M.