碰撞的小球（注释版）

Tag: 动画设计
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>碰撞的地球</title>

    <style>
        body{
            margin: 0;
            /*告诉body它的宽高和当前浏览器宽高一样，且是动态的*/
            width:100%;
            height:100%;
            position: relative;
        }

        img{
            position: absolute;
            /*这是一个假设的起始位置
            top:100px;*/
        }
    </style>
</head>
<body>
    <img id="earth" src="earth.png" alt="这是个小球">

    <script>
    // 小球的坐标位置
    var pointX =0;
    var pointY =0;

    // 设置小球两个方向的增量(X Y方向)
    var speedX =4;
    var speedY =6;

//  function 功能，作用; 应变量，函数
    function move(){
        // 获取屏幕的宽w和高h   client客户端 document沙盒 element元素
         var w = document.documentElement.clientWidth;
        console.log(w);
        var h = document.documentElement.clientHeight;
        console.log(h);
        // 获取小球
        var img=document.getElementById("earth");
        // console.log(img);

        if(pointY>=h-64)
        {
            // console.log("到达底部");
            speedY=-3;
        }
// pointY Y轴上的移动距离 pointX X轴上的移动距离
        if(pointY<=0)
        {
            speedY=3;
        }

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

        if(pointX<=0)
        {
            speedX=2;
        }
        // 给小球增量
        pointX+=speedX;
        pointY+=speedY;
        // 修改小球的位置
        img.style.left=pointX +"px";
        // console.log(img.style.left);
        img.style.top=pointY +"px";
    }
    // 一毫秒刷新一次
    setInterval(move,0.01);
    </script>

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

TA发布的代码
