文章地址 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. 解决git push、pull时总是需要你输入用户名和密码

    git config --global credential.helper store之后再次执行git push 或者git pull这时候还需要输入用户名和密码 下次就不需要了

  2. Django静态文件以及模板文件的配置 jQuery v1.12.4

    1.配置模板的路径 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os. ...

  3. 学习笔记(1)---matlab中常见函数解析

    一.fscanf函数 matlab中函数fscanf在文件读取方面的实例如下: 从文件中有格式地读数据 fscanf 语法1:[a,count]=fscanf(fid,format,size) 根据指 ...

  4. SimpleDateFormat 以及java8 - DateTimeFormatter

    https://www.cnblogs.com/zhisheng/p/9206758.html 在看的过程中有这么一条: [强制]SimpleDateFormat 是线程不安全的类,一般不要定义为 s ...

  5. php封装的smarty类实例是怎样

    * @link http://www.smarty.net/* @copyright 2008 New Digital Group, Inc.* @author Monte Ohrt <mont ...

  6. CMD格式数据表输出语句

    mysql --default-character-set=latin1 -uroot -p

  7. Net Transport

    在调用第三方请求时,正确使用Client也不是一件非常容易的事. 下面是截取的一段描述,建议Client或Transport在整个服务期间最好是全局单例的,Transport本身会维护连接的状态,而且 ...

  8. Oracle基础知识点——Oracle常用权限理解：SYSDBA、SYSOPER、Normal、dba、connect、resource

    权限介绍 系统权限 含义:系统规定用户使用数据库的权限,系统权限是针对用户对数据库的操作而言(登录数据库:读取数据表.视图:删除数据库).它只是概念上的role,只是一种登录认证时的身份标识而已. S ...

  9. 大话鸿蒙操作系统（一）-- 先聊聊 Fuchsia OS

    大话鸿蒙操作系统(一) 第一篇先不聊鸿蒙操作系统,聊聊 Google 的新系统 Fuchsia OS. 先看看 Fuchsia OS 介绍. 为什么 Google 要造新的 Fuchsia OS 操作 ...

  10. BZOJ 1500 洛谷2042维护序列题解

    BZ链接 洛谷链接 这道题真是丧心病狂.... 应该很容易就可以看出做法,但是写代码写的....... 思路很简单,用一个平衡树维护一下所有的操作就好了,重点讲解一下代码的细节 首先如果按照常规写法的 ...