论坛 › 马黑黑教程专版 › JS驱动N多元素做折向运动

马黑黑 发表于 2022-7-10 19:18

JS驱动N多元素做折向运动

先上代码：
<style>
#papa {
        margin: auto;
        width: 1024px;
        height: 600px;
        box-shadow: 4px 4px 30px #000;
        position: relative;
}
.ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #111 linear-gradient(tan,purple);
        transition: all 1s;
}
</style>

<div id="papa"></div>

<script>

let all = 20; //运动元素总数
let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight; //父元素宽高
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min; //取两数间随机整数

//初始化运动元素
Array.from({length:all}).forEach((x,y) =>{
        x = document.createElement('span'); //创建span标签
        x.className = 'ball'; //css类名
        let wh = num(10,40); //元素随机尺寸(宽高一致)
        //写入 style 样式：背景、宽、高、左边值、上边值
        x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
                width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px`;
        papa.appendChild(x); //追加元素到父元素
});

let balls = document.querySelectorAll('.ball'); //获得已追加的元素操作句柄（数组）

move(); //首次运行函数：一开始就动起来

//折向运动函数
function move() {
        for(obj of balls) { //用for of 语句命令每一个元素
                let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random()); //水平位移距离：范围内随机整数
                let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());//垂直位移距离：范围内随机整数
                obj.style.left = xx + 'px'; //运动元素左边值
                obj.style.top = yy + 'px'; //运动元素右边值
        }
}

let tt = setInterval(move, 1000); //永动定时器驱动函数

</script>一点说明：所谓折向运动，说的是，运动对象移动到既定边界时硬转向。CSS里，仅一点需要说明：.ball 选择器的 transition 规范了对象在两点间移动的速率。HTML没什么可说的。JS代码中，生成N多个元素的做法只是实现形式不同与以往的方式，原理却是一样的；折向运动函数可以仔细研究，如有可能可以略加修改，为自己所用。

对象的运动效果非平滑衔接，就是说两次运动间是有停顿的。我想，JS要实现多向性的平滑运动，机制的复杂性应该不是几行代码可以处理的了的，平滑多向运动还是借助CSS的关键帧比较好，或者可以转向画布或svg。

马黑黑 发表于 2022-7-10 19:19

<style>
#papa {
        margin: auto;
        width: 740px;
        height: 600px;
        box-shadow: 4px 4px 30px #000;
        position: relative;
}
.ball {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #111 linear-gradient(tan,purple);
        transition: all 1s;
}
</style>

<div id="papa"></div>

<script>
let all = 20;
let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;

Array.from({length:all}).forEach((x,y) =>{
        x = document.createElement('span');
        x.className = 'ball';
        let wh = num(10,40);
       
        x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
                width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px`;
        papa.appendChild(x);
});
let balls = document.querySelectorAll('.ball');
move();

function move() {
        for(obj of balls) {
                let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random());
                let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());
                obj.style.left = xx + 'px';
                obj.style.top = yy + 'px';
        }
}
let tt = setInterval(move, 1000);
</script>

马黑黑 发表于 2022-7-10 19:20

本例我专门考虑了边界问题，因此，父元素的尺寸、子元素的尺寸都可以不用考虑，JS自动处理了父子元素的诸多关系。

马黑黑 发表于 2022-7-10 19:21

修改运动对象的总数，只需修改JS中的 all 变量

樵歌 发表于 2022-7-10 19:32

看似错乱，但仔细瞅都有规律可循。{:4_189:}

马黑黑 发表于 2022-7-10 19:37

樵歌 发表于 2022-7-10 19:32
看似错乱，但仔细瞅都有规律可循。

乱中有序，一般都酱紫，和抽奖差不多

红影 发表于 2022-7-10 19:46

小球的大小和颜色都是随机的，运动轨迹也随机，完全不可控的“永动定时器”呀{:4_173:}

红影 发表于 2022-7-10 19:47

这个每句都有解说，看得特别清楚。黑黑辛苦了{:4_187:}

马黑黑 发表于 2022-7-10 19:56

红影 发表于 2022-7-10 19:47
这个每句都有解说，看得特别清楚。黑黑辛苦了

这个运动方式不知道有木有用途哈

红影 发表于 2022-7-10 22:05

马黑黑 发表于 2022-7-10 19:56
这个运动方式不知道有木有用途哈

肯定会有，虽然现在还不没想好用在什么样的帖子里好{:4_173:}

马黑黑 发表于 2022-7-10 22:09

红影 发表于 2022-7-10 22:05
肯定会有，虽然现在还不没想好用在什么样的帖子里好

如果小辣椒身体正常，这个功能明天就能用上

樵歌 发表于 2022-7-11 10:57

马黑黑 发表于 2022-7-10 19:37
乱中有序，一般都酱紫，和抽奖差不多

那你切推算体彩，准中{:4_189:}

马黑黑 发表于 2022-7-11 12:11

樵歌 发表于 2022-7-11 10:57
那你切推算体彩，准中

有道理

红影 发表于 2022-7-11 14:16

马黑黑 发表于 2022-7-10 22:09
如果小辣椒身体正常，这个功能明天就能用上

那是当然，她的音画很好的，我以前只是喜欢文字{:4_173:}

马黑黑 发表于 2022-7-11 18:25

红影 发表于 2022-7-11 14:16
那是当然，她的音画很好的，我以前只是喜欢文字

为文学而建的论坛吧？之前我知道有个叫红影的办了个论坛，貌似我也匿名访问过，一看，去去，我若抛头露面了我简直就是个文盲，还是走人吧

红影 发表于 2022-7-11 19:10

马黑黑 发表于 2022-7-11 18:25
为文学而建的论坛吧？之前我知道有个叫红影的办了个论坛，貌似我也匿名访问过，一看，去去，我若抛头露面 ...

以前的论坛叫平凡人生。其实也是综合论坛啊，只是那时更喜欢玩文字类的{:4_173:}

马黑黑 发表于 2022-7-11 19:17

红影 发表于 2022-7-11 19:10
以前的论坛叫平凡人生。其实也是综合论坛啊，只是那时更喜欢玩文字类的

嗯，我想起来了，当时是谁介绍的我不记得了

红影 发表于 2022-7-11 19:53

马黑黑 发表于 2022-7-11 19:17
嗯，我想起来了，当时是谁介绍的我不记得了

要是那时候就跟黑黑学代码了，到现在岂不是学得很好了{:4_173:}

马黑黑 发表于 2022-7-11 19:54

红影 发表于 2022-7-11 19:53
要是那时候就跟黑黑学代码了，到现在岂不是学得很好了

那有可能

红影 发表于 2022-7-11 21:33

马黑黑 发表于 2022-7-11 19:54
那有可能

巨大的损失啊{:4_173:}

查看完整版本: JS驱动N多元素做折向运动