📚 G7 扫雷游戏开发文档
📋 项目概述
项目名称：G7 扫雷游戏
项目类型：纯前端 HTML 小游戏
技术栈：HTML5 + CSS3 + JavaScript
访问地址：http://s.linapp.fun/G7.html
🏗️ 系统架构图
🌐
用户浏览器
输入 URL
s.linapp.fun/G7.html
① DNS 解析
🔍
DNS 域名服务器
域名 → IP 地址
s.linapp.fun → 服务器 IP
② HTTP 请求
🖥️
Web 服务器
Nginx / Apache
处理 HTTP 请求，路由到文件
③ 读取文件
💾
网络驱动器
/mnt/www/G7.html
共享存储空间
④ 返回 HTML
✨
浏览器渲染
显示扫雷游戏
执行 JavaScript 代码
🔧 开发与部署流程
-
创建游戏文件
在本地目录创建 G7.html 文件
使用纯前端技术栈：HTML + CSS + JavaScript
实现扫雷游戏的完整逻辑和交互
-
保存到本地目录
文件路径：/home/G7/G7.html
文件大小：约 16KB
包含完整的游戏代码、样式和脚本
-
复制到网络驱动器
目标路径：/mnt/www/
这是一个共享的网络存储空间
Web 服务器可以访问此目录
-
Web 服务器配置
服务器软件：Nginx 或 Apache
域名配置：s.linapp.fun
文档根目录：/mnt/www/
-
用户访问
通过浏览器访问 http://s.linapp.fun/G7.html
游戏在浏览器中运行
无需服务器端处理，纯前端运行
💻 部署命令
nano /home/G7/G7.html
cp /home/G7/G7.html /mnt/www/G7.html
ls -lh /mnt/www/G7.html
chmod 755 /mnt/www/G7.html
🗂️ 目录结构说明
📁 本地开发目录
路径：/home/G7/
用途：开发和测试
权限：用户私有
文件：G7.html (源文件)
💾 网络驱动器
路径：/mnt/www/
用途：Web 服务文件存储
类型：共享网络存储
特点：多用户访问
🌐 Web 服务器
软件：Nginx / Apache
端口：80 (HTTP)
根目录：/mnt/www/
功能：处理 HTTP 请求
🔗 域名系统
域名：s.linapp.fun
类型：A 记录
功能：域名解析到 IP
用途：友好的访问地址
🎮 游戏功能特性
核心功能
- ✅ 三种难度级别（简单 8x8、中等 12x12、困难 16x16）
- ✅ 智能地雷放置（首次点击安全区域）
- ✅ 实时计时器和剩余地雷计数
- ✅ 左键点击翻开格子
- ✅ 右键点击标记旗帜
- ✅ 自动展开空白区域
- ✅ 胜利/失败提示
- ✅ 响应式设计，支持移动端
- ✅ 渐变色 UI 设计
- ✅ 平滑动画效果
📊 访问流程详解
完整的请求-响应流程
- 用户操作：在浏览器地址栏输入
s.linapp.fun/G7.html
- DNS 查询：浏览器向 DNS 服务器查询域名对应的 IP 地址
- DNS 响应：DNS 返回服务器的 IP 地址给浏览器
- 建立连接：浏览器通过 IP 地址与 Web 服务器建立 TCP 连接
- HTTP 请求：浏览器发送 HTTP GET 请求到服务器
- 服务器处理：Nginx/Apache 接收请求，查找 /mnt/www/G7.html 文件
- 读取文件：服务器从网络驱动器读取 G7.html 文件内容
- HTTP 响应：服务器将 HTML 文件内容返回给浏览器
- 浏览器解析：浏览器解析 HTML、CSS 和 JavaScript
- 渲染显示：浏览器渲染页面，显示扫雷游戏界面
- 脚本执行：JavaScript 代码开始执行，游戏进入可交互状态
- 用户游玩：用户可以开始玩扫雷游戏！
🔑 关键技术点
纯前端架构
无需后端服务器，所有逻辑在浏览器中运行，降低服务器负担，提高响应速度。
单文件部署
整个游戏包含在一个 HTML 文件中，部署简单，易于维护和分发。
网络存储
/mnt/www/ 是共享网络驱动器，支持多用户访问，方便团队协作。
域名映射
通过域名系统将友好的 URL 映射到服务器 IP，便于记忆和分享。
✅ 部署验证
✔️ 部署成功确认
✅ 文件已创建：/home/G7/G7.html
✅ 文件已复制到：/mnt/www/G7.html
✅ 文件大小：16 KB
✅ 文件权限：rwxrwxrwx (777)
✅ 访问地址：http://s.linapp.fun/G7.html
✅ 状态：已上线，可正常访问