【宇宙回响】从Canvas到MySQL：飞机大战的全栈交响曲【附演示视频与源码】

🌟 这是星际大战系列的第三篇，感谢一路以来支持和关注这个项目的每一位朋友！

💡 文章力求严谨，但难免有疏漏之处，欢迎各位朋友指出，让我们一起在交流中进步。

🎁 项目代码、文档和相关资源都可以免费获取，希望能帮助到更多对游戏开发感兴趣的朋友。

💌 如果您有任何想法、建议或疑问，都欢迎在评论区留言或通过私信与我交流。您的每一个反馈都是项目进步的动力！

【福利分享】星际大战飞机大战升级版 - 前后端完整版本

繁星点点，太空浩瀚。让我们再次启程，在代码中探索无尽的可能。

前言

大家好，我是程序员果冻～。首先要特别感谢之前纯前端版本的广大读者们的支持和鼓励！你们的点赞、收藏、评论和私信建议给了我极大的动力。应大家的要求，这次我为大家带来了全新升级的前后端完整版本，适合正在学习JAVA的新手朋友学习练习。

源码附文章末尾。

演示视频

前后端进阶版飞机大战

如果上面的视频无法观看，可能是因为还在审核中，可以先看下面的视频。

前后端进阶版飞机大战

项目概述

本次升级版本在保留了原有炫酷游戏玩法的基础上，新增了用户系统、排行榜、游戏记录等功能，让游戏体验更加完整和社交化。项目采用前后端分离架构，是一个非常适合学习全栈开发的示例项目。

技术栈

前端技术栈

• HTML5 + CSS3
• 原生JavaScript (ES6+)
• Canvas游戏渲染
• JWT前端认证
• 响应式设计

后端技术栈

• Spring Boot 2.x
• Spring Security
• JWT认证
• MySQL数据库
• Maven项目管理

新增功能模块

1. 用户系统

• 用户注册登录
• JWT token认证
• 角色权限管理（普通用户/管理员）
• 个人信息管理

2. 排行榜系统

• 多维度排行（得分/击杀/收集/时长）
• 难度分类（简单/普通/困难模式）
• 实时更新
• 分页展示

3. 游戏记录系统

• 详细游戏数据记录
• 个人游戏历史查询
• 数据统计分析
• 游戏进度追踪

4. 管理员功能

• 用户管理
• 数据监控
• 系统维护

项目特点

1. 完整的用户体验

   • 炫酷的游戏界面
   • 流畅的操作体验
   • 清晰的游戏反馈

2. 安全性保障

   • JWT认证
   • 密码加密存储
   • 权限精细控制

3. 数据统计分析

   • 个人游戏数据追踪
   • 排行榜实时更新
   • 游戏记录详细保存

4. 优秀的代码结构

   • 模块化设计
   • 代码注释完善
   • 便于学习和二次开发

前端详细介绍

游戏核心功能

1. 游戏引擎设计

本项目使用原生Canvas API构建了一个轻量级的2D游戏引擎，主要包括以下核心组件：

• Game类：游戏主控制器，负责游戏循环、状态管理和场景切换
• Player类：玩家飞船控制，包括移动、射击和碰撞检测
• Enemy类：敌人AI系统，支持多种敌人类型和行为模式
• Bullet类：子弹系统，支持不同弹道和伤害效果
• Item类：道具系统，提供多种游戏增益效果
• Background类：动态星空背景，创造沉浸式太空体验

每个组件都采用面向对象设计，具有高内聚低耦合的特点，便于扩展和维护。

2. 视觉效果系统

• 粒子系统：实现爆炸、引擎尾焰等特效
• 动态光效：飞船引擎光效、武器发射光效
• 视差背景：多层次星空背景，增强深度感
• 屏幕震动：爆炸和碰撞时的震动效果
• 动画过渡：平滑的游戏状态过渡动画

3. 音频系统

• AudioManager类：统一管理游戏音效和背景音乐
• 动态音效：根据游戏状态切换不同背景音乐
• 空间音效：根据事件发生位置调整音量和平衡
• 音频池：优化同时播放多个音效的性能

用户界面设计

1. 响应式布局

• 自适应不同屏幕尺寸，从手机到桌面设备
• 基于CSS Grid和Flexbox的灵活布局
• 媒体查询优化不同设备的游戏体验

2. 主题设计

• 深空科幻主题，暗色调背景配合霓虹色元素
• 半透明玻璃态UI面板，现代感十足
• 动态光效和渐变色，增强视觉冲击力
• 像素风格与现代UI的融合，独特的视觉风格

3. 交互设计

• 流畅的菜单导航系统
• 动态反馈的按钮和控件
• 直观的游戏控制方式
• 清晰的游戏状态指示器

前后端交互

1. JWT认证流程

• 登录/注册请求发送用户凭据
• 服务器验证并返回JWT令牌
• 前端存储令牌并在后续请求中使用
• 令牌过期处理和自动登出机制

2. 游戏数据同步

• 游戏结束时自动保存游戏记录
• 异步提交游戏数据，不阻塞用户体验
• 错误重试机制，确保数据不丢失
• 本地缓存，应对网络不稳定情况

3. 排行榜实现

• 分页加载排行数据，优化性能
• 多维度排序和筛选
• 实时更新机制
• 高亮显示当前用户排名

排行榜核心代码实现

排行榜管理器设计采用了单例模式，集中处理排行榜相关的所有逻辑：

// 排行榜管理器
const LeaderboardManager = {currentPage: 0,pageSize: 10,currentDifficulty: 'EASY',  // 默认简单模式currentType: 'score',       // 默认得分排行init() {// 初始化排行榜UI和事件监听this.addLeaderboardButton();this.setupEventListeners();// 设置难度选择器const difficultySelect = document.getElementById('difficultySelect');if (difficultySelect) {difficultySelect.innerHTML = `<option value="EASY">简单模式</option><option value="NORMAL">普通模式</option><option value="HELL">困难模式</option>`;difficultySelect.value = this.currentDifficulty;}},fetchLeaderboard() {// 构建API请求URL，包含分页、难度和类型参数const url = `${API_BASE_URL}/api/records/leaderboard?difficulty=${this.currentDifficulty}&type=${this.currentType}&page=${this.currentPage}&size=${this.pageSize}`;// 发送请求获取排行榜数据fetch(url).then(response => response.json()).then(data => {this.renderLeaderboard(data);this.updatePagination(data);}).catch(error => console.error('获取排行榜失败:', error));}
}

排行榜渲染采用了模板化设计，支持不同类型数据的高亮显示：

renderLeaderboard(data) {const tbody = document.getElementById('leaderboardList');tbody.innerHTML = '';if (data.content.length === 0) {tbody.innerHTML = '<tr><td colspan="7" class="no-data">暂无数据</td></tr>';return;}// 根据排行类型决定高亮显示的列const highlightColumn = this.getHighlightColumn();data.content.forEach((record, index) => {const row = document