DOM案例-触壁反弹及多个小球的躁动

一、触壁反弹

预览效果：https://qianduanmao.com/demo/dom/chicun/1.html

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例-触壁反弹-前端猫</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        #root{
            position: relative;
            width: 500px;
            height: 500px;
            border:20px solid skyblue;
            margin:0 auto;
        }
        #ball{
            position: absolute;
            width: 50px;
            height: 50px;
            padding:10px;
            border:2px solid green;
            border-radius: 100px;
            background-image: url("../../../icon.png");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
   <div id="root">
       <div id="ball"></div>
   </div>
</body>
<script>
    var root = document.getElementById("root");
    var ball = document.getElementById("ball");
    var x = 0;// left值 横向的距离
    var y = 0;// top值  纵向的距离
    // left最大值
    var maxLeft = root.clientWidth - ball.offsetWidth;
    // top最大值
    var maxTop = root.clientHeight - ball.offsetHeight;
    // left移动速度,正数向右，负数向左
    var speedX = 5;
    // top移动速度，正数向下，负数向上
    var speedY = 3;
    setInterval(function (){
        x+=speedX;
        y+=speedY;
        // 横向
        if(x>maxLeft){// 限制最大值
            x=maxLeft;
            speedX = -speedX;
        }else if(x<0){// 限制最小值
            x=0;
            speedX = -speedX;
        }

        // 纵向
        if(y>maxTop){// 限制最大值
            y=maxTop;
            speedY = -speedY;
        }else if(y<0){// 限制最小值
            y=0;
            speedY = -speedY;
        }
        ball.style.left = x+"px";
        ball.style.top = y+"px";
    },30)

</script>
</html>

二、多个小球躁动

预览效果：https://qianduanmao.com/demo/dom/chicun/2.html

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例：多个小球-前端猫</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root {
            position: relative;
            width: 500px;
            height: 500px;
            border: 20px solid skyblue;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="root">
</div>
</body>
<script>
    var root = document.querySelector("#root");
    var rootClientW = root.clientWidth;
    var rootClientH = root.clientHeight;
    // 小球数量
    var ballNum = 30;

    function getRandom(min, max) {
        console.log(min, max);
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    var str = "";
    for (var i = 0; i < ballNum; i++) {
        var wh = getRandom(20, 100);
        var topX = getRandom(0, rootClientH - wh);
        var left = getRandom(0, rootClientW - wh);
        var ball = (`
                <div data-speedX="${getRandom(3, 20)}"
                    data-speedY="${getRandom(3, 20)}"
                    style="top:${topX}px;left:${left}px;
                            position: absolute;width:${wh}px;
                            height:${wh}px;border-radius:100%;
                            background:rgb(${getRandom(1, 255)},${getRandom(1, 255)},${getRandom(1, 255)})">

                </div>
        `);
        str += ball;
    }
    root.innerHTML = str;

    var balls = document.querySelectorAll("#root div");
    setInterval(function () {
        balls.forEach(function (item) {
            // item.style.left =200
            var x = item.style.left.replace("px", "") / 1;// 移除px/1
            var y = item.style.top.replace("px", "") / 1;// 移除px/1
            var maxLeft = root.clientWidth - item.offsetWidth;
            var maxTop = root.clientHeight - item.offsetHeight;
            var speedX = item.dataset.speedx / 1;
            var speedY = item.dataset.speedy / 1;
            console.log(speedX, speedY)
            x += speedX;
            y += speedY;
            // 横向
            if (x > maxLeft) {// 限制最大值
                x = maxLeft;
                item.dataset.speedx = -speedX;
            } else if (x < 0) {// 限制最小值
                x = 0;
                item.dataset.speedx = -speedX;
            }

            // 纵向
            if (y > maxTop) {// 限制最大值
                y = maxTop;
                item.dataset.speedy = -speedY;
            } else if (y < 0) {// 限制最小值
                y = 0;
                item.dataset.speedy = -speedY;
            }
            item.style.left = x + "px";
            item.style.top = y + "px";
        })
    }, 30)
</script>
</html>

DOM案例-触壁反弹及多个小球的躁动

一、触壁反弹

二、多个小球躁动

推荐阅读更多精彩内容