文章地址 https://www.cnblogs.com/sandraryan/

需求：生成n个小球，让他们在一个大盒子中碰壁反弹，要求小球随机颜色，大小，初始位置，运动速度。

思路分析： 创建小球随机颜色等，添加到页面中。然后让小球发生移动。

ps：计时器超级耗性能的qwq

<!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>

        .wrap {

            width: 900px;

            height: 500px;

            box-shadow: 0 0 20px black;

            margin: 50px auto;

            position: relative;

            border-radius: 8px;

        }

        .wrap div {

            border-radius: 50%;

            position: absolute;

        }

    </style>

</head>

<body>

    <!-- 放置小球的容器 -->

    <div class="wrap"></div>

    <script>

        var wrap = document.getElementsByClassName("wrap")[0];

        //封装随机数函数

        function rn(a, b) {

            return Math.round(Math.random() * (a - b) + b);

        }

        // 封装函数创建小球

        function createBall() {

            //创建元素

            var el = document.createElement("div");

            // 随机元素的颜色 大小 速度 位置

            // 随机一个宽高（元素宽高相同）

            el.w = rn(10, 30);

            el.style.width = el.w + "px";

            el.style.height = el.w + "px";

            // 随机透明度，并取小数点后一位

            //不能用之前封装的rn()，因为他四舍五入了，只能取到整数

            var op = Math.random().toFixed(1);

            el.style.backgroundColor = "rgba(" + rn(0, 255) + "," + rn(0, 255) + "," + rn(0, 255) + "," + op + ")";

            // 计算left top 可以到达的最大值

            var ml = wrap.offsetWidth - el.w;

            var mt = wrap.offsetHeight - el.w;

            // 随机生成在wrap中

            // 位置为0 到可使用的最大值

            el.style.left = rn(0, ml) + "px";

            el.style.top = rn(0, mt) + "px";

            // 如果生成的速度为0，让他直接变成1；

            // 或运算符短路操作，前一个值为0，会看后面的值能否决定结果

            // 或运算符只要有一个为真，全都为真

            el.vx = rn(-2, 3) || 1;

            el.vy = rn(-2, 3) || 1;

            //生成元素添加至父元素wrap

            wrap.appendChild(el);

        }

        // 封装函数 循环产生多个小球

        function cerateAll() {

            // 创建100个小球

            for (var i = 0; i < 100; i++) {

                createBall();

            }

        }

        cerateAll();

        // 让所有小球发生移动

        function ballMove() {

            // 获取所有小球

            var balls = document.querySelectorAll(".wrap div");

            // 添加计时器

            setInterval(function () {

                // 实现每个小球的碰壁反弹

                // 循环遍历所有小球，改变他们的left top值

                for (var i = 0; i < balls.length; i++) {

                    // 获取小球当前left top

                    // 当前dom节点的操作指针复制给b，不是传递一个值

                    var b = balls[i];

                    var l = b.offsetLeft;

                    var t = b.offsetTop;

                    // 设置碰壁条件

                    // 到达父级元素边框，改变运动方向

                    if (l <= 0 || l > wrap.offsetWidth - b.w) {

                        b.vx *= -1;

                    }

                    if (t <= 0 || t >= wrap.offsetHeight - b.w) {

                        b.vy *= -1;

                    }

                    // 在此基础上加上增量 当前的值累加速度 设置为新的left top

                    b.style.left = l + b.vx + "px";

                    b.style.top = t + b.vy + "px";

                }

            }, 50);

        }

        ballMove();

    </script>

</body>

</html>

原生js实现多个随机大小颜色位置速度小球的碰壁反弹的更多相关文章

  1. 原生js实现的一个随机颜色的简单效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  2. 原生js实现简单的随机点名系统

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. 原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测

    预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...

  4. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

  5. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  6. js随机背景颜色

    // 要求: 随机生成颜色RGB 核心点 :(0,0,0) rgb 每一组的数字取值范围是 0~255 // 需要随机生成 0~255 之间的整数 function getRandom(min, ma ...

  7. 随机生成气泡碰撞（原生js）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>随 ...

  8. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  9. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

随机推荐

  1. Primitive Topology

    原文:Primitive Topology 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article/details/78 ...

  2. 利用Factory-boy来生成实例数据

    库和版本:Faker==2.0.0factory-boy==2.12.0 官方文档:https://factoryboy.readthedocs.io/en/latest/index.html 1. ...

  3. 【CF Manthan, Codefest 17 B】Marvolo Gaunt's Ring

    [链接]h在这里写链接 [题意] 给你n个数字; 让你在其中找出三个数字i,j,k(i<=j<=k); 使得p*a[i]+q*a[j]+r*a[k]最大; [题解] /*     有一个要 ...

  4. Python 中的 map, reduce, zip, filter, lambda基本使用方法

    map(function, sequence[, sequence, ...] 该函数是对sequence中的每个成员调用一次function函数,如果参数有多个,则对每个sequence中对应的元素 ...

  5. 【Leetcode栈】有效的括号（20）

    题目 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 1,左括号必须用相同类型的右括号闭合. 2,左括号必须以正确的顺序闭合. 注意 ...

  6. FastAdmin CMS 内容管理插件标签文档

    FastAdmin CMS 内容管理插件标签文档 在CMS插件中的前端视图模板中有大量使用了自定义标签,我们在修改或制作模板的时候可以方便快捷的使用自定义标签来调用我们相关的数据. 标签库位于/add ...

  7. @codeforces - 718E@ Matvey's Birthday

    目录 @description@ @solution@ @accepted code@ @detail@ @description@ 给定一个长度为 n 的字符串 s,保证只包含前 8 个小写字母 ' ...

  8. php switch判断一个数所在的范围

    <?php header("content-type:text/html;charset=utf8"); $score=70; switch($score) { case $ ...

  9. css字体大小单位

    1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...

  10. php上传文件与图片到七牛的实例详解

    上传文件到七牛最简单的方式就是使用七牛官方最新的SDK 用composer安装PHP SDK composer require qiniu/php-sdk 上传文件到七牛 use Qiniu\Auth ...