文章地址 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. 【笔记】http协议笔记

    本文是本人在复习http协议时,手动整理的资料,以备后续查阅. http(hypertext transfer protocol):超文本协议.是万维网(world wide web,www,也简称为 ...

  2. LintCode_469 等价二叉树

    题目 检查两棵二叉树是否等价.等价的意思是说,首先两棵二叉树必须拥有相同的结构,并且每个对应位置上的节点上的数都相等. 样例 1 1 / \ / \ 2 2 and 2 2 / / 4 4 就是两棵等 ...

  3. python 模块 chardet下载及介绍

    python 模块 chardet下载及介绍   在处理字符串时,常常会遇到不知道字符串是何种编码,如果不知道字符串的编码就不能将字符串转换成需要的编码.面对多种不同编码的输入方式,是否会有一种有效的 ...

  4. 电脑上做的ppt拿到别的电脑或手机上播放的时候字体错位的解决方法

    原因:字体不对!!! 比如你英文用的Calibri字体,但是手机的wps或者别的电脑上的低版本的office没有这个字体,所以就会强制转换成那里有的字体(一般是黑体),此时字体就会错位!! 不要以为那 ...

  5. 继续对dubbo源代码进行maven builder

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/enson16855/article/details/32073981 原文地址:http://dtb ...

  6. 计算机网络.{wireshark的使用实验}

    ---恢复内容开始--- 三种选择 1 2 3 端口镜像:交换机的某个端口,接受或者发送的数据给另外一个端口 ARP欺骗: ARP欺骗是利用ARP协议自身的不足进行的欺骗 1 执行ping命令, 2 ...

  7. UWP获取任意网页加载完成后的HTML

    主要思想:通过后台WebView载入指定网页,再提取出WebView中的内容 关键代码: var html = await webView.InvokeScriptAsync("eval&q ...

  8. 【水滴石穿】rn_statusbar

    先放项目地址https://github.com/hezhii/rn_statusbar 来看一下效果 咩有感觉很怎么样,看代码 根入口文件 //index.js //看代码我们知道入口是app.js ...

  9. 1.2开发文档简读，了解全貌.mp4

  10. 如何在Liferay 7中创建一个简单的JSF Portlet

    这个将在Liferay IDE 3.1 M3的发布版中提供创建的选项,但是你也可以通过命令行来创建. 1.这是Liferay JSF团队的官网:http://liferayfaces.org/ 你能在 ...