js之小球落下重力回弹抛物线效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width:800px;height: 500px;border: solid 1px black;margin: 20px auto;position: relative;}
        .box div{width:100px;height:100px;background: red;border-radius: 50%;position: absolute;left: 0;top:0;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
<script>
    var div = document.querySelector(".box div");

    // 计时器
    var t;
    // 底部目标
    var target = 400;
    // 垂直步长
    var speed = 2;

    // 水平步长
    var speedL = 20;
    // 右边的目标
    var targetR = 700;

    document.onclick = function(){
        clearInterval(t);
        t = setInterval(() => {
            // 重力加速
            speed++;

            // 是否到底
            if(target - div.offsetTop < speed){
                div.style.top = target + "px";
                // 步长取反，实现回弹
                speed = -speed * 0.9;
                // 步长小于1，衰减到下限，可以停止计时器了
                if(Math.abs(speed) < 1){
                    clearInterval(t)
                }
            }else{
                div.style.top = div.offsetTop + speed + "px";
            }

            // 右边目标判断
            if(targetR - div.offsetLeft < speedL){
                div.style.left = targetR + "px"
                // 步长取反，实现回弹
                speedL = -speedL;
                    // 当前案例，水平的移动应根据垂直是否停止而决定
            }else if(Math.abs(speed) >= 1){
                div.style.left = div.offsetLeft + speedL/2 + "px";
            }
            
            // 左边步长判断
            if(div.offsetLeft < 0){
                div.style.left = 0;
                // 步长取反，实现回弹
                speedL = -speedL;
                    // 当前案例，水平的移动应根据垂直是否停止而决定
            }else if(Math.abs(speed) >= 1){
                div.style.left = div.offsetLeft + speedL/2 + "px";
            }
            // console.log(speed);
        }, 30);
    }
</script>
</html>