最简单的JS实现小球运动

最新推荐文章于 2024-07-24 16:53:23 发布

IInit

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量2.9k

点赞数 4

分类专栏： Html练习文章标签： js html css3

本文链接：https://blog.csdn.net/qq_33768121/article/details/90599981

版权

Html练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS-小球运动</title>
    <style>
        .ball {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, #fff, #fff600);
            border-radius: 50%;
        }
    </style>
</head>
<body>
<!-- <div class="ball"></div> -->
<script>
    // 创建[5,20）个小球
    var mdAttr = document.createDocumentFragment();
    var OBall = [];//小球对象数组
    for (var i = 0; i < random(5,20); i++) {
        OBall[i] = document.createElement("div");
        OBall[i].setAttribute("class", "ball");

        var cirR = random(30,50);//小球半径
        OBall[i].style.width = cirR * 2 + "px";
        OBall[i].style.height = cirR * 2 + "px";
        OBall[i].style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
        mdAttr.appendChild(OBall[i]);

        OBall[i].startX = random(1,10);//初始位置X
        OBall[i].startY = random(1,10);//初始位置Y
        OBall[i].Vx = random(3,10);//水平增加距离
        OBall[i].Vy = random(3,10);//垂直增加距离
    }
    document.body.appendChild(mdAttr);

    //获取浏览器窗口宽高
    var W,H;
    window.onresize = (function(){
        W = window.innerWidth;
        H = window.innerHeight;
    })();

    //运动
    ~function fn() {
        OBall.forEach(function (ball) {
            var MaxH = H - ball.offsetHeight,//获取小球位置的最大值，以免超过边界
                MaxW = W - ball.offsetWidth;
            ball.startX += ball.Vx;//改变小球位置
            ball.startY += ball.Vy;
            if(ball.startX >= MaxW || ball.startX <=0){//若小球位置超出最大值和最小值就改变方向
                ball.Vx *= -1;
                ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
                ball.startX = Math.max(0,ball.startX);
                ball.startX = Math.min(ball.startX,MaxW);
            }
            if(ball.startY >= MaxH || ball.startY <=0){
                ball.Vy *= -1;
                ball.style.background = "radial-gradient(circle," + randomColor() + "," + randomColor() + ")";
                ball.startY = Math.max(0,ball.startY);
                ball.startY = Math.min(ball.startY,MaxW);
            }
            ball.style.left = ball.startX + "px";//设置小球当前位置
            ball.style.top = ball.startY + "px";
        });
        requestAnimationFrame(fn);//循环
    }();

    //颜色随机
    function randomColor() {
        var r = Math.floor(Math.random() * 256),
            g = Math.floor(Math.random() * 256),
            b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    //取[min,max）之间的随机值
    function random(min,max){
        return Math.random(max-min)+min;
    }
</script>
</body>
</html>

IInit

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
最简单的JS实现小球运动

html最简单的小球运动<!doctype html><html><head> <meta charset="utf-8"> <title>JS-小球运动</title> <style> .ball { position: absolute;...
复制链接

扫一扫