aleks/hexo-theme-ayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🚀 feat: clickBoom

Browse Source
This commit is contained in:
shenyu 2020-05-23 06:45:12 +08:00
parent de1e586b8c
commit 9317a2d5d4
4 changed files with 165 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_config.yml
View File

@ -98,6 +98,8 @@ darkmode: true
# 页面点击小红心(开启请设置为true) # 页面点击小红心(开启请设置为true)
clickLove: false clickLove: false
# 页面点击烟花效果(开启请设置为true)
clickBoom: false
# 页面宽度自定义（不建议修改，可能造成布局混乱），article_width文章宽度，sidebar_width侧边栏宽度 # 页面宽度自定义（不建议修改，可能造成布局混乱），article_width文章宽度，sidebar_width侧边栏宽度
layout: layout:
@ -110,8 +112,8 @@ layout:
# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可 # 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
leancloud: leancloud:
enable: true enable: true
app_id: # Your leancloud application appid app_id: #
app_key: # Your leancloud application appkey app_key: #
# Valine配置 # Valine配置
valine: valine:
enable: true # 是否启用 enable: true # 是否启用

4
layout/_partial/after-footer.ejs
View File

@ -63,6 +63,10 @@
<% if (theme.clickLove){ %> <% if (theme.clickLove){ %>
<%- js('/js/clickLove') %> <%- js('/js/clickLove') %>
<% } %> <% } %>
<!-- ClickBoom -->
<% if (theme.clickBoom){ %>
<%- js('/js/clickBoom') %>
<% } %>
<!-- CodeCopy --> <!-- CodeCopy -->
<% if (theme.copy_btn == true) { %> <% if (theme.copy_btn == true) { %>
<%- css('/css/clipboard') %> <%- css('/css/clipboard') %>

3
layout/layout.ejs
View File

@ -1,6 +1,9 @@
<%- partial('_partial/head') %> <%- partial('_partial/head') %>
<body> <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"> <div id="app">
<main class="content on"> <main class="content on">
<%- body %> <%- body %>

154
source/js/clickBoom.js Normal file
View 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()