用js的requesAnimationFrame动画做弹跳球

最新推荐文章于 2023-05-03 13:27:21 发布

sunset0827

最新推荐文章于 2023-05-03 13:27:21 发布

阅读量2.1k

点赞数

分类专栏： JS学习文章标签： js动画

本文链接：https://blog.csdn.net/Mr_Sunset/article/details/81210747

版权

JS学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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: 50px;
            height: 50px;
            background-color: skyblue;
            border-radius: 50%;
            position: absolute;
            left: 10px;
            top: 300px;
        }
    </style>
</head>
<body>
    <div id="box"></div>

<script>
    var box = document.getElementById("box");
    var xSpeed = 10;
    var ySpeed = -20;

    var boxLeft = 10;
    var boxTop = 300; 

    function update(){
        // 横坐标
        boxLeft += xSpeed;
        box.style.left = boxLeft + "px";
        // 纵坐标
        boxTop += ySpeed;

        if(boxTop>window.innerHeight-50){
            boxTop=window.innerHeight-50;
        }
        
        box.style.top = boxTop+"px";
        
        // y轴方向的运动是向下的加速运动,所以每一帧都要增加速度
        ySpeed += 1;

        
        timer = requestAnimationFrame(update);

        if(boxTop>=window.innerHeight-50){
            // cancelAnimationFrame(timer);
            ySpeed = -ySpeed*0.8;
        }
        if(boxLeft>=window.innerWidth-50 || boxLeft<0){
            xSpeed = -xSpeed;
        }
        

    }

    var timer = requestAnimationFrame(update);


    
</script>
</body>
</html>

sunset0827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js的requesAnimationFrame动画做弹跳球

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫