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

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

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

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

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

繁星点点，星空浩瀚

文章目录

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

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

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

前言

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

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