JIT
Grid - Untitled
Write a script for the classic "DVD Logo" bounce animation. A rectangle must move diagonally, bounce off the viewport edges, and change its color to a random value upon every collision.
<html> <head> <title>DVD Bounce Animation</title> <style> body { margin: 0; overflow: hidden; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background-color: black; } #logo { position: absolute; width: 13vw; height: 6.5vw; background-color: #ff0000; display: flex; justify-content: center; align-items: center; color: white; font-family: sans-serif; font-size: 3vw; font-weight: bold; user-select: none; } </style> </head> <body> <div id="logo">DVD</div> <script> let logo = document.getElementById('logo'); let x = 0; let y = 0; let dx = 2; let dy = 2;

function randomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return rgb(${r}, ${g}, ${b}); }

function animate() { const vw = window.innerWidth; const vh = window.innerHeight; const lw = logo.offsetWidth; const lh = logo.offsetHeight;

x += dx; y += dy;

let collided = false;

if (x + lw >= vw || x <= 0) { dx = -dx; collided = true; } if (y + lh >= vh || y <= 0) { dy = -dy; collided = true; }

if (collided) { logo.style.backgroundColor = randomColor(); }

logo.style.left = ${x}px; logo.style.top = ${y}px;

requestAnimationFrame(animate); }

animate(); </script>

</body> </html>*
Updated files
v1