碰壁反弹

最新推荐文章于 2022-10-18 09:40:55 发布

werch

最新推荐文章于 2022-10-18 09:40:55 发布

阅读量248

点赞数 1

分类专栏： js js 小案例

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115450637

版权

JavaScript 动画碰撞检测反弹效果 HTML5

关键词由CSDN通过智能技术生成

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>碰壁反弹</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wp {
            width: 1000px;
            height: 600px;
            position: relative;
            margin: 10px auto 0;
            border: 1px #f00 solid;
        }

        #ball {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #04BE02;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="wp">
        <div id="ball"></div>
    </div>
</body>

</html>
<script type="text/javascript">
    function rand(m, n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }
    var ball = document.getElementById("ball");
    //设置小球的出现位置，水平方向最大960，垂直方向最大560
    var l = rand(0, 960);
    var t = rand(0, 560);
    ball.style.left = l + 'px';
    ball.style.top = t + 'px';

    /*
    碰壁反弹，实质上就是根据left和top临界值，设置改变方向，再结合计时器进行操作
    */
    var timmer;
    var xDur = true; //球向右移动
    var yDur = true; //球向下移动
    /*
    思路: 使用 xDur 和 yDur 来确定小球在x轴和y轴移动的方向，使用l和t来设置小球的left和top值，只有小球到达临界值的时候， 才会改变方向，改变方向就是改变 xDur 和 yDur的布尔值
    */
    timmer = setInterval(function () {
        // 判断x轴方向
        if (l >= 960) {
            xDur = false;
        }
        if (l <= 0) {
            xDur = true;
        }

        // 判断y轴方向
        if (t >= 560) {
            yDur = false;
        }
        if (t <= 0) {
            yDur = true;
        }

        xDur ? l++ : l--;
        yDur ? t++ : t--;

        /* 
        // 向右运动
        if(xDur){
            l++;
        }
        // 向左运动
        if(!xDur){
                  l--;
        }
        // 向下运动
        if(yDur){
                 t++;
        }
        // 向上运动
        if(!yDur){
           t--;
        } */
        ball.style.left = l + 'px';
        ball.style.top = t + 'px';
    }, 10);

</script>

werch

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
碰壁反弹

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> * { margin: 0; padding: 0; } ul,li { list-style-type: none; } .pan { width:600px; he
复制链接

扫一扫

专栏目录