JIT
Grid - Untitled
Log in
@megabit
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.
DeepSeek V3.2 Exp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DVD Logo Bounce</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
    body {
        background-color: #000;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #dvd-logo {
        position: absolute;
        width: 120px;
        height: 60px;
        background-color: #ff0000;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        border-radius: 4px;
    }
</style>
</head> <body> <div id="dvd-logo">DVD</div> 
<script>
    const dvdLogo = document.getElementById('dvd-logo');
    let x = 0;
    let y = 0;
    let dx = 2;
    let dy = 2;
    let speed = 2;

    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function updatePosition() {
        const maxX = window.innerWidth - dvdLogo.offsetWidth;
        const maxY = window.innerHeight - dvdLogo.offsetHeight;

        x += dx;
        y += dy;

        let collision = false;

        if (x <= 0) {
            x = 0;
            dx = speed;
            collision = true;
        } else if (x >= maxX) {
            x = maxX;
            dx = -speed;
            collision = true;
        }

        if (y <= 0) {
            y = 0;
            dy = speed;
            collision = true;
        } else if (y >= maxY) {
            y = maxY;
            dy = -speed;
            collision = true;
        }

        if (collision) {
            dvdLogo.style.backgroundColor = getRandomColor();
        }

        dvdLogo.style.left = x + 'px';
        dvdLogo.style.top = y + 'px';

        requestAnimationFrame(updatePosition);
    }

    function handleResize() {
        const maxX = window.innerWidth - dvdLogo.offsetWidth;
        const maxY = window.innerHeight - dvdLogo.offsetHeight;
        
        if (x > maxX) x = maxX;
        if (y > maxY) y = maxY;
    }

    window.addEventListener('resize', handleResize);
    
    // Start the animation
    updatePosition();
</script>
</body> </html>
Updated files
v1