《零依赖纯前端实现春节音游：我用代码造了个能放鞭炮的节拍器》
项目背景
春节想做个有年味的小玩意，但不想依赖任何外部资源（图片/音频文件）。于是用纯前端技术栈实现了一个节奏点击游戏：点击屏幕跟着节拍"放鞭炮"，连击越高年味越浓。
核心玩法
机制：圆圈从外向内缩放到命中线时点击，判定分 Perfect/Good/Miss，支持连击加成。
节拍生成算法：
JavaScript
复制
// 以半拍为步进，制造节奏感
const step = 60/BPM/2; // 0.3s @ 100BPM
规则：每小节 0/2/4/6 拍必生成
10% 概率在奇数拍加花
6% 概率空拍制造悬念
计分：基础分 + 连击×2，准确率加权计算"年味指数"。
技术亮点
1. Web Audio API 合成音效（零音频文件）
点击反馈：
JavaScript
复制
oscillator.type = "square";
oscillator.frequency.setValueAtTime(900, t);
gain.gain.exponentialRampToValueAtTime(0.18, t+0.01);
爆竹噪声（核心 trick）：
JavaScript
复制
// 生成白噪声 + 指数衰减包络
for(let i=0; i<bufferSize; i++){
const env = Math.exp(-i/(sampleRate*0.02)); // 20ms衰减
data[i] = (Math.random()*2-1) * env;
}
// 带通滤波器模拟鞭炮的"噼啪"质感
biquadFilter.type = "bandpass";
biquadFilter.frequency.value = 1400;
不用加载资源，首屏即玩，且每次爆炸都是"真随机"。
2. CSS 烟花（伪元素魔法）
不用 Canvas 画烟花，用 ::before/::after + box-shadow 实现爆炸：
css
复制
.firework::before {
box-shadow:
0 -20px 0 -2px #ffd700,
14px -14px 0 -2px #ff6b6b,
/* 8个方向... */
}
animation: explode 1s ease-out;
性能友好，且能响应式适配。
3. 中式边框设计
放弃圆角卡片，改用四角花纹 + 双层边框：
-
外层：
box-shadow模拟红绸厚边 -
四角：
content: "❖"金色装饰符 -
内框：渐变金色线条 + 虚线衬底
配色锁定 #8B0000 到 #ffd700，传统且高级。
踩坑记录
表格
复制
| 问题 | 解法 |
|---|---|
| 音频自动播放被拦截 | 首次点击才初始化 AudioContext |
| 移动端点击延迟 | 用 touchstart + preventDefault |
| Canvas 模糊 | 根据 devicePixelRatio 缩放画布 |
| 节拍漂移 | 用 audioContext.currentTime 而非 Date.now |
最终效果
-
体积：单 HTML 文件，< 15KB
-
依赖：0（纯原生）
-
平台：移动端优先，桌面端兼容
-
特色：每局 45 秒，适合碎片时间，结算可分享"年味指数"
源码
体验地址：https://ggboypip-ai.github.io/newchun/index.html
核心收获：浏览器的多媒体 API 足够强大，纯代码也能造出完整的感官体验。春节不需要 Heavy，有节奏、有声响、有那点红，就够了。
