🦁 Leo游戏部署架构说明
📊 系统架构流程图
👤
用户浏览器
输入: s.linapp.fun/Leo.html
🌐
DNS域名解析
s.linapp.fun → 服务器IP地址
🖥️
Web服务器
Linux服务器 (Nginx/Apache)
接收HTTP请求
💾
挂载网盘
路径: /mnt/www/
文件: Leo.html (14KB)
🎮
浏览器渲染游戏
纯前端HTML5游戏
Canvas绘图 + JavaScript逻辑
🚀 部署步骤详解
- 步骤1：开发游戏
- 使用HTML5 + CSS3 + JavaScript开发纯前端游戏
- 创建文件: Leo.html
- 文件大小: 14KB
- 步骤2：部署到服务器
cp /home/G9/Leo.html /mnt/www/Leo.html
- 源文件: /home/G9/Leo.html
- 目标路径: /mnt/www/Leo.html
- 步骤3：Web服务器配置
- Web服务器(Nginx/Apache)配置根目录指向 /mnt/www/
- 域名 s.linapp.fun 绑定到该服务器
- 访问 s.linapp.fun/Leo.html 时，服务器读取 /mnt/www/Leo.html
- 步骤4：用户访问
- 用户在浏览器输入: http://s.linapp.fun/Leo.html
- 浏览器下载HTML文件
- 游戏在用户浏览器中运行（无需服务器计算）
🏗️ 技术架构详解
| 组件 |
技术/工具 |
说明 |
| 域名 |
s.linapp.fun |
指向Web服务器的域名 |
| DNS解析 |
域名解析服务 |
将域名转换为服务器IP地址 |
| Web服务器 |
Linux + Nginx/Apache |
处理HTTP请求，返回静态文件 |
| 存储 |
/mnt/www/ (挂载网盘) |
存储网站文件的目录 |
| 游戏文件 |
Leo.html (14KB) |
纯前端HTML5游戏 |
| 游戏引擎 |
Canvas API + JavaScript |
浏览器原生技术，无需插件 |
📁 文件路径映射
用户访问URL: http://s.linapp.fun/Leo.html
↓
服务器文件路径: /mnt/www/Leo.html
↓
开发原始文件: /home/G9/Leo.html
🎮 游戏特性
- 纯前端运行：游戏完全在用户浏览器中运行，不占用服务器资源
- 无需数据库：单文件HTML，包含所有逻辑和样式
- 跨平台：支持所有现代浏览器（Chrome、Firefox、Safari、Edge）
- 轻量级：文件大小仅14KB，加载速度快
- 响应式设计：自适应不同屏幕尺寸
🌐 网络请求流程
详细流程：
1️⃣ 用户操作：在浏览器地址栏输入 s.linapp.fun/Leo.html
2️⃣ DNS查询：浏览器向DNS服务器查询 s.linapp.fun 的IP地址
3️⃣ 建立连接：浏览器通过HTTP协议连接到服务器的80端口
4️⃣ 请求文件：浏览器发送 GET /Leo.html 请求
5️⃣ 服务器处理：Web服务器读取 /mnt/www/Leo.html 文件
6️⃣ 返回响应：服务器将HTML文件内容返回给浏览器
7️⃣ 渲染游戏：浏览器解析HTML，执行JavaScript，游戏开始运行
💡 关键技术点
挂载网盘 /mnt/www/
- Linux系统中的挂载点(mount point)
- 可能是网络存储(NFS、CIFS)或本地磁盘
- Web服务器配置此目录为网站根目录
静态文件服务
- Web服务器直接返回HTML文件，无需后端处理
- 高效、快速、低资源消耗
HTML5 Canvas
- 使用Canvas API绘制游戏画面
- JavaScript控制游戏逻辑和动画
- requestAnimationFrame实现流畅动画
🎯 访问游戏
✅ 部署完成状态：
✓ 游戏文件已创建
✓ 已部署到 /mnt/www/Leo.html
✓ 可通过 http://s.linapp.fun/Leo.html 访问
✓ 文件大小：14KB
✓ 部署时间：2025-10-23