🚀 feat: clickBoom
This commit is contained in:
shenyu
parent
de1e586b8c
commit
9317a2d5d4
@ -98,6 +98,8 @@ darkmode: true
|
||||
|
||||
# 页面点击小红心(开启请设置为true)
|
||||
clickLove: false
|
||||
# 页面点击烟花效果(开启请设置为true)
|
||||
clickBoom: false
|
||||
|
||||
# 页面宽度自定义（不建议修改，可能造成布局混乱），article_width文章宽度，sidebar_width侧边栏宽度
|
||||
layout:
|
||||
@ -110,8 +112,8 @@ layout:
|
||||
# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
|
||||
leancloud:
|
||||
enable: true
|
||||
app_id: # Your leancloud application appid
|
||||
app_key: # Your leancloud application appkey
|
||||
app_id: #
|
||||
app_key: #
|
||||
# Valine配置
|
||||
valine:
|
||||
enable: true # 是否启用
|
||||
|
||||
@ -63,6 +63,10 @@
|
||||
<% if (theme.clickLove){ %>
|
||||
<%- js('/js/clickLove') %>
|
||||
<% } %>
|
||||
<!-- ClickBoom -->
|
||||
<% if (theme.clickBoom){ %>
|
||||
<%- js('/js/clickBoom') %>
|
||||
<% } %>
|
||||
<!-- CodeCopy -->
|
||||
<% if (theme.copy_btn == true) { %>
|
||||
<%- css('/css/clipboard') %>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<%- partial('_partial/head') %>
|
||||
|
||||
<body>
|
||||
<% if (theme.clickBoom){ %>
|
||||
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 999; pointer-events: none;"></canvas>
|
||||
<% } %>
|
||||
<div id="app">
|
||||
<main class="content on">
|
||||
<%- body %>
|
||||
|
||||
154
source/js/clickBoom.js
Normal file
154
source/js/clickBoom.js
Normal file
@ -0,0 +1,154 @@
|
||||
class Circle {
|
||||
constructor({ origin, speed, color, angle, context }) {
|
||||
this.origin = origin
|
||||
this.position = { ...this.origin }
|
||||
this.color = color
|
||||
this.speed = speed
|
||||
this.angle = angle
|
||||
this.context = context
|
||||
this.renderCount = 0
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.context.fillStyle = this.color
|
||||
this.context.beginPath()
|
||||
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
|
||||
this.context.fill()
|
||||
}
|
||||
|
||||
move() {
|
||||
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
|
||||
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
|
||||
this.renderCount++
|
||||
}
|
||||
}
|
||||
|
||||
class Boom {
|
||||
constructor ({ origin, context, circleCount = 10, area }) {
|
||||
this.origin = origin
|
||||
this.context = context
|
||||
this.circleCount = circleCount
|
||||
this.area = area
|
||||
this.stop = false
|
||||
this.circles = []
|
||||
}
|
||||
|
||||
randomArray(range) {
|
||||
const length = range.length
|
||||
const randomIndex = Math.floor(length * Math.random())
|
||||
return range[randomIndex]
|
||||
}
|
||||
|
||||
randomColor() {
|
||||
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
|
||||
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
|
||||
}
|
||||
|
||||
randomRange(start, end) {
|
||||
return (end - start) * Math.random() + start
|
||||
}
|
||||
|
||||
init() {
|
||||
for(let i = 0; i < this.circleCount; i++) {
|
||||
const circle = new Circle({
|
||||
context: this.context,
|
||||
origin: this.origin,
|
||||
color: this.randomColor(),
|
||||
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
|
||||
speed: this.randomRange(1, 6)
|
||||
})
|
||||
this.circles.push(circle)
|
||||
}
|
||||
}
|
||||
|
||||
move() {
|
||||
this.circles.forEach((circle, index) => {
|
||||
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
|
||||
return this.circles.splice(index, 1)
|
||||
}
|
||||
circle.move()
|
||||
})
|
||||
if (this.circles.length == 0) {
|
||||
this.stop = true
|
||||
}
|
||||
}
|
||||
|
||||
draw() {
|
||||
this.circles.forEach(circle => circle.draw())
|
||||
}
|
||||
}
|
||||
|
||||
class CursorSpecialEffects {
|
||||
constructor() {
|
||||
this.computerCanvas = document.createElement('canvas')
|
||||
this.renderCanvas = document.createElement('canvas')
|
||||
|
||||
this.computerContext = this.computerCanvas.getContext('2d')
|
||||
this.renderContext = this.renderCanvas.getContext('2d')
|
||||
|
||||
this.globalWidth = window.innerWidth
|
||||
this.globalHeight = window.innerHeight
|
||||
|
||||
this.booms = []
|
||||
this.running = false
|
||||
}
|
||||
|
||||
handleMouseDown(e) {
|
||||
const boom = new Boom({
|
||||
origin: { x: e.clientX, y: e.clientY },
|
||||
context: this.computerContext,
|
||||
area: {
|
||||
width: this.globalWidth,
|
||||
height: this.globalHeight
|
||||
}
|
||||
})
|
||||
boom.init()
|
||||
this.booms.push(boom)
|
||||
this.running || this.run()
|
||||
}
|
||||
|
||||
handlePageHide() {
|
||||
this.booms = []
|
||||
this.running = false
|
||||
}
|
||||
|
||||
init() {
|
||||
const style = this.renderCanvas.style
|
||||
style.position = 'fixed'
|
||||
style.top = style.left = 0
|
||||
style.zIndex = '999999999999999999999999999999999999999999'
|
||||
style.pointerEvents = 'none'
|
||||
|
||||
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
|
||||
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
|
||||
|
||||
document.body.append(this.renderCanvas)
|
||||
|
||||
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
|
||||
window.addEventListener('pagehide', this.handlePageHide.bind(this))
|
||||
}
|
||||
|
||||
run() {
|
||||
this.running = true
|
||||
if (this.booms.length == 0) {
|
||||
return this.running = false
|
||||
}
|
||||
|
||||
requestAnimationFrame(this.run.bind(this))
|
||||
|
||||
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
|
||||
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
|
||||
|
||||
this.booms.forEach((boom, index) => {
|
||||
if (boom.stop) {
|
||||
return this.booms.splice(index, 1)
|
||||
}
|
||||
boom.move()
|
||||
boom.draw()
|
||||
})
|
||||
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
|
||||
}
|
||||
}
|
||||
|
||||
const cursorSpecialEffects = new CursorSpecialEffects()
|
||||
cursorSpecialEffects.init()
|
||||
Loading…
Reference in New Issue
Block a user