genera una pagina en donde donde se vea una pelota que yo pueda mover en todo el espacio de la pagina hacia cualquier dirección deteniéndose poco a poco al pasar mas de 10 segundos "que rebote en un espacio completamente grande de la pantalla de la pestaña de Chrome de un computador"
Aquí te dejo un ejemplo de cómo crear una página con una pelota que se puede mover en todo el espacio de la página utilizando JavaScript y HTML5. En este ejemplo, la pelota rebota en las paredes de la página y se detiene después de 10 segundos. **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pelota que rebota</title> <style> #pelota { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: red; } </style> </head> <body> <div id="pelota"></div> <script src="script.js"></script> </body> </html> ``` **script.js** ```javascript // Obtener el elemento de la pelota const pelota = document.getElementById('pelota'); // Establecer las propiedades iniciales de la pelota pelota.style.top = '50px'; pelota.style.left = '50px'; pelota.style.backgroundColor = 'red'; // Variables para controlar la posición y el movimiento de la pelota let x = 50; let y = 50; let velocidadX = 2; let velocidadY = 2; let tiempo = 0; // Función para actualizar la posición de la pelota function actualizarPosicion() { // Actualizar la posición de la pelota pelota.style.top = `${y}px`; pelota.style.left = `${x}px`; // Actualizar el tiempo tiempo++; // Si la pelota ha rebasado la pantalla, cambiar la dirección if (x + 25 > window.innerWidth || x - 25 < 0) { velocidadX = -velocidadX; } if (y + 25 > window.innerHeight || y - 25 < 0) { velocidadY = -velocidadY; } // Si la pelota ha estado en la misma posición durante 10 segundos, detenerla if (tiempo > 100) { velocidadX = 0; velocidadY = 0; } // Actualizar la posición de la pelota x += velocidadX; y += velocidadY; // Llamar a la función de actualización cada 16ms (60fps) requestAnimationFrame(actualizarPosicion); } // Iniciar la actualización de la posición de la pelota actualizarPosicion(); ``` Para probar este código, crea un archivo llamado `index.html` y copia el código HTML en él. Luego, crea un archivo llamado `script.js` y copia el código JavaScript en él. Abre el archivo `index.html` en la pestaña de Chrome de tu computador y verás la pelota que se puede mover en todo el espacio de la página. Recuerda que este código utiliza la función `requestAnimationFrame` para actualizar la posición de la pelota a una velocidad de 60fps. Esto significa que la función `actualizarPosicion` se llama cada 16ms, lo que permite una animación suave y fluida.