diff --git a/app/Http/Controllers/AdminCommandController.php b/app/Http/Controllers/AdminCommandController.php
index c9285d1..0801dba 100644
--- a/app/Http/Controllers/AdminCommandController.php
+++ b/app/Http/Controllers/AdminCommandController.php
@@ -386,7 +386,7 @@ class AdminCommandController extends Controller
{
$request->validate([
'room_id' => 'required|integer',
- 'type' => 'required|in:fireworks,rain,lightning',
+ 'type' => 'required|in:fireworks,rain,lightning,snow',
]);
$admin = Auth::user();
diff --git a/public/js/effects/effect-manager.js b/public/js/effects/effect-manager.js
index 33c8210..90edca4 100644
--- a/public/js/effects/effect-manager.js
+++ b/public/js/effects/effect-manager.js
@@ -51,7 +51,7 @@ const EffectManager = (() => {
/**
* 播放指定特效
*
- * @param {string} type 特效类型：fireworks / rain / lightning
+ * @param {string} type 特效类型：fireworks / rain / lightning / snow
*/
function play(type) {
// 防重入：同时只允许一个特效
@@ -81,6 +81,11 @@ const EffectManager = (() => {
LightningEffect.start(canvas, _cleanup);
}
break;
+ case "snow":
+ if (typeof SnowEffect !== "undefined") {
+ SnowEffect.start(canvas, _cleanup);
+ }
+ break;
default:
console.warn(`[EffectManager] 未知特效类型：${type}`);
_cleanup();
diff --git a/public/js/effects/fireworks.js b/public/js/effects/fireworks.js
index c64d404..8f6e2b8 100644
--- a/public/js/effects/fireworks.js
+++ b/public/js/effects/fireworks.js
@@ -2,7 +2,8 @@
* 文件功能：聊天室烟花特效
*
* 使用 Canvas 粒子系统在全屏播放多发烟花爆炸动画。
- * 特效总时长约 4 秒，结束后自动清理并回调。
+ * 粒子加大、加发光描边，在浅色背景上也清晰可见。
+ * 特效总时长约 5 秒，结束后自动清理并回调。
*/
const FireworksEffect = (() => {
@@ -14,13 +15,13 @@ const FireworksEffect = (() => {
this.color = color;
// 随机方向和速度
const angle = Math.random() * Math.PI * 2;
- const speed = Math.random() * 6 + 2;
+ const speed = Math.random() * 7 + 3;
this.vx = Math.cos(angle) * speed;
this.vy = Math.sin(angle) * speed;
this.alpha = 1;
this.gravity = 0.12;
- this.decay = Math.random() * 0.012 + 0.012; // 透明度每帧衰减量
- this.radius = Math.random() * 3 + 1;
+ this.decay = Math.random() * 0.01 + 0.01; // 衰减略慢，显色更久
+ this.radius = Math.random() * 4 + 2; // 增大粒子半径
}
/** 每帧更新粒子位置和状态 */
@@ -28,16 +29,18 @@ const FireworksEffect = (() => {
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
- this.vx *= 0.98; // 空气阻力
+ this.vx *= 0.98;
this.vy *= 0.98;
this.alpha -= this.decay;
}
- /** 绘制粒子 */
+ /** 绘制粒子（发光效果，在浅色背景上也突出） */
draw(ctx) {
ctx.save();
ctx.globalAlpha = Math.max(0, this.alpha);
ctx.fillStyle = this.color;
+ ctx.shadowColor = this.color;
+ ctx.shadowBlur = 8;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
@@ -45,29 +48,24 @@ const FireworksEffect = (() => {
}
}
- // 预定义烟花颜色组
+ // 预定义烟花颜色组（饱和度高，避免和浅蓝背景撞色）
const COLORS = [
- "#ff4444",
- "#ff8800",
- "#ffdd00",
- "#44ff44",
- "#44ddff",
- "#8844ff",
- "#ff44cc",
- "#ffffff",
- "#ffaaaa",
- "#aaffaa",
- "#aaaaff",
- "#ffffaa",
+ "#ff2200",
+ "#ff7700",
+ "#ffcc00",
+ "#00cc33",
+ "#cc00ff",
+ "#ff0088",
+ "#00aaff",
+ "#ff4488",
+ "#ff6600",
+ "#aaff00",
+ "#ff2255",
+ "#ffaa00",
];
/**
* 发射一枚烟花，返回粒子数组
- *
- * @param {number} x 爆炸中心 x
- * @param {number} y 爆炸中心 y
- * @param {number} count 粒子数量
- * @returns {Particle[]}
*/
function _burst(x, y, count) {
const color = COLORS[Math.floor(Math.random() * COLORS.length)];
@@ -88,12 +86,12 @@ const FireworksEffect = (() => {
const ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
- const DURATION = 4500; // 总时长（ms）
+ const DURATION = 5000; // 总时长（ms）
let particles = [];
let animId = null;
let launchCount = 0;
- const MAX_LAUNCHES = 8; // 总共发射几枚烟花
+ const MAX_LAUNCHES = 10; // 总发射枚数（增加）
// 定时发射烟花
const launchInterval = setInterval(() => {
@@ -101,21 +99,21 @@ const FireworksEffect = (() => {
clearInterval(launchInterval);
return;
}
- const x = w * (0.15 + Math.random() * 0.7); // 避免贴近边缘
- const y = h * (0.1 + Math.random() * 0.5); // 在屏幕上半区爆炸
- const count = Math.floor(Math.random() * 40) + 60;
- particles = particles.concat(_burst(x, y, count));
+ const x = w * (0.1 + Math.random() * 0.8);
+ const y = h * (0.05 + Math.random() * 0.5);
+ const cnt = Math.floor(Math.random() * 50) + 80; // 每枚 80-130 粒子（增多）
+ particles = particles.concat(_burst(x, y, cnt));
launchCount++;
- }, 500);
+ }, 450);
const startTime = performance.now();
// 动画循环
function animate(now) {
- // 清除画布（保持透明，不遮挡聊天背景）
+ // 清除画布（透明，不遮挡聊天背景）
ctx.clearRect(0, 0, w, h);
- // 更新并绘制存活粒子（粒子自带 alpha 衰减，视觉上有淡出效果）
+ // 更新并绘制存活粒子
particles = particles.filter((p) => p.alpha > 0.02);
particles.forEach((p) => {
p.update();
@@ -125,7 +123,6 @@ const FireworksEffect = (() => {
if (now - startTime < DURATION) {
animId = requestAnimationFrame(animate);
} else {
- // 特效结束：清空 canvas 后回调
clearInterval(launchInterval);
cancelAnimationFrame(animId);
ctx.clearRect(0, 0, w, h);
diff --git a/public/js/effects/rain.js b/public/js/effects/rain.js
index 4d9c472..52b39f0 100644
--- a/public/js/effects/rain.js
+++ b/public/js/effects/rain.js
@@ -2,6 +2,7 @@
* 文件功能：聊天室下雨特效
*
* 使用 Canvas 绘制斜向雨线，模拟真实降雨视觉效果。
+ * 加粗加深雨线颜色，在浅色背景上清晰可见。
* 特效总时长约 8 秒，结束后自动清理并回调。
*/
@@ -14,17 +15,15 @@ const RainEffect = (() => {
/**
* 重置/初始化雨滴位置
- *
- * @param {number} w Canvas 宽度
- * @param {number} h Canvas 高度
*/
reset(w, h) {
this.x = Math.random() * w;
- this.y = Math.random() * -h; // 从屏幕上方随机位置开始
- this.len = Math.random() * 20 + 10; // 雨线长度
- this.speed = Math.random() * 8 + 6; // 下落速度
- this.angle = (Math.PI / 180) * (75 + Math.random() * 10); // 倾斜角（接近竖直偏右）
- this.alpha = Math.random() * 0.3 + 0.2; // 透明度
+ this.y = Math.random() * -h;
+ this.len = Math.random() * 25 + 12; // 雨线长度（稍加长）
+ this.speed = Math.random() * 10 + 7; // 下落速度（加快）
+ this.angle = (Math.PI / 180) * (75 + Math.random() * 10);
+ this.alpha = Math.random() * 0.5 + 0.4; // 提高透明度上限 (0.4-0.9，原 0.2-0.5)
+ this.strokeW = Math.random() * 1.5 + 0.8; // 线条宽度随机（原 0.8 固定）
this.w = w;
this.h = h;
}
@@ -33,17 +32,18 @@ const RainEffect = (() => {
update() {
this.x += Math.cos(this.angle) * this.speed * 0.3;
this.y += Math.sin(this.angle) * this.speed;
- // 落出屏幕后重置
if (this.y > this.h + this.len) {
this.reset(this.w, this.h);
}
}
- /** 绘制雨滴线段 */
+ /** 绘制雨滴线段（加深蓝色，在浅色背景上更明显） */
draw(ctx) {
ctx.save();
- ctx.strokeStyle = `rgba(155, 200, 255, ${this.alpha})`;
- ctx.lineWidth = 0.8;
+ ctx.strokeStyle = `rgba(50, 130, 220, ${this.alpha})`; // 加深蓝色（原浅蓝 155,200,255）
+ ctx.lineWidth = this.strokeW;
+ ctx.shadowColor = "rgba(30, 100, 200, 0.4)";
+ ctx.shadowBlur = 2;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(
@@ -65,13 +65,12 @@ const RainEffect = (() => {
const ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
- const DURATION = 8000; // 总时长（ms）
- const DROP_COUNT = 180; // 雨滴数量
+ const DURATION = 8000;
+ const DROP_COUNT = 200; // 增加雨滴数量（原 180）
- // 初始化所有雨滴，随机分布在屏幕各处（避免开始时从顶部一起落）
const drops = Array.from({ length: DROP_COUNT }, () => {
const d = new Drop(w, h);
- d.y = Math.random() * h; // 初始 Y 随机，不全部从顶部开始
+ d.y = Math.random() * h;
return d;
});
@@ -79,7 +78,7 @@ const RainEffect = (() => {
const startTime = performance.now();
function animate(now) {
- // 清除画布（保持透明，不遮挡聊天背景）
+ // 清除画布（透明，不遮挡聊天背景）
ctx.clearRect(0, 0, w, h);
drops.forEach((d) => {
diff --git a/public/js/effects/snow.js b/public/js/effects/snow.js
new file mode 100644
index 0000000..a279763
--- /dev/null
+++ b/public/js/effects/snow.js
@@ -0,0 +1,107 @@
+/**
+ * 文件功能：聊天室下雪特效
+ *
+ * 使用 Canvas 绘制随机飘落的雪花圆点，模拟冬日飘雪效果。
+ * 雪花大小、速度、飘动幅度随机，在浅色背景上以白色+深描边显示。
+ * 特效总时长约 10 秒，结束后自动清理并回调。
+ */
+
+const SnowEffect = (() => {
+ // 雪花类
+ class Flake {
+ constructor(w, h) {
+ this.w = w;
+ this.h = h;
+ this.reset(true);
+ }
+
+ /**
+ * 重置雪花位置
+ *
+ * @param {boolean} initial 是否初始化（初始化时 Y 随机分布全屏，否则从顶部重生）
+ */
+ reset(initial = false) {
+ this.x = Math.random() * this.w;
+ this.y = initial ? Math.random() * this.h : -10;
+ this.r = Math.random() * 4 + 2; // 半径 2-6
+ this.speed = Math.random() * 1.5 + 0.5; // 下落速度
+ this.drift = Math.random() * 0.8 - 0.4; // 水平漂移
+ this.alpha = Math.random() * 0.4 + 0.6; // 透明度 0.6-1.0
+ this.angle = 0;
+ this.wobble = Math.random() * 0.04 + 0.01; // 左右摇摆频率
+ }
+
+ /** 每帧更新雪花位置 */
+ update() {
+ this.angle += this.wobble;
+ this.x += Math.sin(this.angle) * this.drift + this.drift * 0.3;
+ this.y += this.speed;
+ if (this.y > this.h + 10) {
+ this.reset(false);
+ }
+ }
+
+ /** 绘制雪花（白色圆点 + 深色描边，在浅色背景上可见） */
+ draw(ctx) {
+ ctx.save();
+ ctx.globalAlpha = this.alpha;
+ // 外圈：半透明蓝灰描边
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
+ ctx.strokeStyle = "rgba(80, 120, 180, 0.6)";
+ ctx.lineWidth = 0.8;
+ ctx.stroke();
+ // 内部：白色填充
+ ctx.fillStyle = "#ffffff";
+ ctx.shadowColor = "rgba(150, 180, 255, 0.8)";
+ ctx.shadowBlur = 4;
+ ctx.fill();
+ ctx.restore();
+ }
+ }
+
+ /**
+ * 启动下雪特效
+ *
+ * @param {HTMLCanvasElement} canvas 全屏 Canvas
+ * @param {Function} onEnd 特效结束回调
+ */
+ function start(canvas, onEnd) {
+ const ctx = canvas.getContext("2d");
+ const w = canvas.width;
+ const h = canvas.height;
+ const DURATION = 10000; // 总时长（ms）
+ const FLAKE_COUNT = 160; // 雪花数量
+
+ // 初始化雪花，随机分布全屏（避免开始时全堆在顶部）
+ const flakes = Array.from(
+ { length: FLAKE_COUNT },
+ () => new Flake(w, h),
+ );
+
+ let animId = null;
+ const startTime = performance.now();
+
+ function animate(now) {
+ // 清除画布（透明，不遮挡聊天背景）
+ ctx.clearRect(0, 0, w, h);
+
+ flakes.forEach((f) => {
+ f.update();
+ f.draw(ctx);
+ });
+
+ if (now - startTime < DURATION) {
+ animId = requestAnimationFrame(animate);
+ } else {
+ cancelAnimationFrame(animId);
+ ctx.clearRect(0, 0, w, h);
+ onEnd();
+ }
+ }
+
+ animId = requestAnimationFrame(animate);
+ }
+
+ return { start };
+})();
diff --git a/resources/views/chat/frame.blade.php b/resources/views/chat/frame.blade.php
index bfc2e4f..d576ac1 100644
--- a/resources/views/chat/frame.blade.php
+++ b/resources/views/chat/frame.blade.php
@@ -94,11 +94,12 @@
{{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
@include('chat.partials.user-actions')
- {{-- 全屏特效系统：管理员烟花/下雨/雷电 --}}
+ {{-- 全屏特效系统：管理员烟花/下雨/雷电/下雪 --}}
+
@include('chat.partials.scripts')
diff --git a/resources/views/chat/partials/input-bar.blade.php b/resources/views/chat/partials/input-bar.blade.php
index 18405ff..3f43a09 100644
--- a/resources/views/chat/partials/input-bar.blade.php
+++ b/resources/views/chat/partials/input-bar.blade.php
@@ -87,6 +87,9 @@
+
@endif