论坛 › 马黑黑教程专版 › 黑师JS粒子类的演示

山人 发表于 2023-7-7 19:52

黑师JS粒子类的演示

<style>
#mama {
        margin: 20px auto;
        width: 760px;
        height: 400px;
        border: 1px solid gray;
        cursor: pointer;
        position: relative;
}
li-zi {
        position: absolute;
        border-radius: 50%;
}
</style>

<p>根据黑师的新教程，制作一个玩玩。点击下面的方框，见证奇迹：<br><br></p>
<div id="mama"></div>

<script>

class Lizi {
        constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.bg = 'purple';
                this.left = 10;
                this.top = 10;
                this.xstep = 1;
                this.ystep = 1;
                this.ele = document.createElement('li-zi');
        }

        creating() {
                this.ele.style.cssText = `
                        width: ${this.size}px;
                        height: ${this.size}px;
                        left: ${this.left}px;
                        top: ${this.top}px;
                        background: ${this.bg};
                `;
                this.pa.appendChild(this.ele);
                this.moving();
        }

        moving() {
                this.left += this.xstep;
                this.top += this.ystep;
                if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) this.xstep = -this.xstep;
                if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) this.ystep = -this.ystep;
                this.ele.style.left = this.left + 'px';
                this.ele.style.top = this.top + 'px';
                requestAnimationFrame(this.moving.bind(this));
        }
}

let stepAr = ; //步幅数组

mama.onclick = (e) => {
        let xIdx = Math.floor(Math.random() * stepAr.length),
                yIdx = Math.floor(Math.random() * stepAr.length);
        let lz = new Lizi(mama);
        lz.size = 4 + Math.ceil(Math.random() * 5);
        let x = e.offsetX < 1 ? 1 : e.offsetX, y = e.offsetY < 1 ? 1 : e.offsetY;
        if(x >= mama.offsetWidth - lz.size - 1) x = mama.offsetWidth - lz.size - 1;
        if(y >= mama.offsetHeight - lz.size - 1) y = mama.offsetHeight - lz.size - 1;
        lz.left = x;
        lz.top = y;
        lz.xstep = stepAr;
        lz.ystep = stepAr;
        lz.bg = '#' + Math.random().toString(16).substr(-6);
        lz.creating();
}

</script>

山人 发表于 2023-7-7 19:54

代码：<style>
#mama {
        margin: 20px auto;
        width: 760px;
        height: 400px;
        border: 1px solid gray;
        cursor: pointer;
        position: relative;
}
li-zi {
        position: absolute;
        border-radius: 50%;
}
</style>

<div id="mama"></div>

<script>

class Lizi {
        constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.bg = 'purple';
                this.left = 10;
                this.top = 10;
                this.xstep = 1;
                this.ystep = 1;
                this.ele = document.createElement('li-zi');
        }

        creating() {
                this.ele.style.cssText = `
                        width: ${this.size}px;
                        height: ${this.size}px;
                        left: ${this.left}px;
                        top: ${this.top}px;
                        background: ${this.bg};
                `;
                this.pa.appendChild(this.ele);
                this.moving();
        }

        moving() {
                this.left += this.xstep;
                this.top += this.ystep;
                if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) this.xstep = -this.xstep;
                if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) this.ystep = -this.ystep;
                this.ele.style.left = this.left + 'px';
                this.ele.style.top = this.top + 'px';
                requestAnimationFrame(this.moving.bind(this));
        }
}

let stepAr = ; //步幅数组

mama.onclick = (e) => {
        let xIdx = Math.floor(Math.random() * stepAr.length),
                yIdx = Math.floor(Math.random() * stepAr.length);
        let lz = new Lizi(mama);
        lz.size = 4 + Math.ceil(Math.random() * 5);
        let x = e.offsetX < 1 ? 1 : e.offsetX, y = e.offsetY < 1 ? 1 : e.offsetY;
        if(x >= mama.offsetWidth - lz.size - 1) x = mama.offsetWidth - lz.size - 1;
        if(y >= mama.offsetHeight - lz.size - 1) y = mama.offsetHeight - lz.size - 1;
        lz.left = x;
        lz.top = y;
        lz.xstep = stepAr;
        lz.ystep = stepAr;
        lz.bg = '#' + Math.random().toString(16).substr(-6);
        lz.creating();
}

</script>

山人 发表于 2023-7-7 19:58

当点击的正好是一个粒子，则新生的粒子在方框的左上角出现。没有做这个处理机制，但可以处理。

山人 发表于 2023-7-7 19:59

能产生多少个粒子没有做限制，理论上可以无限生成，不过需要考虑浏览器的承载能力以及计算机的内存

南无月 发表于 2023-7-7 20:47

各种不同颜色不同大小不同位置的粒子 就这么被点出来了。。。{:4_199:}

南无月 发表于 2023-7-7 20:48

这是一块神奇的画布{:4_199:}

红影 发表于 2023-7-7 20:53

随手点击就有粒子出来，这个太棒了。{:4_199:}

红影 发表于 2023-7-7 20:54

点点点，点出满屏缤纷{:4_187:}

红影 发表于 2023-7-7 20:55

这些粒子还有随机大小和色彩呢，真棒{:4_199:}

醉美水芙蓉 发表于 2023-7-7 21:04

樵歌 发表于 2023-7-7 21:21

好一通乱点，这些粒子各自在不同的层面空间远行，我观察了一会，没有发现碰撞的。牛。。。。{:4_189:}

马黑黑 发表于 2023-7-7 21:41

樵歌 发表于 2023-7-7 21:21
好一通乱点，这些粒子各自在不同的层面空间远行，我观察了一会，没有发现碰撞的。牛。。。。

在水平面上，实际上是有碰撞的

小辣椒 发表于 2023-7-7 22:56

哇塞~一点一个粒子出来，还是彩色的{:4_178:}

查看完整版本: 黑师JS粒子类的演示