xuyue/OJ2
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(做对了): 换了十种烟花：齐射、彩虹喷泉、螺旋上升、风火轮、炸出对勾和爱心……每次随机放一种；烟花盖在点评弹窗上面接着放，不再后半段被遮罩挡住

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed 2026-10-14 13:12:21 +08:00
1 parent cff989bf19
commit 655af07ca7
1 file changed
+361 -279
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/oj/problem/composables/useFireworks.ts
+361 -279
View File
@@ -53,31 +53,90 @@ function loadEmojiShapes(): Promise<confetti.Shape[]> {
return emojiShapesPromise
}
const COLORS = {
green: "#18a058",
mint: "#2cc27a",
gold: "#f0a020",
lightGold: "#ffd36b",
orange: "#f06a1a",
pink: "#e8457f",
lightPink: "#ff7aa8",
blue: "#2080f0",
purple: "#7d50e8",
silver: "#8f99aa",
}
const PALETTES = [
[COLORS.green, COLORS.gold, COLORS.blue, COLORS.pink],
[COLORS.gold, COLORS.orange, COLORS.pink],
[COLORS.blue, COLORS.silver, COLORS.purple],
[COLORS.pink, COLORS.gold, COLORS.mint],
]
const RAINBOW = [COLORS.pink, COLORS.orange, COLORS.gold, COLORS.green, COLORS.blue, COLORS.purple]
/**
* 盖在点评弹窗上面放：通过之后 1.5 秒点评弹窗就出来了，这十种要放 2～3 秒，
* 默认的 zIndex 100 在 Naive 弹层（2000 起）底下，后半段会被遮罩挡住。
* 画布本身 pointer-events: none，不挡点评的点击。
*/
const Z_INDEX = 3000
function pick<T>(list: T[]): T {
return list[Math.floor(Math.random() * list.length)]
}
// 对勾、爱心当粒子形状。matrix 直接给：不给的话 shapeFromPath 要扫 1000×1000 个点去量边界。
// 运行时它要的是数组（拿去 new DOMMatrix），类型声明写成了 DOMMatrix，只好转一下
let pathShapes: { check: confetti.Shape; heart: confetti.Shape } | null = null
function loadPathShapes() {
if (!pathShapes) {
const matrix = [0.5, 0, 0, 0.5, -5, -5] as unknown as DOMMatrix
pathShapes = {
check: confetti.shapeFromPath({ path: "M1 11 L4 8 L8 12 L16 3 L19 6 L8 17 Z", matrix }),
heart: confetti.shapeFromPath({
path: "M10 18 C2 12 0 7 3 4 C6 1 9 3 10 5 C11 3 14 1 17 4 C20 7 18 12 10 18 Z",
matrix,
}),
}
}
return pathShapes
}
/**
* 随机烟花效果 Composable
* 提供10种不同风格的烟花庆祝效果
* 十种彩纸风格的烟花，每次随机放一种（设计稿「做对了的庆祝」右边那块画板）
*/
export function useFireworks() {
// 提前预加载表情包位图，避免首次触发效果8时出现解码延迟
// 提前预加载表情包位图，避免首次触发「表情包烟花」时出现解码延迟
loadEmojiShapes()
// 动画期间创建的定时器，组件卸载时统一清理，避免离开页面后动画继续
const timers = new Set<ReturnType<typeof setTimeout>>()
let disposed = false
function stopTimer(id: ReturnType<typeof setTimeout>) {
clearInterval(id)
timers.delete(id)
}
function runLater(fn: () => void, ms: number) {
const id = setTimeout(() => {
timers.delete(id)
fn()
if (!disposed) fn()
}, ms)
timers.add(id)
}
/** 每 16ms 调一次 fn(进度 0..1)，放满 ms 之后调 end */
function every(ms: number, fn: (progress: number) => void, end?: () => void) {
const start = performance.now()
const id = setInterval(() => {
const progress = Math.min(1, (performance.now() - start) / ms)
fn(progress)
if (progress >= 1) {
clearInterval(id)
timers.delete(id)
end?.()
}
}, 16)
timers.add(id)
}
if (getCurrentScope()) {
onScopeDispose(() => {
disposed = true
@@ -86,281 +145,304 @@ export function useFireworks() {
})
}
function fire(options: confetti.Options) {
confetti({ zIndex: Z_INDEX, ...options })
}
/** 没有真火箭：沿上升路线一路撒往下掉的小火星，当作尾焰。x0 → x、从屏幕底到 y */
function rocket(x0: number, x: number, y: number, then: () => void) {
every(
380,
(progress) => {
const eased = 1 - Math.pow(1 - progress, 2.2)
fire({
particleCount: 2,
angle: 270,
spread: 40,
startVelocity: 3,
gravity: 0.5,
decay: 0.9,
ticks: 22,
scalar: 0.45,
flat: true,
shapes: ["circle"],
colors: [COLORS.gold, COLORS.lightGold],
origin: { x: x0 + (x - x0) * eased, y: 1.02 - (1.02 - y) * eased },
})
},
then,
)
}
/** 炸开：一大把，60ms 后再补一小把，看起来厚一点 */
function burst(x: number, y: number, colors: string[], size = 1) {
const base: confetti.Options = {
spread: 360,
decay: 0.92,
gravity: 0.55,
flat: true,
shapes: ["circle"],
colors,
origin: { x, y },
}
fire({
...base,
particleCount: Math.round(70 * size),
startVelocity: 26 * size,
ticks: 80,
scalar: 0.75,
})
runLater(
() =>
fire({
...base,
particleCount: Math.round(40 * size),
startVelocity: 18 * size,
ticks: 70,
scalar: 0.55,
}),
60,
)
}
/** 升一发再炸开。x0 不给就从正下方附近升 */
function shell(x: number, y: number, colors: string[], size = 1, x0?: number) {
rocket(x0 ?? x + (Math.random() - 0.5) * 0.04, x, y, () => burst(x, y, colors, size))
}
const fireworkTypes = [
// 效果1: 经典烟花秀 —— 左右两边轮流升起 7 发
() => {
for (let i = 0; i < 7; i++) {
runLater(() => {
const left = i % 2 === 0
shell(
left ? 0.08 + Math.random() * 0.3 : 0.62 + Math.random() * 0.3,
0.14 + Math.random() * 0.26,
pick(PALETTES),
0.9 + Math.random() * 0.3,
)
}, i * 240)
}
},
// 效果2: 星星雨 —— 从顶上落下一片星星
() => {
every(1200, () => {
fire({
particleCount: 2,
angle: 270,
spread: 20,
startVelocity: 8,
gravity: 0.7,
decay: 0.97,
ticks: 180,
scalar: 1.1,
shapes: ["star"],
colors: [COLORS.gold, COLORS.gold, COLORS.pink, COLORS.blue, COLORS.silver],
origin: { x: Math.random(), y: -0.05 },
})
})
},
// 效果3: 齐射 —— 从底部正中扇形射出 5 发，排成一道彩虹弧
() => {
for (let i = 0; i < 5; i++) {
runLater(() => {
shell(
0.14 + 0.18 * i,
0.38 - 0.2 * Math.sin((Math.PI * i) / 4),
[RAINBOW[i], COLORS.silver],
1,
0.5,
)
}, i * 170)
}
},
// 效果4: 彩虹喷泉 —— 两个下角往里喷，颜色按彩虹轮换
() => {
const start = performance.now()
every(1500, () => {
const color = RAINBOW[Math.floor((performance.now() - start) / 100) % RAINBOW.length]
const base: confetti.Options = {
particleCount: 3,
spread: 22,
startVelocity: 55,
gravity: 1,
decay: 0.92,
ticks: 120,
scalar: 0.8,
flat: true,
shapes: ["circle"],
colors: [color],
}
fire({ ...base, angle: 62, origin: { x: 0, y: 1 } })
fire({ ...base, angle: 118, origin: { x: 1, y: 1 } })
})
},
// 效果5: 炮竹齐鸣 —— 正中一发大的，接着四周噼里啪啦碎响
() => {
rocket(0.5, 0.5, 0.34, () => {
burst(0.5, 0.34, [COLORS.gold, COLORS.orange, COLORS.pink, COLORS.green], 1.8)
for (let i = 0; i < 14; i++) {
runLater(
() => {
fire({
particleCount: 6,
spread: 360,
startVelocity: 6,
decay: 0.9,
gravity: 0.4,
ticks: 25,
scalar: 0.4,
flat: true,
shapes: ["circle"],
colors: [COLORS.silver, COLORS.gold],
origin: {
x: 0.5 + (Math.random() - 0.5) * 0.3,
y: 0.34 + (Math.random() - 0.5) * 0.4,
},
})
},
180 + i * 30,
)
}
})
},
// 效果6: 螺旋上升 —— 两股火星绕成螺旋往上爬，到顶炸开
() => {
every(
950,
(progress) => {
const y = 1.02 - (1.02 - 0.3) * (1 - Math.pow(1 - progress, 1.6))
for (let arm = 0; arm < 2; arm++) {
const phase = progress * Math.PI * 6 + arm * Math.PI
fire({
particleCount: 2,
spread: 360,
startVelocity: 2,
decay: 0.92,
gravity: 0.3,
ticks: 40,
scalar: 0.6,
flat: true,
shapes: ["circle"],
colors: [arm ? COLORS.blue : COLORS.pink],
origin: { x: 0.5 + Math.sin(phase) * 0.05 * (1 - progress * 0.6), y },
})
}
},
() => burst(0.5, 0.3, [COLORS.gold, COLORS.pink, COLORS.blue, COLORS.green], 1.4),
)
},
// 效果7: 图案烟花 —— 三发分别炸出对勾、爱心、星星
() => {
const shapes = loadPathShapes()
const list = [
{ x: 0.22, y: 0.36, shape: shapes.check, colors: [COLORS.green, COLORS.mint] },
{ x: 0.5, y: 0.3, shape: shapes.heart, colors: [COLORS.pink, COLORS.lightPink] },
{ x: 0.78, y: 0.36, shape: "star" as const, colors: [COLORS.gold, COLORS.orange] },
]
list.forEach((item, i) => {
runLater(() => {
rocket(item.x, item.x, item.y, () => {
fire({
particleCount: 26,
spread: 360,
startVelocity: 24,
decay: 0.92,
gravity: 0.5,
ticks: 110,
scalar: 2.2,
flat: true,
shapes: [item.shape],
colors: item.colors,
origin: { x: item.x, y: item.y },
})
})
}, i * 280)
})
},
// 效果8: 风火轮 —— 屏幕中间四条火星臂越转越快，最后炸一下
() => {
const colors = [COLORS.pink, COLORS.gold, COLORS.green, COLORS.blue]
every(
1300,
(progress) => {
const base = progress * progress * 7 * 180
for (let arm = 0; arm < 4; arm++) {
fire({
particleCount: 2,
angle: base + arm * 90,
spread: 8,
startVelocity: 30,
decay: 0.9,
gravity: 0.4,
ticks: 50,
scalar: 0.7,
flat: true,
shapes: ["circle"],
colors: [colors[arm]],
origin: { x: 0.5, y: 0.42 },
})
}
},
() => burst(0.5, 0.42, [COLORS.gold, COLORS.silver]),
)
},
// 效果9: 礼花瀑布 —— 顶上挂下一道金色火花帘
() => {
every(1400, () => {
for (let i = 0; i < 5; i++) {
fire({
particleCount: 1,
angle: 270,
spread: 30,
startVelocity: 3,
decay: 0.95,
gravity: 0.9,
ticks: 90,
scalar: 0.6,
flat: true,
shapes: ["circle"],
colors: [COLORS.gold, COLORS.gold, COLORS.silver, COLORS.orange],
origin: { x: 0.06 + Math.random() * 0.88, y: 0.06 },
})
}
})
},
// 效果10: 表情包烟花 —— 一左一右炸出两团表情
() => {
loadEmojiShapes().then((emojiShapes) => {
if (disposed) return
const options: confetti.Options = {
shapes: emojiShapes,
flat: true,
scalar: 5,
particleCount: 16,
spread: 360,
startVelocity: 40,
gravity: 0.7,
ticks: 150,
}
fire({ ...options, origin: { x: 0.35, y: 0.5 } })
runLater(() => fire({ ...options, origin: { x: 0.68, y: 0.42 } }), 300)
})
},
]
/**
* 触发随机烟花效果
*/
function celebrate() {
const fireworkTypes = [
// 效果1: 经典烟花秀
() => {
const duration = 3000
const animationEnd = Date.now() + duration
const defaults = {
startVelocity: 30,
spread: 360,
ticks: 60,
}
const interval = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) return stopTimer(interval)
const particleCount = 50 * (timeLeft / duration)
confetti({
...defaults,
particleCount,
origin: { x: Math.random() * 0.3 + 0.1, y: Math.random() - 0.2 },
colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
})
confetti({
...defaults,
particleCount,
origin: { x: Math.random() * 0.3 + 0.7, y: Math.random() - 0.2 },
colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
})
}, 250)
timers.add(interval)
},
// 效果2: 星星雨
() => {
const animationEnd = Date.now() + 2000
const interval = setInterval(() => {
if (Date.now() >= animationEnd) return stopTimer(interval)
confetti({
particleCount: 12,
angle: 270,
spread: 100,
startVelocity: 12,
gravity: 0.6,
decay: 0.96,
ticks: 200,
scalar: 1.2,
shapes: ["star"],
origin: { x: Math.random(), y: 0 },
colors: ["#FFD700", "#FFA500", "#FFFF00", "#FF69B4", "#00CED1"],
})
}, 150)
timers.add(interval)
},
// 效果3: 爆炸波浪
() => {
function randomInRange(min: number, max: number) {
return Math.random() * (max - min) + min
}
for (let i = 0; i < 5; i++) {
runLater(() => {
confetti({
angle: randomInRange(55, 125),
spread: randomInRange(50, 70),
particleCount: randomInRange(50, 100),
origin: { y: 0.6 },
colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42"],
})
}, i * 200)
}
},
// 效果4: 彩虹喷泉
() => {
const end = Date.now() + 2000
const colors = ["#ff595e", "#ff924c", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
const frame = () => {
confetti({
particleCount: 2,
angle: 60,
spread: 55,
origin: { x: 0 },
colors: colors,
})
confetti({
particleCount: 2,
angle: 120,
spread: 55,
origin: { x: 1 },
colors: colors,
})
if (Date.now() < end && !disposed) {
requestAnimationFrame(frame)
}
}
frame()
},
// 效果5: 烟花雨
() => {
const duration = 2500
const animationEnd = Date.now() + duration
const interval = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) return stopTimer(interval)
const particleCount = 50
confetti({
particleCount,
startVelocity: 30,
spread: 360,
ticks: 60,
origin: {
x: Math.random(),
y: Math.random() - 0.2,
},
colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
})
}, 200)
timers.add(interval)
},
// 效果6: 炮竹齐鸣
() => {
const count = 200
const defaults = {
origin: { y: 0.7 },
}
function fire(particleRatio: number, opts: any) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio),
})
}
fire(0.25, {
spread: 26,
startVelocity: 55,
})
fire(0.2, {
spread: 60,
})
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8,
})
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2,
})
fire(0.1, {
spread: 120,
startVelocity: 45,
})
},
// 效果7: 螺旋上升
() => {
const steps = 16
const colors = ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"]
for (let step = 0; step < steps; step++) {
runLater(() => {
const progress = step / (steps - 1)
const phase = step * (Math.PI / 4)
confetti({
particleCount: 7,
angle: 90 + Math.cos(phase) * 18,
spread: 25,
startVelocity: 16,
gravity: 0.25,
decay: 0.94,
ticks: 100,
scalar: 0.9,
shapes: ["circle", "square"],
origin: {
x: 0.5 + Math.sin(phase) * 0.14,
y: 0.85 - progress * 0.55,
},
colors,
})
}, step * 65)
}
},
// 效果8: 表情包烟花
() => {
loadEmojiShapes().then((emojiShapes) => {
confetti({
shapes: emojiShapes,
flat: true,
scalar: 6,
particleCount: 18,
spread: 360,
startVelocity: 45,
gravity: 0.7,
ticks: 150,
origin: { y: 0.6 },
})
})
},
// 效果9: 风车螺旋
() => {
const colors = ["#ff9a9e", "#fad0c4", "#fbc2eb", "#a18cd1", "#fad961"]
for (let angle = 0; angle < 360; angle += 30) {
runLater(
() => {
confetti({
particleCount: 15,
angle,
spread: 20,
startVelocity: 40,
origin: { x: 0.5, y: 0.5 },
colors,
})
},
(angle / 30) * 80,
)
}
},
// 效果10: 礼花瀑布
() => {
const animationEnd = Date.now() + 1800
const colors = ["#f6d365", "#fda085", "#fbc2eb", "#a6c1ee", "#84fab0"]
const interval = setInterval(() => {
if (Date.now() >= animationEnd) return stopTimer(interval)
for (let column = 0; column < 6; column++) {
confetti({
particleCount: 2,
angle: 270,
spread: 30,
startVelocity: 5,
gravity: 1,
decay: 0.96,
ticks: 240,
scalar: 1.1,
origin: { x: (column + Math.random()) / 6, y: 0 },
colors,
})
}
}, 120)
timers.add(interval)
},
]
// 随机选择一种效果
const randomEffect = fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
randomEffect()
pick(fireworkTypes)()
}
return {