https://102456.xyz/js/boom.js

1//鼠标点击特效
2class Circle {
3    constructor({ origin, speed, color, angle, context }) {
4        this.origin = origin
5        this.position = { ...this.origin }
6        this.color = color
7        this.speed = speed
8        this.angle = angle
9        this.context = context
10        this.renderCount = 0
11    }
12 
13    draw() {
14        this.context.fillStyle = this.color
15        this.context.beginPath()
16        this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
17        this.context.fill()
18    }
19 
20    move() {
21        this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
22        this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
23        this.renderCount++
24    }
25}
26 
27class Boom {
28    constructor({ origin, context, circleCount = 10, area }) {
29        this.origin = origin
30        this.context = context
31        this.circleCount = circleCount
32        this.area = area
33        this.stop = false
34        this.circles = []
35    }
36 
37    randomArray(range) {
38        const length = range.length
39        const randomIndex = Math.floor(length * Math.random())
40        return range[randomIndex]
41    }
42 
43    randomColor() {
44        const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
45        return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
46    }
47 
48    randomRange(start, end) {
49        return (end - start) * Math.random() + start
50    }
51 
52    init() {
53        for (let i = 0; i < this.circleCount; i++) {
54            const circle = new Circle({
55                context: this.context,
56                origin: this.origin,
57                color: this.randomColor(),
58                angle: this.randomRange(Math.PI - 1, Math.PI + 1),
59                speed: this.randomRange(1, 6)
60            })
61            this.circles.push(circle)
62        }
63    }
64 
65    move() {
66        this.circles.forEach((circle, index) => {
67            if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
68                return this.circles.splice(index, 1)
69            }
70            circle.move()
71        })
72        if (this.circles.length == 0) {
73            this.stop = true
74        }
75    }
76 
77    draw() {
78        this.circles.forEach(circle => circle.draw())
79    }
80}
81 
82class CursorSpecialEffects {
83    constructor() {
84        this.computerCanvas = document.createElement('canvas')
85        this.renderCanvas = document.createElement('canvas')
86 
87        this.computerContext = this.computerCanvas.getContext('2d')
88        this.renderContext = this.renderCanvas.getContext('2d')
89 
90        this.globalWidth = window.innerWidth
91        this.globalHeight = window.innerHeight
92 
93        this.booms = []
94        this.running = false
95    }
96 
97    handleMouseDown(e) {
98        const boom = new Boom({
99            origin: { x: e.clientX, y: e.clientY },
100            context: this.computerContext,
101            area: {
102                width: this.globalWidth,
103                height: this.globalHeight
104            }
105        })
106        boom.init()
107        this.booms.push(boom)
108        this.running || this.run()
109    }
110 
111    handlePageHide() {
112        this.booms = []
113        this.running = false
114    }
115 
116    init() {
117        const style = this.renderCanvas.style
118        style.position = 'fixed'
119        style.top = style.left = 0
120        style.zIndex = '999999999999999999999999999999999999999999'
121        style.pointerEvents = 'none'
122 
123        style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
124        style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
125 
126        document.body.append(this.renderCanvas)
127 
128        window.addEventListener('mousedown', this.handleMouseDown.bind(this))
129        window.addEventListener('pagehide', this.handlePageHide.bind(this))
130    }
131 
132    run() {
133        this.running = true
134        if (this.booms.length == 0) {
135            return this.running = false
136        }
137 
138        requestAnimationFrame(this.run.bind(this))
139 
140        this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
141        this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
142 

143        this.booms.forEach((boom, index) => {
144            if (boom.stop) {
145                return this.booms.splice(index, 1)
146            }
147            boom.move()
148            boom.draw()
149        })
150        this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
151    }
152}
153 
154const cursorSpecialEffects = new CursorSpecialEffects()
155cursorSpecialEffects.init()