基于Canvas和Web Audio API的交互式烟花动画网页游戏

一个基于 Canvas 和 Web Audio API 的交互式烟花动画网页

目录

1. 整体架构
2. HTML 结构
3. CSS 样式
4. JavaScript 核心模块
5. 用户交互
6. 性能优化
7. iOS 适配
8. 文件依赖

一、整体架构

┌─────────────────────────────────────────────────────────────┐ │ HTML 结构 │ ├─────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │ │ │ SVG 图标 │ │ Canvas容器 │ │ 控制面板/菜单 │ │ │ └─────────────┘ └─────────────┘ └─────────────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ CSS 样式 │ ├─────────────────────────────────────────────────────────────┤ │ JavaScript 逻辑 │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐ │ │ │ FireworkSound│ │ Store │ │ Shell/Star/Spark │ │ │ │ 音效模块 │ │ 状态管理 │ │ 粒子系统 │ │ │ └──────────────┘ └──────────────┘ └──────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ 

二、HTML 结构部分

1. 头部元信息

<metacharset="UTF-8"><title>2026新年快乐！万事如意！</title><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

说明：

• 设置字符编码为 UTF-8
• 页面标题显示新年祝福
• viewport-fit=cover 适配 iPhone X 系列刘海屏
• 禁用用户缩放，防止误操作

2. iOS PWA 支持

<metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"><metaname="apple-mobile-web-app-title"content="烟花盛宴"><linkrel="apple-touch-icon"href="..."><linkrel="manifest"href="data:application/json;base64,...">

说明：

• 支持添加到 iOS 主屏幕
• 半透明状态栏适配刘海屏
• 内联 PWA manifest（Base64 编码）

3. SVG 图标定义

<svgxmlns="http://www.w3.org/2000/svg"><symbolid="icon-play"viewBox="0 0 24 24"><pathd="M8 5v14l11-7z"/></symbol><symbolid="icon-pause"viewBox="0 0 24 24"><pathd="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></symbol><symbolid="icon-close"viewBox="0 0 24 24">...</symbol><symbolid="icon-settings"viewBox="0 0 24 24">...</symbol><symbolid="icon-shutter-fast"viewBox="0 0 24 24">...</symbol><symbolid="icon-shutter-slow"viewBox="0 0 24 24">...</symbol></svg>

说明：

• 使用 SVG symbol 定义可复用的图标
• 通过 <use href="#icon-xxx"> 引用
• 优点：矢量图标、可缩放、体积小

4. Canvas 画布容器

<divid="canvas-container"><canvasid="trails-canvas"></canvas><!-- 拖尾轨迹层 --><canvasid="main-canvas"></canvas><!-- 主画面层 --></div>

双层 Canvas 设计原理：

5. 控制面板

<divid="controls"><divid="pause-btn"class="btn"><svgfill="white"width="24"height="24"><usehref="#icon-pause"></use></svg></div><divid="shutter-btn"class="btn"><svgfill="white"width="24"height="24"><usehref="#icon-shutter-slow"></use></svg></div><divid="settings-btn"class="btn"><svgfill="white"width="24"height="24"><usehref="#icon-settings"></use></svg></div></div>

按钮功能：

• 暂停/播放：控制动画运行
• 快门模式：切换长曝光效果
• 设置：打开设置菜单

6. 设置菜单

<divid="menu"><divid="menu__header">设置</div><form><divclass="form-option form-option--select"><label>烟花类型</label><selectid="shell-type"></select></div><divclass="form-option form-option--select"><label>烟花大小</label><selectid="shell-size"></select></div><divclass="form-option form-option--checkbox"><label><inputid="auto-launch"type="checkbox"/><span>自动发射</span></label></div><divclass="form-option form-option--checkbox"><label><inputid="finale-mode"type="checkbox"/><span>终场模式</span></label></div><divclass="form-option form-option--checkbox"><label><inputid="hide-controls"type="checkbox"/><span>隐藏控制</span></label></div><divclass="form-option form-option--checkbox"><label><inputid="sound-enabled"type="checkbox"checked/><span>声音效果</span></label></div><divclass="form-option form-option--select"><label>声音类型</label><selectid="sound-type"></select></div></form></div>

7. 首次交互提示（iOS 适配）

<divid="audio-prompt"><divid="audio-prompt__icon">🎆</div><divid="audio-prompt__text">点击屏幕开始烟花盛宴</div><divid="audio-prompt__hint">Tap to start fireworks</div></div>

说明：

• iOS Safari 要求用户交互后才能播放音频
• 此提示引导用户点击以解锁音频

三、CSS 样式部分

1. 全局样式与触摸优化

*{position: relative;box-sizing: border-box;-webkit-tap-highlight-color: transparent;/* 移除点击高亮 */-webkit-touch-callout: none;/* 禁用长按菜单 */-webkit-user-select: none;/* 禁止选择文字 */user-select: none;touch-action: manipulation;/* 禁用双击缩放 */}html{background-color: #000;}body{overflow: hidden;color:rgba(255, 255, 255, 0.5);font-family:"Russo One", arial, sans-serif;overscroll-behavior: none;/* 禁用橡皮筋效果 */padding:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);/* 安全区域 */}

2. 混合模式

#canvas-container canvas{position: absolute;mix-blend-mode: lighten;/* 变亮混合模式 */}

说明：

• lighten 混合模式使亮色粒子在黑色背景上更加突出
• 多个亮色叠加会产生更亮的效果

3. 动画过渡

.hide{opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;}

说明：

• 使用 opacity + visibility 组合实现平滑的显示/隐藏动画
• visibility 延迟隐藏，避免点击穿透

4. 音频提示动画

#audio-prompt__icon{font-size: 80px;animation: pulse 1.5s ease-in-out infinite;}@keyframes pulse{0%, 100%{transform:scale(1);opacity: 1;}50%{transform:scale(1.1);opacity: 0.7;}}

四、JavaScript 核心模块

1. FireworkSound 音效模块

const FireworkSound ={ctx:null,// AudioContext 实例enabled:true,// 是否启用声音soundType:'realistic',// 当前声音类型isUnlocked:false,// iOS 音频解锁状态init(){// 初始化 Web Audio APIthis.ctx =new(window.AudioContext || window.webkitAudioContext)();},unlock(){// iOS 音频解锁：播放静音缓冲区if(this.isUnlocked)returntrue;if(this.ctx.state ==='suspended'){this.ctx.resume();}const buffer =this.ctx.createBuffer(1,1,22050);const source =this.ctx.createBufferSource(); source.buffer = buffer; source.connect(this.ctx.destination); source.start(0);this.isUnlocked =true;},playLaunch(){/* 发射音效 */},playBurst(size){/* 爆炸音效 */}};

Web Audio API 核心概念：

真实爆炸声实现原理：

playRealisticBurst(size =1){// 1. 生成白噪声缓冲区const duration =0.6+ size *0.2;const bufferSize =this.ctx.sampleRate * duration;const buffer =this.ctx.createBuffer(1, bufferSize,this.ctx.sampleRate);const data = buffer.getChannelData(0);for(let i =0; i < bufferSize; i++){const t = i / bufferSize;const noise = Math.random()*2-1;// 随机噪声 [-1, 1]const envelope = Math.pow(1- t,1.5);// 指数衰减包络 data[i]= noise * envelope;}// 2. 创建低通滤波器模拟爆炸闷响const filter =this.ctx.createBiquadFilter(); filter.type ='lowpass'; filter.frequency.setValueAtTime(3000* size,this.ctx.currentTime); filter.frequency.exponentialRampToValueAtTime(200,this.ctx.currentTime + duration *0.7);// 3. 音量包络：快速起音，缓慢衰减const gain =this.ctx.createGain(); gain.gain.setValueAtTime(0,this.ctx.currentTime); gain.gain.linearRampToValueAtTime(volume,this.ctx.currentTime +0.02);// 起音 20ms gain.gain.exponentialRampToValueAtTime(0.01,this.ctx.currentTime + duration);// 衰减// 4. 连接节点并播放 noise.connect(filter); filter.connect(gain); gain.connect(this.ctx.destination); noise.start(this.ctx.currentTime);}

声音类型对照表：

2. Store 状态管理

const store ={_listeners:newSet(),// 订阅者集合state:{paused:false,longExposure:false,menuOpen:false,config:{shell:'Random',size:'3',autoLaunch:true,finale:false,hideControls:false,soundEnabled:true,soundType:'realistic'}},setState(nextState){this.state = Object.assign({},this.state, nextState);this._dispatch();// 通知所有订阅者this.persist();// 持久化到 localStorage},subscribe(listener){this._listeners.add(listener);return()=>this._listeners.delete(listener);},load(){// 从 localStorage 加载配置},persist(){// 保存配置到 localStorage}};

发布-订阅模式流程：

用户操作 → updateConfig() → store.setState() → _dispatch() → renderApp() ↓ 更新 DOM 

3. Shell 烟花类

classShell{constructor(options){this.size = options.size;// 爆炸半径this.starCount = options.starCount;// 星星数量this.starLife = options.starLife;// 星星寿命（毫秒）this.color = options.color;// 颜色this.glitter = options.glitter;// 闪光类型this.pistil = options.pistil;// 是否有花心this.ring = options.ring;// 是否环形}launch(position, launchHeight){// 1. 计算发射位置和目标高度const launchX = position *(width - hpad *2)+ hpad;const launchY = height;const burstY = minHeight -(launchHeight *(minHeight - vpad));const launchDistance = launchY - burstY;// 2. 计算发射速度（抛物线运动近似）const launchVelocity = Math.pow(launchDistance *0.04,0.64);// 3. 创建彗星（上升的火球）const comet = Star.add( launchX, launchY,this.color ||COLOR.White, Math.PI,// 向上发射 launchVelocity, launchVelocity *400// 寿命); comet.heavy =true;// 减少空气阻力 comet.sparkFreq =16;// 火花频率// 4. 设置死亡回调为爆炸 comet.onDeath=()=>this.burst(comet.x, comet.y);// 5. 播放发射音效 FireworkSound.playLaunch();}burst(x, y){// 1. 计算爆炸速度const speed =this.size /96;// 2. 创建粒子弧（圆形分布）createParticleArc(0,PI_2,this.starCount,1,(angle)=>{const star = Star.add( x, y,this.color, angle, Math.pow(Math.random(),0.45)* speed,// 非线性速度分布this.starLife + Math.random()*this.starLife *this.starLifeVariation ); star.onDeath = onDeath;// 设置死亡效果});// 3. 播放爆炸音效const soundSize = Math.min(2,this.size /200); FireworkSound.playBurst(soundSize);}}

烟花类型对照表：

4. Star 星星粒子

const Star ={drawWidth:3,airDrag:0.98,airDragHeavy:0.992,active:createParticleCollection(),// 按颜色分组的活跃粒子_pool:[],// 对象池，复用粒子对象add(x, y, color, angle, speed, life, speedOffX, speedOffY){// 从池中获取或创建新对象const instance =this._pool.pop()||{}; instance.x = x; instance.y = y; instance.prevX = x;// 上一帧位置（用于绘制轨迹） instance.prevY = y; instance.color = color; instance.speedX = Math.sin(angle)* speed +(speedOffX ||0); instance.speedY = Math.cos(angle)* speed +(speedOffY ||0); instance.life = life; instance.sparkFreq =0;// 火花频率this.active[color].push(instance);return instance;},returnInstance(instance){ instance.onDeath && instance.onDeath(instance); instance.onDeath =null;this._pool.push(instance);// 回收到池中}};

对象池模式优势：

• 避免频繁创建/销毁对象
• 减少垃圾回收（GC）压力
• 提高大量粒子时的性能

5. Spark 火花粒子

const Spark ={drawWidth:0.75,airDrag:0.9,active:createParticleCollection(),_pool:[],add(x, y, color, angle, speed, life){const instance =this._pool.pop()||{}; instance.x = x; instance.y = y; instance.prevX = x; instance.prevY = y; instance.color = color; instance.speedX = Math.sin(angle)* speed; instance.speedY = Math.cos(angle)* speed; instance.life = life;this.active[color].push(instance);return instance;}};

Star 与 Spark 的区别：

6. 渲染循环

functionupdate(frameTime, lag){if(!canInteract())return;const timeStep = frameTime * simSpeed;const speed = simSpeed * lag;// 1. 更新全局状态（自动发射等）updateGlobals(timeStep, lag);// 2. 计算物理参数const starDrag =1-(1- Star.airDrag)* speed;// 空气阻力系数const sparkDrag =1-(1- Spark.airDrag)* speed;const gAcc = timeStep /1000*GRAVITY;// 重力加速度// 3. 更新所有粒子COLOR_CODES_W_INVIS.forEach(color=>{// 更新星星 Star.active[color].forEach((star, i, stars)=>{ star.life -= timeStep;if(star.life <=0){ stars.splice(i,1); Star.returnInstance(star);}else{// 保存上一帧位置 star.prevX = star.x; star.prevY = star.y;// 物理更新 star.x += star.speedX * speed; star.y += star.speedY * speed; star.speedX *= starDrag; star.speedY *= starDrag; star.speedY += gAcc;// 重力// 旋转效果if(star.spinRadius){ star.spinAngle += star.spinSpeed * speed; star.x += Math.sin(star.spinAngle)* star.spinRadius * speed; star.y += Math.cos(star.spinAngle)* star.spinRadius * speed;}// 火花效果if(star.sparkFreq){ star.sparkTimer -= timeStep;while(star.sparkTimer <0){ star.sparkTimer += star.sparkFreq; Spark.add(star.x, star.y, star.sparkColor,...);}}}});// 更新火花 Spark.active[color].forEach((spark, i, sparks)=>{// 类似星星的物理更新...});});// 4. 渲染render(speed);}

7. 渲染函数

functionrender(speed){const{ dpr, width, height }= mainStage;const trailsCtx = trailsStage.ctx;const mainCtx = mainStage.ctx;// 1. 更新天空颜色colorSky(speed);// 2. 设置变换 trailsCtx.scale(dpr, dpr); mainCtx.scale(dpr, dpr);// 3. 绘制拖尾效果（渐变黑色覆盖） trailsCtx.globalCompositeOperation ='source-over'; trailsCtx.fillStyle =`rgba(0, 0, 0, ${longExposure ?0.0025:0.1* speed})`; trailsCtx.fillRect(0,0, width, height);// 4. 设置混合模式 trailsCtx.globalCompositeOperation ='lighten';// 5. 清空主画布 mainCtx.clearRect(0,0, width, height);// 6. 绘制爆炸闪光while(BurstFlash.active.length){const bf = BurstFlash.active.pop();const gradient = trailsCtx.createRadialGradient(bf.x, bf.y,0, bf.x, bf.y, bf.radius); gradient.addColorStop(0.05,'white'); gradient.addColorStop(0.25,'rgba(255, 160, 20, 0.2)'); gradient.addColorStop(1,'rgba(255, 160, 20, 0)'); trailsCtx.fillStyle = gradient; trailsCtx.fillRect(bf.x - bf.radius, bf.y - bf.radius, bf.radius *2, bf.radius *2);}// 7. 绘制星星轨迹 trailsCtx.lineWidth = Star.drawWidth; trailsCtx.lineCap ='round';COLOR_CODES.forEach(color=>{const stars = Star.active[color]; trailsCtx.strokeStyle = color; trailsCtx.beginPath(); stars.forEach(star=>{ trailsCtx.moveTo(star.x, star.y); trailsCtx.lineTo(star.prevX, star.prevY);}); trailsCtx.stroke();});// 8. 绘制火花 trailsCtx.lineWidth = Spark.drawWidth; trailsCtx.lineCap ='butt';// 类似星星的绘制...// 9. 绘制速度条if(speedBarOpacity){ mainCtx.globalAlpha = speedBarOpacity; mainCtx.fillStyle =COLOR.Blue; mainCtx.fillRect(0, height -6, width * simSpeed,6); mainCtx.globalAlpha =1;}// 10. 重置变换 trailsCtx.resetTransform(); mainCtx.resetTransform();}

8. 天空颜色计算

const currentSkyColor ={r:0,g:0,b:0};const targetSkyColor ={r:0,g:0,b:0};functioncolorSky(speed){const maxSkySaturation =30;// 最大天空饱和度const maxStarCount =500;// 达到最大亮度所需的星星数量let totalStarCount =0; targetSkyColor.r =0; targetSkyColor.g =0; targetSkyColor.b =0;// 累计所有颜色的亮度COLOR_CODES.forEach(color=>{const tuple =COLOR_TUPLES[color];const count = Star.active[color].length; totalStarCount += count; targetSkyColor.r += tuple.r * count; targetSkyColor.g += tuple.g * count; targetSkyColor.b += tuple.b * count;});// 非线性映射，模拟人眼感知const intensity = Math.pow(Math.min(1, totalStarCount / maxStarCount),0.3);// 归一化并应用强度const maxColorComponent = Math.max(1, targetSkyColor.r, targetSkyColor.g, targetSkyColor.b); targetSkyColor.r = targetSkyColor.r / maxColorComponent * maxSkySaturation * intensity; targetSkyColor.g = targetSkyColor.g / maxColorComponent * maxSkySaturation * intensity; targetSkyColor.b = targetSkyColor.b / maxColorComponent * maxSkySaturation * intensity;// 平滑过渡const colorChange =10; currentSkyColor.r +=(targetSkyColor.r - currentSkyColor.r)/ colorChange * speed; currentSkyColor.g +=(targetSkyColor.g - currentSkyColor.g)/ colorChange * speed; currentSkyColor.b +=(targetSkyColor.b - currentSkyColor.b)/ colorChange * speed;// 应用到背景 appNodes.canvasContainer.style.backgroundColor =`rgb(${currentSkyColor.r |0}, ${currentSkyColor.g |0}, ${currentSkyColor.b |0})`;}

五、用户交互

1. 点击发射

functionhandlePointerStart(event){ activePointerCount++; FireworkSound.unlock();// iOS 音频解锁 FireworkSound.resume();const btnSize =44;// 点击顶部按钮区域if(event.y < btnSize){if(event.x < btnSize){togglePause();return;}if(event.x > mainStage.width/2- btnSize/2&& event.x < mainStage.width/2+ btnSize/2){toggleLongExposure();return;}if(event.x > mainStage.width - btnSize){toggleMenu();return;}}// 点击画布发射烟花if(!canInteract())return;if(updateSpeedFromEvent(event)){ isUpdatingSpeed =true;}elseif(event.onCanvas){launchShellFromConfig(event);}}

2. 键盘快捷键

functionhandleKeydown(event){if(event.keyCode ===80)togglePause();// P 键 - 暂停if(event.keyCode ===79)toggleMenu();// O 键 - 菜单if(event.keyCode ===27)toggleMenu(false);// ESC 键 - 关闭菜单}

3. 自动发射序列

functionstartSequence(){if(isFirstSeq){ isFirstSeq =false;const shell =newShell(crysanthemumShell(shellSizeSelector())); shell.launch(0.5,0.5);// 首发居中return2400;}if(finaleSelector()){// 终场模式：快速连续发射seqRandomShell();if(currentFinaleCount < finaleCount){ currentFinaleCount++;return170;// 170ms 间隔}else{ currentFinaleCount =0;return6000;// 暂停 6 秒}}// 随机选择发射模式const rand = Math.random();if(rand <0.2)returnseqSmallBarrage();// 小型连发if(rand <0.6)returnseqRandomShell();// 单发if(rand <0.8)returnseqTwoRandom();// 双发returnseqTriple();// 三发}

六、性能优化要点

七、iOS 适配

1. Meta 标签优化

<!-- 视口适配刘海屏 --><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"><!-- iOS Web App 支持 --><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"><metaname="apple-mobile-web-app-title"content="烟花盛宴"><!-- 禁用电话号码识别 --><metaname="format-detection"content="telephone=no"><!-- PWA Manifest --><linkrel="manifest"href="data:application/json;base64,...">

2. CSS 触摸优化

*{-webkit-tap-highlight-color: transparent;/* 移除点击高亮 */-webkit-touch-callout: none;/* 禁用长按菜单 */-webkit-user-select: none;/* 禁止选择文字 */touch-action: manipulation;/* 禁用双击缩放 */}body{overscroll-behavior: none;/* 禁用橡皮筋效果 */padding:env(safe-area-inset-*);/* 适配安全区域 */}

3. Web Audio 解锁

unlock(){if(this.isUnlocked)returntrue;// iOS 要求：必须在用户交互中创建并播放音频if(this.ctx.state ==='suspended'){this.ctx.resume();}// 播放静音缓冲区解锁音频const buffer =this.ctx.createBuffer(1,1,22050);const source =this.ctx.createBufferSource(); source.buffer = buffer; source.connect(this.ctx.destination); source.start(0);this.isUnlocked =true;}

4. 手势防护

// 禁用 iOS 缩放手势 document.addEventListener('gesturestart',(e)=> e.preventDefault()); document.addEventListener('gesturechange',(e)=> e.preventDefault()); document.addEventListener('gestureend',(e)=> e.preventDefault());// 防止双击缩放let lastTouchEnd =0; document.addEventListener('touchend',(e)=>{const now = Date.now();if(now - lastTouchEnd <=300){ e.preventDefault();} lastTouchEnd = now;});

5. iOS 支持功能表

八、文件依赖

外部库

├── [email protected] - 全屏 API 兼容库 ├── [email protected] - Canvas 舞台管理 └── MyMath.js - 数学工具函数 

本地文件

└── style.css - 额外样式（可选） 

总结

这是一个功能完整的交互式烟花动画网页，主要特点：

1. 视觉效果：双层 Canvas 实现拖尾效果，混合模式增强亮度
2. 音效系统：8 种不同风格的音效，Web Audio API 实时生成
3. 物理模拟：重力、空气阻力、粒子生命周期
4. 状态管理：发布-订阅模式，localStorage 持久化
5. 性能优化：对象池、颜色分组、requestAnimationFrame
6. 跨平台：完整的 iOS/移动端适配