文章地址 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. js中的深拷贝和浅拷贝2

    所谓 深浅拷贝: 对于仅仅是复制了引用(地址),换句话说,复制了之后,原来的变量和新的变量指向同一个东西,彼此之间的操作会互相影响,为 浅拷贝. 而如果是在堆中重新分配内存,拥有不同的地址,但是值是一 ...

  2. Django 用 userena 做用户注册验证登陆

    django-admin startproject userena2 cd userena2python manage.py startapp accounts vim userena2/settin ...

  3. WPF快速入门系列(6)—— WPF资源和样式

    一.引言 WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用.而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一样,尽管我们可以在每个控件中定义格式,但是如果 ...

  4. oracle包头包体

    补充说明:包头和包体可以以java的接口来理解,包头像java的接口,包体像java接口的实现类. 一 包的组成 包头(package):包头部分申明包内数据类型,常量,变量,游标,子程序和异常错误处 ...

  5. java 3类的继承

    模板类 泛型程序设计方法 类的组合 类的继承 java只有单继承 隐藏和覆盖 用super.x调用 访问静态属性 静态属性不继承 静态成员只有一个,不会有副本 静态成员只有一个所有的超类和子类 方法的 ...

  6. 【模板】树的重心 洛谷P1364 医院设置

    P1364 医院设置 题目描述 设有一棵二叉树,如图: 其中,圈中的数字表示结点中居民的人口.圈边上数字表示结点编号,现在要求在某个结点上建立一个医院,使所有居民所走的路程之和为最小,同时约定,相邻接 ...

  7. SQLServer —— 视图

    一.视图的概念 是存储在服务器端的一个查询块,是一张虚拟表. 表示一张表的部分数据或多张表的综合数据. 其结构和数据是建立在对表的查询基础上. 视图的使用,跟对普通的表的查询使用完全一样. 二.视图中 ...

  8. Directx11教程(16) D3D11管线(5)

    原文:Directx11教程(16) D3D11管线(5) 本章我们学习VS中具体做些什么事情? 首先再看看我们的VS shader代码: Clolor.vs - PixelInputType Col ...

  9. Directx11 教程(1) 基本的windows应用程序框架(1)

    原文:Directx11 教程(1) 基本的windows应用程序框架(1)        在vs2010中,建立一个新的win32工程,名字是: myTutorialD3D11, 注意:同时勾选Cr ...

  10. 洛谷P2062 分队问题

      这是一道普及/提高- 然后你懂的,贪心扫一遍就可以了. 不懂提交人数那么少. //Serene #include<algorithm> #include<iostream> ...