黑师JS粒子类的演示

山人

根据黑师的新教程，制作一个玩玩。点击下面的方框，见证奇迹：

山人

代码：

1. <style>
   
2. #mama {
   
3.         margin: 20px auto;
   
4.         width: 760px;
   
5.         height: 400px;
   
6.         border: 1px solid gray;
   
7.         cursor: pointer;
   
8.         position: relative;
   
9. }
   
10. li-zi {
    
11.         position: absolute;
    
12.         border-radius: 50%;
    
13. }
    
14. </style>
    
15. 
    
16. <div id="mama"></div>
    
17. 
    
18. <script>
    
19. 
    
20. class Lizi {
    
21.         constructor(pa,size = 20) {
    
22.                 this.pa = pa;
    
23.                 this.size = size;
    
24.                 this.bg = 'purple';
    
25.                 this.left = 10;
    
26.                 this.top = 10;
    
27.                 this.xstep = 1;
    
28.                 this.ystep = 1;
    
29.                 this.ele = document.createElement('li-zi');
    
30.         }
    
31. 
    
32.         creating() {  
    
33.                 this.ele.style.cssText = `
    
34.                         width: ${this.size}px;
    
35.                         height: ${this.size}px;
    
36.                         left: ${this.left}px;
    
37.                         top: ${this.top}px;
    
38.                         background: ${this.bg};
    
39.                 `;
    
40.                 this.pa.appendChild(this.ele);
    
41.                 this.moving();
    
42.         }
    
43. 
    
44.         moving() {
    
45.                 this.left += this.xstep;
    
46.                 this.top += this.ystep;
    
47.                 if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) this.xstep = -this.xstep;
    
48.                 if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) this.ystep = -this.ystep;
    
49.                 this.ele.style.left = this.left + 'px';
    
50.                 this.ele.style.top = this.top + 'px';
    
51.                 requestAnimationFrame(this.moving.bind(this));
    
52.         }
    
53. }
    
54. 
    
55. let stepAr = [0.5,-0.5,1,-1,0.8,-0.8,1.2,-1.2,0.3,-0.3,1.5,-1.5]; //步幅数组
    
56. 
    
57. mama.onclick = (e) => {
    
58.         let xIdx = Math.floor(Math.random() * stepAr.length),
    
59.                 yIdx = Math.floor(Math.random() * stepAr.length);
    
60.         let lz = new Lizi(mama);
    
61.         lz.size = 4 + Math.ceil(Math.random() * 5);
    
62.         let x = e.offsetX < 1 ? 1 : e.offsetX, y = e.offsetY < 1 ? 1 : e.offsetY;
    
63.         if(x >= mama.offsetWidth - lz.size - 1) x = mama.offsetWidth - lz.size - 1;
    
64.         if(y >= mama.offsetHeight - lz.size - 1) y = mama.offsetHeight - lz.size - 1;
    
65.         lz.left = x;
    
66.         lz.top = y;
    
67.         lz.xstep = stepAr[xIdx];
    
68.         lz.ystep = stepAr[yIdx];
    
69.         lz.bg = '#' + Math.random().toString(16).substr(-6);
    
70.         lz.creating();
    
71. }
    
72. 
    
73. </script>

复制代码

山人

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

山人

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

南无月

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

南无月

这是一块神奇的画布

红影

随手点击就有粒子出来，这个太棒了。

红影

点点点，点出满屏缤纷

红影

这些粒子还有随机大小和色彩呢，真棒

樵歌

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

马黑黑

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

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

小辣椒

哇塞~一点一个粒子出来，还是彩色的