🌟 这是星际大战系列的第三篇，感谢一路以来支持和关注这个项目的每一位朋友！
💡 文章力求严谨，但难免有疏漏之处，欢迎各位朋友指出，让我们一起在交流中进步。
🎁 项目代码、文档和相关资源都可以免费获取，希望能帮助到更多对游戏开发感兴趣的朋友。
💌 如果您有任何想法、建议或疑问，都欢迎在评论区留言或通过私信与我交流。您的每一个反馈都是项目进步的动力！
文章目录
- 【福利分享】星际大战飞机大战升级版 - 前后端完整版本
- 前言
- 演示视频
- 项目概述
- 技术栈
- 前端技术栈
- 后端技术栈
- 新增功能模块
- 1. 用户系统
- 2. 排行榜系统
- 3. 游戏记录系统
- 4. 管理员功能
- 项目特点
- 前端详细介绍
- 游戏核心功能
- 1. 游戏引擎设计
- 2. 视觉效果系统
- 3. 音频系统
- 用户界面设计
- 1. 响应式布局
- 2. 主题设计
- 3. 交互设计
- 前后端交互
- 1. JWT认证流程
- 2. 游戏数据同步
- 3. 排行榜实现
- 排行榜核心代码实现
- 性能优化
- 1. 渲染优化
- 2. 资源管理
- 3. 代码优化
- 开发亮点
- 1. 模块化架构
- 2. 自定义游戏引擎
- 3. 创新玩法设计
- 后端详细介绍
- 系统架构设计
- 1. 分层架构
- 2. 安全架构
- 3. 缓存架构
- 核心功能实现
- 1. 用户认证与授权
- 2. 游戏记录管理
- 3. 排行榜查询优化
- 性能优化技术
- 1. 数据库优化
- 2. 缓存优化
- 3. API响应优化
- 安全性设计
- 1. 密码安全
- 2. API安全
- 3. 数据安全
- 可扩展性设计
- 1. 模块化设计
- 2. 接口设计
- 3. 配置外部化
- 部署说明
- 源码获取
- 致谢
- 结语
【福利分享】星际大战飞机大战升级版 - 前后端完整版本
繁星点点，太空浩瀚。让我们再次启程，在代码中探索无尽的可能。
前言
大家好，我是程序员果冻～。首先要特别感谢之前纯前端版本的广大读者们的支持和鼓励！你们的点赞、收藏、评论和私信建议给了我极大的动力。应大家的要求，这次我为大家带来了全新升级的前后端完整版本，适合正在学习JAVA的新手朋友学习练习。
源码附文章末尾。
演示视频
前后端进阶版飞机大战
如果上面的视频无法观看，可能是因为还在审核中，可以先看下面的视频。
前后端进阶版飞机大战
项目概述
本次升级版本在保留了原有炫酷游戏玩法的基础上，新增了用户系统、排行榜、游戏记录等功能，让游戏体验更加完整和社交化。项目采用前后端分离架构，是一个非常适合学习全栈开发的示例项目。
技术栈
前端技术栈
- HTML5 + CSS3
- 原生JavaScript (ES6+)
- Canvas游戏渲染
- JWT前端认证
- 响应式设计
后端技术栈
- Spring Boot 2.x
- Spring Security
- JWT认证
- MySQL数据库
- Maven项目管理
新增功能模块
1. 用户系统
- 用户注册登录
- JWT token认证
- 角色权限管理（普通用户/管理员）
- 个人信息管理
2. 排行榜系统
- 多维度排行（得分/击杀/收集/时长）
- 难度分类（简单/普通/困难模式）
- 实时更新
- 分页展示
3. 游戏记录系统
- 详细游戏数据记录
- 个人游戏历史查询
- 数据统计分析
- 游戏进度追踪
4. 管理员功能
- 用户管理
- 数据监控
- 系统维护
项目特点
-
完整的用户体验
- 炫酷的游戏界面
- 流畅的操作体验
- 清晰的游戏反馈
-
安全性保障
- JWT认证
- 密码加密存储
- 权限精细控制
-
数据统计分析
- 个人游戏数据追踪
- 排行榜实时更新
- 游戏记录详细保存
-
优秀的代码结构
- 模块化设计
- 代码注释完善
- 便于学习和二次开发
前端详细介绍
游戏核心功能
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
