屏保：碰撞的小球

Tag: 动画设计
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>碰撞的小球</title>
        <style>
            body{
                margin: 0;
                width: 100%;
                height: 100%;
                position: relative;
            }

            img{
                position: absolute;
            }
        </style>
    </head>
    <body>
        <img id="earth" src="earth.png" alt="这是个小球">

        <script>
        var pointX=0;
        var pointY=0;

        var speedX=4;
        var speedY=6;

        function move(){
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;

            var img=document.getElementById("earth");

            if(pointY>=h-64)
            {
                speedY=-3;
            }

            if(pointX>=w-64)
            {
                speedX=-2;
            }

            if(pointY<=0)
            {
                speedY=3;
            }

            if(pointX<=0)
            {
                speedX=2;
            }

            pointX+=speedX;
            pointY+=speedY;

            img.style.left=pointX +"px";
            img.style.top=pointY+"px";
        }

        setInterval(move,0.01);

        </script>
        
    </body>
    </html>
最新发布代码

TA发布的代码
