（文后附完整代码）html+css+javascript HTML5打气球游戏项目分析报告
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎 点赞 + 收藏 + 关注 哦 💕
（文后附完整代码）html+css+javascript HTML5打气球游戏项目分析报告
📚 效果展示
📚 本文简介
本文介绍了一个基于HTML5 Canvas的打气球游戏开发项目，通过HTML、CSS和JavaScript技术实现。游戏包含气球生成、碰撞检测、得分系统和音效等核心功能，采用Flexbox布局和Canvas API渲染。技术亮点包括Web Audio API音效生成、模块化设计和随机化系统。文章详细分析了项目架构、代码实现和用户体验设计，并提出了性能优化和功能扩展建议。该项目展示了前端游戏开发的基本原理，适合作为学习案例，附有完整代码供参考使用。
目录
- （文后附完整代码）html+css+javascript HTML5打气球游戏项目分析报告
- 📚 效果展示
- 📚 本文简介
- 📚 一、项目架构概述
- 📘 1.1 项目文件结构
- 📘 1.2 技术栈分析
- 📚 二、HTML结构分析：语义化与模块化的界面搭建
- 📘 2.1 整体布局设计
- 📘 2.2 关键元素解析
- 📖 2.2.1 Canvas元素的设计
- 📖 2.2.2 游戏状态显示
- 📖 2.2.3 控制按钮区域
- 📚 三、CSS样式分析：视觉设计与交互体验
- 📘 3.1 整体视觉风格
- 📘 3.2 核心样式设计
- 📖 3.2.1 响应式布局
- 📖 3.2.2 爆炸动画效果
- 📖 3.2.3 按钮交互设计
- 📚 四、JavaScript代码分析：游戏逻辑与核心功能
- 📘 4.1 游戏状态管理
- 📘 4.2 核心游戏功能
- 📖 4.2.1 气球系统
- 📖 4.2.2 得分系统
- 📖 4.2.3 音效系统
- 📖 4.2.4 特效系统
- 📘 4.3 游戏控制功能
- 📚 五、游戏功能与用户体验分析
- 📘 5.1 游戏流程
- 📘 5.2 用户体验设计
- 📚 六、技术亮点与优化建议
- 📘 6.1 技术亮点
- 📘 6.2 优化建议
- 📚 七、总结
- 📚 完整代码（可直接使用）
- 📘 项目目录
- 📘 项目代码
- 📖 html代码
- 📖 javascript代码
📚 一、项目架构概述
📘 1.1 项目文件结构
项目采用简洁的文件组织方式，包含三个核心文件：
index.html：游戏主页面，包含HTML结构和内联CSS样式script.js：游戏核心逻辑，实现气球生成、碰撞检测、得分系统等功能backgroundMusic.js：背景音乐模块，使用Web Audio API生成游戏音乐
📘 1.2 技术栈分析
- 前端基础：HTML5 + CSS3 + JavaScript (ES6+)
- 图形渲染：HTML5 Canvas API 用于气球绘制和动画
- 音频处理：Web Audio API 用于背景音乐和音效
- 动画效果：CSS3 动画 + JavaScript 帧动画
- 交互处理：DOM事件监听和Canvas点击检测
📚 二、HTML结构分析：语义化与模块化的界面搭建
📘 2.1 整体布局设计
项目采用现代化的Flexbox布局，实现了居中对齐的游戏界面：
- 页面主体使用
flex-direction: column垂直排列元素 - 游戏容器
#gameContainer作为核心区域，包含Canvas画布和分数显示 - 控制按钮区域
#controls位于游戏容器下方，提供游戏控制功能
📘 2.2 关键元素解析
📖 2.2.1 Canvas元素的设计
- 使用单个Canvas元素
#gameCanvas作为游戏主画布，尺寸为800x600像素 - Canvas元素设置了
cursor: crosshair，增强了游戏的瞄准体验 - Canvas元素通过JavaScript动态绘制气球和处理游戏逻辑
📖 2.2.2 游戏状态显示
- 分数显示
#score采用绝对定位，位于游戏容器左上角 - 分数面板使用半透明背景，确保在游戏画面上清晰可见
- 分数实时更新，反映玩家的游戏进度
📖 2.2.3 控制按钮区域
- 提供三个核心控制按钮：开始游戏、暂停和重置
- 按钮设计简洁美观，包含悬停和点击效果
- 按钮事件通过JavaScript绑定，实现游戏状态的控制
📚 三、CSS样式分析：视觉设计与交互体验
📘 3.1 整体视觉风格
- 采用天蓝色背景
#87CEEB，营造轻松愉快的游戏氛围 - 游戏容器使用白色背景和圆角设计，搭配阴影效果，增强立体感
- 标题和控制元素采用深色文本，确保良好的可读性
📘 3.2 核心样式设计
📖 3.2.1 响应式布局
- 使用Flexbox实现页面元素的灵活布局
- 设置
min-height: 100vh确保游戏界面在不同设备上都能完整显示 - 游戏容器固定尺寸，保证游戏体验的一致性
📖 3.2.2 爆炸动画效果
- 定义
.explosion类实现气球爆炸的视觉效果 - 使用CSS3关键帧动画
explosion-animation实现缩放和旋转效果 - 动画持续1秒，包含三个关键帧：起始状态、中间状态和结束状态
- 动画结束后元素自动消失，提升游戏体验
📖 3.2.3 按钮交互设计
- 按钮使用绿色系配色，符合游戏的积极氛围
- 实现悬停和点击状态的颜色变化，提供清晰的视觉反馈
- 按钮添加圆角和过渡效果，增强现代感
📚 四、JavaScript代码分析：游戏逻辑与核心功能
📘 4.1 游戏状态管理
- 采用对象字面量
gameState管理游戏状态，包含游戏运行、暂停、结束和分数等状态 - 状态管理清晰，便于游戏逻辑的控制和判断
- 通过状态检查确保游戏功能的正确执行
📘 4.2 核心游戏功能
📖 4.2.1 气球系统
- 气球生成：
createBalloon()函数随机生成不同大小、速度和颜色的气球 - 气球渲染：
renderBalloons()函数使用Canvas API绘制气球主体和绳子 - 气球移动：
updateBalloons()函数实现气球的向上移动和边界检测 - 气球碰撞：
handleCanvasClick()函数实现点击检测和碰撞判断
📖 4.2.2 得分系统
- 每次点击气球得分+10分
- 分数实时更新并显示在游戏界面上
- 游戏重置时分数归零
📖 4.2.3 音效系统
- 爆炸音效：
playPopSound()函数使用Web Audio API生成气球爆炸音效 - 背景音乐：
backgroundMusic.js模块生成科幻电子风格的背景音乐 - 音频上下文管理：实现游戏暂停/恢复时的音频控制
📖 4.2.4 特效系统
- 爆炸特效：
showExplosionEffect()函数显示随机表情符号的爆炸效果 - 视觉反馈：爆炸效果包含缩放和旋转动画，增强游戏的趣味性
📘 4.3 游戏控制功能
- 开始游戏：
startGame()函数启动游戏循环和气球生成 - 暂停/恢复：
togglePause()函数切换游戏暂停状态 - 重置游戏：
resetGame()函数重置游戏状态和分数
📚 五、游戏功能与用户体验分析
📘 5.1 游戏流程
- 初始化：页面加载后初始化游戏环境和音频上下文
- 开始游戏：点击"开始游戏"按钮，开始生成气球和播放音乐
- 游戏进行：点击气球得分，气球不断向上移动
- 暂停游戏：点击"暂停"按钮暂停游戏和音乐
- 重置游戏：点击"重置"按钮清空游戏状态，准备重新开始
📘 5.2 用户体验设计
- 直观的操作：点击气球即可得分，操作简单易懂
- 实时反馈：点击气球时有爆炸特效和音效反馈
- 视觉引导：光标变为十字准星，引导用户瞄准
- 状态清晰：分数实时显示，游戏状态一目了然
📚 六、技术亮点与优化建议
📘 6.1 技术亮点
- Canvas性能优化：使用
requestAnimationFrame实现流畅的游戏渲染 - Web Audio API应用：创造性地使用Web Audio API生成游戏音乐和音效
- 模块化设计：将游戏逻辑和音乐模块分离，提高代码可维护性
- 随机化系统：气球的大小、速度、颜色随机生成，增加游戏的可玩性
- 响应式交互：结合Canvas点击检测和DOM事件处理，实现精确的游戏交互
📘 6.2 优化建议
-
性能优化：
- 实现气球对象池，减少频繁的对象创建和销毁
- 使用离屏Canvas预渲染气球，提高渲染性能
-
功能扩展：
- 添加游戏难度级别，随着分数增加提高气球生成速度
- 实现游戏结束条件，如气球飞出屏幕数量达到上限
- 添加最高分记录功能，使用localStorage存储
-
用户体验：
- 添加游戏开始界面和游戏结束界面
- 实现气球的飘动效果，增加游戏的真实感
- 添加更多类型的气球和特殊道具
-
兼容性：
- 添加浏览器兼容性检测，针对不支持Web Audio API的浏览器提供降级方案
- 实现触摸设备的支持，扩展游戏的使用场景
📚 七、总结
HTML5打气球游戏是一个设计简洁但功能完整的前端游戏项目，展示了如何使用现代前端技术构建交互式游戏。项目通过Canvas API实现游戏图形，Web Audio API实现音效，结合CSS3动画和JavaScript逻辑，创建了一个视觉效果良好、交互流畅的游戏体验。
该项目适合作为前端游戏开发的学习案例，展示了如何组织游戏代码、管理游戏状态、实现游戏物理和处理用户交互。同时，项目也有很大的扩展空间，可以通过添加更多功能和优化性能，进一步提升游戏的可玩性和用户体验。
📚 完整代码（可直接使用）
📘 项目目录
📘 项目代码
📖 html代码
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打气球游戏title>
<style>
body {
margin: 0;
padding: 0;
background-color: #87CEEB;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
h1 {
color: #333;
margin-bottom: 20px;
}
#gameContainer {
position: relative;
width: 800px;
height: 600px;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
#gameCanvas {
display: block;
cursor: crosshair;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
font-weight: bold;
color: #333;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px 10px;
border-radius: 5px;
}
#controls {
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 0 10px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
button:active {
background-color: #3e8e41;
}
.explosion {
position: absolute;
font-size: 30px;
pointer-events: none;
z-index: 1000;
animation: explosion-animation 1s ease-out forwards;
}
@keyframes explosion-animation {
0% {
transform: scale(0) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.5) rotate(180deg);
opacity: 0.8;
}
100% {
transform: scale(2) rotate(360deg);
opacity: 0;
}
}
style>
head>
<body>
<h1>打气球游戏h1>
<div id="gameContainer">
<div id="score">分数: 0div>
<canvas id="gameCanvas" width="800" height="600">canvas>
div>
<div id="controls">
<button id="startBtn">开始游戏button>
<button id="pauseBtn">暂停button>
<button id="resetBtn">重置button>
div>
<script src="backgroundMusic.js">script>
<script src="script.js">script>
body>
html>
📖 javascript代码
backgroundMusic.js
// 背景音乐模块
// 使用 Web Audio API 生成背景音乐
let musicInterval = null;
// 注意：audioContext 和 backgroundMusicGain 在主脚本中声明，这里只存储引用
let audioContextRef = null;
let backgroundMusicGainRef = null;
// 初始化背景音乐（需要传入音频上下文和增益节点）
function initBackgroundMusic(audioCtx, musicGain) {
audioContextRef = audioCtx;
backgroundMusicGainRef = musicGain;
}
// 获取游戏状态的函数（由主游戏传入）
let getGameState = null;
// 设置游戏状态获取函数
function setGameStateGetter(getter) {
getGameState = getter;
}
// 生成背景音乐
function startBackgroundMusic() {
if (!audioContextRef || !backgroundMusicGainRef || musicInterval) return;
try {
// 激进快速的旋律循环 - 科幻电子风格
const melody = [
// 第一段：快速上升
{ freq1: 523.25, freq2: 659.25, duration: 0.2, bass: 261.63 }, // C5, E5, C4低音
{ freq1: 659.25, freq2: 783.99, duration: 0.2, bass: 329.63 }, // E5, G5, E4
{ freq1: 783.99, freq2: 987.77, duration: 0.2, bass: 392.00 }, // G5, B5, G4
{ freq1: 987.77, freq2: 1174.66, duration: 0.2, bass: 493.88 }, // B5, D6, B4
// 第二段：跳跃音程
{ freq1: 880.00, freq2: 1318.51, duration: 0.2, bass: 440.00 }, // A5, E6, A4
{ freq1: 1046.50, freq2: 1567.98, duration: 0.2, bass: 523.25 }, // C6, G6, C5
{ freq1: 1174.66, freq2: 1760.00, duration: 0.2, bass: 587.33 }, // D6, A6, D5
// 第三段：快速下降
{ freq1: 1046.50, freq2: 1318.51, duration: 0.2, bass: 523.25 }, // C6, E6, C5
{ freq1: 880.00, freq2: 1108.73, duration: 0.2, bass: 440.00 }, // A5, C#6, A4
{ freq1: 783.99, freq2: 987.77, duration: 0.2, bass: 392.00 }, // G5, B5, G4
{ freq1: 659.25, freq2: 830.61, duration: 0.2, bass: 329.63 }, // E5, G#5, E4
];
let noteIndex = 0;
function playNextNote() {
// 获取当前游戏状态
if (getGameState) {
const state = getGameState();
if (!state.gameRunning || state.gamePaused || state.gameOver) {
return;
}
}
const note = melody[noteIndex];
const currentTime = audioContextRef.currentTime;
// 创建主旋律振荡器（高频，更尖锐）
const osc1 = audioContextRef.createOscillator();
const osc2 = audioContextRef.createOscillator();
const gain1 = audioContextRef.createGain();
const gain2 = audioContextRef.createGain();
osc1.connect(gain1);
osc2.connect(gain2);
gain1.connect(backgroundMusicGainRef);
gain2.connect(backgroundMusicGainRef);
// 使用更激进的波形：方波和锯齿波
osc1.type = 'square'; // 方波更尖锐
osc2.type = 'sawtooth'; // 锯齿波更激进
osc1.frequency.value = note.freq1;
osc2.frequency.value = note.freq2;
// 更快的起音和衰减，营造冲击感
gain1.gain.setValueAtTime(0.12, currentTime);
gain1.gain.exponentialRampToValueAtTime(0.01, currentTime + note.duration);
gain2.gain.setValueAtTime(0.10, currentTime);
gain2.gain.exponentialRampToValueAtTime(0.01, currentTime + note.duration);
osc1.start(currentTime);
osc1.stop(currentTime + note.duration);
osc2.start(currentTime);
osc2.stop(currentTime + note.duration);
// 添加低音增强节奏感（如果有低音频率）
if (note.bass) {
const bassOsc = audioContextRef.createOscillator();
const bassGain = audioContextRef.createGain();
bassOsc.connect(bassGain);
bassGain.connect(backgroundMusicGainRef);
bassOsc.type = 'square'; // 低音使用方波
bassOsc.frequency.value = note.bass;
bassGain.gain.setValueAtTime(0.08, currentTime);
bassGain.gain.exponentialRampToValueAtTime(0.01, currentTime + note.duration);
bassOsc.start(currentTime);
bassOsc.stop(currentTime + note.duration);
}
noteIndex = (noteIndex + 1) % melody.length;
}
// 立即播放第一个音符
playNextNote();
// 设置定时器循环播放 - 更快的节奏（250ms间隔）
musicInterval = setInterval(() => {
if (getGameState) {
const state = getGameState();
if (state.gameRunning && !state.gamePaused && !state.gameOver) {
playNextNote();
}
} else {
playNextNote();
}
}, 250); // 每250ms播放一个音符（比原来快一倍）
} catch (e) {
console.log('背景音乐生成失败:', e);
}
}
// 停止背景音乐
function stopBackgroundMusic() {
if (musicInterval) {
clearInterval(musicInterval);
musicInterval = null;
}
}
script.js
// 打气球游戏主逻辑
// 游戏状态
let gameState = {
gameRunning: false,
gamePaused: false,
gameOver: false,
score: 0
};
// 画布和上下文
let canvas, ctx;
// 气球数组
let balloons = [];
// 音频上下文和增益节点
let audioContext, backgroundMusicGain, soundEffectGain;
// 气球配置
const BALLOON_CONFIG = {
minSize: 30,
maxSize: 60,
minSpeed: 1,
maxSpeed: 3,
spawnRate: 1000, // 每1000ms生成一个气球
colors: ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink']
};
// 特效表情
const EXPLOSION_EMOJIS = ['💥', '🎈', '🎉', '🎊', '✨', '🌟', '💫'];
// 初始化游戏
function initGame() {
// 获取画布元素
canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext('2d');
// 初始化音频上下文
try {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 创建增益节点
backgroundMusicGain = audioContext.createGain();
backgroundMusicGain.gain.value = 0.3;
backgroundMusicGain.connect(audioContext.destination);
soundEffectGain = audioContext.createGain();
soundEffectGain.gain.value = 0.5;
soundEffectGain.connect(audioContext.destination);
// 初始化背景音乐
initBackgroundMusic(audioContext, backgroundMusicGain);
setGameStateGetter(() => gameState);
} catch (e) {
console.error('音频上下文初始化失败:', e);
}
// 添加事件监听器
canvas.addEventListener('click', handleCanvasClick);
document.getElementById('startBtn').addEventListener('click', startGame);
document.getElementById('pauseBtn').addEventListener('click', togglePause);
document.getElementById('resetBtn').addEventListener('click', resetGame);
// 渲染初始画面
render();
}
// 生成随机数
function random(min, max) {
return Math.random() * (max - min) + min;
}
// 创建气球
function createBalloon() {
const size = random(BALLOON_CONFIG.minSize, BALLOON_CONFIG.maxSize);
const balloon = {
x: random(size, canvas.width - size),
y: canvas.height + size,
size: size,
speed: random(BALLOON_CONFIG.minSpeed, BALLOON_CONFIG.maxSpeed),
color: BALLOON_CONFIG.colors[Math.floor(Math.random() * BALLOON_CONFIG.colors.length)],
popped: false
};
balloons.push(balloon);
}
// 渲染气球
function renderBalloons() {
balloons.forEach(balloon => {
if (balloon.popped) return;
// 绘制气球主体
ctx.beginPath();
ctx.arc(balloon.x, balloon.y, balloon.size, 0, Math.PI * 2);
ctx.fillStyle = balloon.color;
ctx.fill();
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.stroke();
// 绘制气球绳子
ctx.beginPath();
ctx.moveTo(balloon.x, balloon.y + balloon.size);
ctx.lineTo(balloon.x, balloon.y + balloon.size + 20);
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
ctx.stroke();
});
}
// 渲染游戏画面
function render() {
// 清空画布
ctx.fillStyle = '#87CEEB';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 渲染气球
renderBalloons();
// 更新分数显示
document.getElementById('score').textContent = `分数: ${gameState.score}`;
// 如果游戏运行中，继续渲染
if (gameState.gameRunning && !gameState.gamePaused) {
requestAnimationFrame(render);
}
}
// 更新气球位置
function updateBalloons() {
if (!gameState.gameRunning || gameState.gamePaused) return;
balloons.forEach((balloon, index) => {
if (balloon.popped) {
// 移除已爆炸的气球
balloons.splice(index, 1);
return;
}
// 向上移动气球
balloon.y -= balloon.speed;
// 如果气球飞出画布，移除它
if (balloon.y + balloon.size < 0) {
balloons.splice(index, 1);
}
});
setTimeout(updateBalloons, 16); // 约60fps
}
// 生成气球
function spawnBalloons() {
if (!gameState.gameRunning || gameState.gamePaused) return;
createBalloon();
setTimeout(spawnBalloons, BALLOON_CONFIG.spawnRate);
}
// 处理画布点击
function handleCanvasClick(e) {
if (!gameState.gameRunning || gameState.gamePaused) return;
// 获取点击位置
const rect = canvas.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickY = e.clientY - rect.top;
// 检查是否点击到气球
balloons.forEach((balloon, index) => {
if (balloon.popped) return;
// 计算点击位置到气球中心的距离
const distance = Math.sqrt(
Math.pow(clickX - balloon.x, 2) + Math.pow(clickY - balloon.y, 2)
);
// 如果点击到气球
if (distance <= balloon.size) {
popBalloon(balloon, index, clickX, clickY);
}
});
}
// 爆炸气球
function popBalloon(balloon, index, x, y) {
// 标记气球为已爆炸
balloon.popped = true;
// 增加分数
gameState.score += 10;
// 播放爆炸音效
playPopSound();
// 显示爆炸特效
showExplosionEffect(x, y);
}
// 显示爆炸特效
function showExplosionEffect(x, y) {
// 创建爆炸特效元素
const explosion = document.createElement('div');
explosion.className = 'explosion';
// 随机选择一个爆炸表情
explosion.textContent = EXPLOSION_EMOJIS[Math.floor(Math.random() * EXPLOSION_EMOJIS.length)];
// 设置位置
explosion.style.left = `${x - 15}px`;
explosion.style.top = `${y - 15}px`;
// 添加到游戏容器
document.getElementById('gameContainer').appendChild(explosion);
// 1秒后移除特效
setTimeout(() => {
explosion.remove();
}, 1000);
}
// 播放爆炸音效
function playPopSound() {
if (!audioContext) return;
try {
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(soundEffectGain);
// 设置音效参数
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
oscillator.frequency.exponentialRampToValueAtTime(200, audioContext.currentTime + 0.1);
gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + 0.1);
} catch (e) {
console.error('爆炸音效播放失败:', e);
}
}
// 开始游戏
function startGame() {
if (gameState.gameRunning && !gameState.gamePaused) return;
gameState.gameRunning = true;
gameState.gamePaused = false;
// 启动音频上下文（需要用户交互才能启动）
if (audioContext && audioContext.state === 'suspended') {
audioContext.resume();
startBackgroundMusic();
}
// 开始生成气球和更新位置
spawnBalloons();
updateBalloons();
// 开始渲染
render();
}
// 切换暂停状态
function togglePause() {
if (!gameState.gameRunning) return;
gameState.gamePaused = !gameState.gamePaused;
if (!gameState.gamePaused) {
// 恢复游戏
spawnBalloons();
updateBalloons();
render();
// 恢复音频上下文
if (audioContext && audioContext.state === 'suspended') {
audioContext.resume();
startBackgroundMusic();
}
} else {
// 暂停音频上下文
if (audioContext && audioContext.state === 'running') {
audioContext.suspend();
stopBackgroundMusic();
}
}
}
// 重置游戏
function resetGame() {
// 停止游戏
gameState.gameRunning = false;
gameState.gamePaused = false;
gameState.gameOver = false;
gameState.score = 0;
// 清空气球
balloons = [];
// 停止背景音乐
stopBackgroundMusic();
// 停止音频上下文
if (audioContext && audioContext.state === 'running') {
audioContext.suspend();
}
// 重新渲染
render();
}
// 页面加载完成后初始化游戏
window.addEventListener('DOMContentLoaded', initGame);
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作
