🎮 扫雷游戏开发与部署文档

📋 项目概述

本文档详细记录了扫雷游戏（t3.html）的开发过程、部署流程和系统架构。

• 项目名称：扫雷游戏
• 访问地址：s.linapp.fun/t3.html
• 部署路径：/mnt/www/t3.html
• 开发工具：Claude Code

🛠️ 技术栈

🔄 开发流程

cp /home/T3/t3.html /mnt/www/

🌐 系统架构图

🌍 域名配置流程

⚙️ Web服务器配置示例

Nginx 配置

server {
    listen 80;
    server_name s.linapp.fun;

    root /mnt/www;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(html|css|js)$ {
        expires 1h;
        add_header Cache-Control "public";
    }
}

Apache 配置

<VirtualHost *:80>
    ServerName s.linapp.fun
    DocumentRoot /mnt/www

    <Directory /mnt/www>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

📊 部署命令详解

# 创建文件
Write: /home/T3/t3.html

# 部署到网站目录
cp /home/T3/t3.html /mnt/www/

# 验证文件
ls -la /mnt/www/t3.html

# 测试访问
curl http://s.linapp.fun/t3.html

🎯 游戏核心算法

1. 地雷生成算法

• 随机生成坐标，避开首次点击位置
• 检查是否已放置地雷（避免重复）
• 更新周围8格的数字提示

2. 自动展开算法

• 使用递归实现
• 遇到0（空白）则展开周围8格
• 遇到数字则停止展开

3. 胜利判定

• 遍历所有非地雷格子
• 检查是否全部已翻开
• 满足条件则游戏胜利

📱 响应式设计

• 使用相对单位确保不同屏幕适配
• Grid布局自动调整
• 触摸设备优化交互
• 移动端友好的按钮尺寸

🚀 性能优化

• 单文件部署，无外部依赖
• CSS内联减少HTTP请求
• 原生JavaScript提升性能
• 事件委托优化监听

✅ 测试验证

📝 总结

本项目展示了从需求分析到部署上线的完整流程：

• ✅ 使用原生Web技术实现经典扫雷游戏
• ✅ 简洁的单文件部署方案
• ✅ 清晰的开发和部署流程
• ✅ 完善的域名配置说明
• ✅ 可视化的系统架构图

🎮 体验游戏：s.linapp.fun/t3.html