add raindrop background

miniprogram/components/background/raindrop/index.ts

@@ -0,0 +1,59 @@
+// components/background/raindrop/index.ts
+import Toolkit from "../../../utils/Toolkit";
+
+interface Raindrop {
+	x: number;
+	length: number;
+	speed: number;
+}
+
+Component({
+
+	data: {
+		raindrops: [] as Raindrop[],
+		timer: undefined as number | undefined,
+		docWidth: 375,
+		docHeight: 667,
+	},
+
+	methods: {
+		createRaindrop() {
+			const raindrop = {
+				x: Toolkit.random(0, this.data.docWidth),
+				length: Toolkit.random(20, 40),
+				speed: Toolkit.random(1, 2)
+			};
+			this.setData({
+				raindrops: [...this.data.raindrops, raindrop]
+			});
+		}
+	},
+	lifetimes: {
+		attached() {
+			const systemInfo = wx.getWindowInfo();
+			this.setData({
+				docWidth: systemInfo.windowWidth,
+				docHeight: systemInfo.windowHeight,
+				timer: setInterval(() => {
+					this.createRaindrop();
+					if (60 < this.data.raindrops.length) {
+						if (this.data.timer) {
+							clearInterval(this.data.timer);
+						}
+						this.setData({
+							timer: undefined
+						})
+					}
+				}, 100)
+			});
+		},
+		detached() {
+			if (this.data.timer) {
+				clearInterval(this.data.timer);
+				this.setData({
+					timer: undefined
+				})
+			}
+		}
+	}
+})