原生JS实现小球运动案例

最新推荐文章于 2024-03-15 14:57:28 发布

二狗子的翠花

最新推荐文章于 2024-03-15 14:57:28 发布

阅读量1.2k

点赞数 4

分类专栏： JS 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Pure_White520/article/details/106367578

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、创建一个小球

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
        *{
            margin:0;
            padding:0
        }
        body{
            background-color: #ccc;
        }
        #box{
            position: absolute;
            left:0;
            top:0;
            width:150px;
            height:150px;
            background-color: #0f0;
            border-radius: 50%;
        }        
</style>
</head>
<body>
	 <div id="box"></div>
</body>
</html>

2、使小球运动起来

运动的实现方式：

css：①annimation ②transition;

JS：①请求动画帧：requestAnimationFrame() ②定时器：setTimeOut/setInterval（）；
在本次案例中用JS的第一种方法实现。

    //让小球动起来
    
   var box = document.getElementById('box'),
    speedX = 10,   //X方向的速度
    speedY = 10,   //Y方向的速度
    //获取小球距离页面顶端或左端的初始值，值为0；
    startTop = box.offsetTop,   
    startLeft = box.offsetLeft;
    run()
function run(){
    startTop += speedY;
    startLeft += speedX;
    requestAnimationFrame( run )；//
    }

每调用一次run（），此时小球距离页面top、left的距离分别会增加speedY、speedX的距离。这里用到了一个函数requestAnimationFrame（）请求动画帧，告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

3、限制小球运动的范围

小球只能在浏览器的页面内进行运动，并且会随页面的改变而更改运动路径。在让小球动起来的基础上增加限制来实现。

       </script> 
       var box = document.getElementById('box'),
        speedX = 10,   //X方向的速度
        speedY = 10,   //Y方向的速度
        //限制小球的运动范围;
        maxX = document.documentElement.clientWidth - box.offsetWidth,
        maxY = document.documentElement.clientHeight - box.offsetHeight,
        //获取小球距离页面顶端或左端的初始值，值为0；
        startTop = box.offsetTop,   
        startLeft = box.offsetLeft;
    window.onresize = function(){     //onresize自适应浏览器页面大小
        maxX = document.documentElement.clientWidth - box.offsetWidth  
        maxY = document.documentElement.clientHeight - box.offsetHeight   
        //减去小球本身的高度或宽度，否则会出现滚动条等问题。
    }
    run()
    function run(){
        startTop += speedY;
        startLeft += speedX;
        if( startTop <= 0 || startTop  >= maxY ){
            speedY = -speedY;   //到达页面底部或者顶部更改小球运动方向
            if( startTop <=0 ){  
                startTop = 0
            }else if( startTop >= maxY ){
                startTop = maxY
            }
        }

        if( startLeft<= 0 || startLeft >=maxX ){
            speedX = -speedX;//到达页面左边边界或者右边边界更改小球运动方向
            if( startLeft <= 0 ){
                startLeft = 0
            }else if( startLeft >= maxX ){
                startLeft = maxX
            }
        }
        //操作样式：
        box.style.top = startTop + 'px'
        box.style.left = startLeft + 'px'
        requestAnimationFrame( run )
    }
</script>