## 开始

在AI技术飞速发展的今天，代码生成工具已经从概念走向实用。作为一名开发者，我决定尝试一个有趣的项目 ：**完全使用AI编程助手（类似Claude Code、GitHub Copilot等工具）来开发一个完整的H5游戏**。

> 这个博客将记录整个开发过程，包括我与AI的"对话"、代码实现思路，以及最终的产品效果。不同于传统的"教程"，你会看到AI是如何一步步理解需求、编写代码的。

---

## 技术栈

- **前端**：原生HTML5 + CSS3 + JavaScript
- **AI工具**：Claude Code（或其他类似AI编程助手）
- **运行环境**：浏览器（无需后端）
- **项目类型**：单机小游戏

---

## 为什么选择扫雷游戏？

扫雷是一个看似简单但五脏俱全的项目：

- 经典的二维数组逻辑
- 递归算法（扩散效果）
- 用户交互（点击、标记）
- 游戏状态管理

非常适合用来测试AI编程能力。

---

## 准备好了吗？

接下来，让我们看看AI是如何"接手"整个开发过程的...

![告诉AI要做什么](https://developer.qcloudimg.com/http-save/yehe-6649301/2256ad7191560fe538ce9a104a05ed64.png)

如上图，因为这个项目很简单，所以需求就只有一句话，**最佳实践：需要明确告诉AI我们的需求，如果不知道该怎么写需求，也可以告诉AI我们想做什么，然后让AI帮我们分解需求，之后再按照需求列表来实现功能。**

![授权](https://developer.qcloudimg.com/http-save/yehe-6649301/f617091998664235e8f7ef8ff8036c5d.png)

---

## 以下全是AI生成的

### 📁 项目结构

```bash
扫雷/
├── index.html      # 游戏主页面
├── style.css       # 样式文件
├── game.js         # 游戏逻辑
├── README.md       # 本教程文档
└── img/            # 截图目录
    ├── 01-game-main.png
    ├── 02-game-started.png
    ├── 03-flagged.png
    ├── 04-medium-level.png
    └── 05-hard-level.png
```

---

### 🎮 游戏功能特性

- **三种难度级别**：简单(9x9)、中等(16x16)、困难(30x16)
- **左键点击**：揭开方块
- **右键点击**：标记/取消标记地雷
- **计时器**：记录游戏用时
- **剩余雷数显示**：实时更新
- **自动扩散**：空白区域自动揭开
- **胜利/失败判定**：完整的游戏状态管理

---

### 🖥️ 界面预览

#### 游戏主界面
![游戏主界面](https://developer.qcloudimg.com/http-save/yehe-6649301/4e3ed13f86d56b23cba933750046b285.png)

#### 游戏进行中
![游戏进行中](https://developer.qcloudimg.com/http-save/yehe-6649301/5d8a6a14ed84864917d1a5956c2fb86f.png)

#### 标记地雷
![标记地雷](https://developer.qcloudimg.com/http-save/yehe-6649301/e25d146c98e7c5ec0c510cfb204dc2e3.png)

#### 中等难度
![中等难度](https://developer.qcloudimg.com/http-save/yehe-6649301/8257d0ad1a91b7e5bd931d4f77937d85.png)

#### 困难难度
![困难难度](https://developer.qcloudimg.com/http-save/yehe-6649301/b60f2af50cfca5001fca83a025df7e99.png)

---

### 📝 代码实现

#### 1. HTML结构 (index.html)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5扫雷游戏教程</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>💣 扫雷游戏 💣</h1>

        
        <div class="control-panel">
            <div class="level-selector">
                <label>难度选择：</label>
                <select id="level">
                    <option value="easy">简单 (9x9, 10雷)</option>
                    <option value="medium">中等 (16x16, 40雷)</option>
                    <option value="hard">困难 (30x16, 99雷)</option>
                </select>
            </div>
            <button id="newGameBtn" class="btn">新游戏</button>
        </div>

        
        <div class="game-status">
            <div class="status-item">
                <span class="label">剩余雷数：</span>
                <span id="mineCount" class="value">10</span>
            </div>
            <div class="status-item">
                <span class="label">游戏状态：</span>
                <span id="gameStatus" class="value status-playing">进行中</span>
            </div>
            <div class="status-item">
                <span class="label">用时：</span>
                <span id="timer" class="value">0</span> 秒
            </div>
        </div>

        
        <div id="gameBoard" class="game-board"></div>

        
        <div class="instructions">
            <h3>🎮 游戏说明</h3>
            <ul>
                <li><strong>左键点击</strong>：揭开方块</li>
                <li><strong>右键点击</strong>：标记/取消标记地雷</li>
                <li><strong>数字</strong>：表示周围8个格子中的雷数</li>
                <li><strong>目标</strong>：揭开所有非雷方块即可获胜</li>
            </ul>
        </div>

        
        <div class="legend">
            <h3>📋 数字颜色说明</h3>
            <div class="legend-items">
                <span class="legend-item"><span class="num-1">1</span> 周围有1个雷</span>
                <span class="legend-item"><span class="num-2">2</span> 周围有2个雷</span>
                <span class="legend-item"><span class="num-3">3</span> 周围有3个雷</span>
                <span class="legend-item"><span class="num-4">4</span> 周围有4个雷</span>
                <span class="legend-item"><span class="num-5">5</span> 周围有5个雷</span>
                <span class="legend-item"><span class="num-6">6</span> 周围有6个雷</span>
                <span class="legend-item"><span class="num-7">7</span> 周围有7个雷</span>
                <span class="legend-item"><span class="num-8">8</span> 周围有8个雷</span>
            </div>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>
```

#### 2. CSS样式 (style.css)

```css
/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 2.5em;
}

/* 控制面板 */
.control-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.level-selector select {
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #667eea;
    border-radius: 10px;
    cursor: pointer;
}

.btn {
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

/* 游戏状态 */
.game-status {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.status-item {
    background: #f8f9fa;
    padding: 10px 20px;
    border-radius: 10px;
}

.status-playing { color: #28a745 !important; }
.status-gameover { color: #dc3545 !important; }
.status-win { color: #28a745 !important; }

/* 游戏棋盘 */
.game-board {
    display: grid;
    gap: 2px;
    background: #333;
    padding: 10px;
    border-radius: 10px;
    margin: 0 auto 20px;
    max-width: fit-content;
}

/* 游戏格子 */
.cell {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
}

.cell.hidden {
    background: linear-gradient(145deg, #e0e0e0, #c0c0c0);
    border: 2px outset #fff;
}

.cell.hidden:hover {
    background: linear-gradient(145deg, #d0d0d0, #b0b0b0);
}

.cell.revealed {
    background: #f0f0f0;
    border: 1px solid #ccc;
}

.cell.mine {
    background: #ff6b6b;
}

.cell.mine::after {
    content: '💣';
    font-size: 20px;
}

.cell.flagged::after {
    content: '🚩';
    font-size: 20px;
}

/* 数字颜色 */
.num-1 { color: #1976d2; }
.num-2 { color: #388e3c; }
.num-3 { color: #d32f2f; }
.num-4 { color: #7b1fa2; }
.num-5 { color: #ff8f00; }
.num-6 { color: #0097a7; }
.num-7 { color: #5d4037; }
.num-8 { color: #616161; }

/* 响应式设计 */
@media (max-width: 600px) {
    .cell {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}
```

#### 3. JavaScript逻辑 (game.js)

```javascript
/**
 * 扫雷游戏 - JavaScript实现
 */

// ==================== 游戏配置 ====================
const CONFIG = {
    easy: { rows: 9, cols: 9, mines: 10 },
    medium: { rows: 16, cols: 16, mines: 40 },
    hard: { rows: 16, cols: 30, mines: 99 }
};

// ==================== 游戏状态 ====================
let gameState = {
    board: [],
    rows: 0,
    cols: 0,
    totalMines: 0,
    flaggedMines: 0,
    revealedCount: 0,
    isGameOver: false,
    isFirstClick: true,
    timer: 0,
    timerInterval: null
};

// ==================== 初始化游戏 ====================
function initGame() {
    const level = levelSelect.value;
    const config = CONFIG[level];

    gameState = {
        board: [],
        rows: config.rows,
        cols: config.cols,
        totalMines: config.mines,
        flaggedMines: 0,
        revealedCount: 0,
        isGameOver: false,
        isFirstClick: true,
        timer: 0,
        timerInterval: null
    };

    createEmptyBoard();
    updateUI();
    renderBoard();

    gameStatusDisplay.textContent = '进行中';
    gameStatusDisplay.className = 'value status-playing';
    stopTimer();
}

// ==================== 创建空棋盘 ====================
function createEmptyBoard() {
    gameState.board = [];
    for (let row = 0; row < gameState.rows; row++) {
        gameState.board[row] = [];
        for (let col = 0; col < gameState.cols; col++) {
            gameState.board[row][col] = {
                isMine: false,
                isRevealed: false,
                isFlagged: false,
                adjacentMines: 0
            };
        }
    }
}

// ==================== 渲染棋盘 ====================
function renderBoard() {
    gameBoard.innerHTML = '';
    gameBoard.style.gridTemplateColumns = `repeat(${gameState.cols}, 35px)`;

    for (let row = 0; row < gameState.rows; row++) {
        for (let col = 0; col < gameState.cols; col++) {
            const cell = document.createElement('div');
            cell.className = 'cell hidden';
            cell.dataset.row = row;
            cell.dataset.col = col;

            cell.addEventListener('click', handleLeftClick);
            cell.addEventListener('contextmenu', handleRightClick);

            gameBoard.appendChild(cell);
        }
    }
}

// ==================== 放置地雷 ====================
function placeMines(firstRow, firstCol) {
    const minesToPlace = gameState.totalMines;
    let placed = 0;

    while (placed < minesToPlace) {
        const row = Math.floor(Math.random() * gameState.rows);
        const col = Math.floor(Math.random() * gameState.cols);

        const isNearFirstClick = Math.abs(row - firstRow) <= 1 &&
                                  Math.abs(col - firstCol) <= 1;

        if (!gameState.board[row][col].isMine && !isNearFirstClick) {
            gameState.board[row][col].isMine = true;
            placed++;
        }
    }

    calculateAdjacentMines();
}

// ==================== 计算周围雷数 ====================
function calculateAdjacentMines() {
    for (let row = 0; row < gameState.rows; row++) {
        for (let col = 0; col < gameState.cols; col++) {
            if (gameState.board[row][col].isMine) continue;

            let count = 0;
            for (let dr = -1; dr <= 1; dr++) {
                for (let dc = -1; dc <= 1; dc++) {
                    if (dr === 0 && dc === 0) continue;

                    const newRow = row + dr;
                    const newCol = col + dc;

                    if (isValidCell(newRow, newCol) &&
                        gameState.board[newRow][newCol].isMine) {
                        count++;
                    }
                }
            }
            gameState.board[row][col].adjacentMines = count;
        }
    }
}

// ==================== 检查单元格是否有效 ====================
function isValidCell(row, col) {
    return row >= 0 && row < gameState.rows && col >= 0 && col < gameState.cols;
}

// ==================== 处理左键点击 ====================
function handleLeftClick(event) {
    if (gameState.isGameOver) return;

    const cell = event.target;
    const row = parseInt(cell.dataset.row);
    const col = parseInt(cell.dataset.col);
    const cellData = gameState.board[row][col];

    if (cellData.isFlagged) return;

    if (gameState.isFirstClick) {
        gameState.isFirstClick = false;
        placeMines(row, col);
        startTimer();
    }

    revealCell(row, col);
}

// ==================== 处理右键点击 ====================
function handleRightClick(event) {
    event.preventDefault();

    if (gameState.isGameOver) return;

    const cell = event.target;
    const row = parseInt(cell.dataset.row);
    const col = parseInt(cell.dataset.col);
    const cellData = gameState.board[row][col];

    if (cellData.isRevealed) return;

    if (cellData.isFlagged) {
        cellData.isFlagged = false;
        cell.classList.remove('flagged');
        gameState.flaggedMines--;
    } else {
        cellData.isFlagged = true;
        cell.classList.add('flagged');
        gameState.flaggedMines++;
    }

    updateUI();
}

// ==================== 揭开格子 ====================
function revealCell(row, col) {
    if (!isValidCell(row, col)) return;

    const cellData = gameState.board[row][col];
    if (cellData.isRevealed || cellData.isFlagged) return;

    cellData.isRevealed = true;
    gameState.revealedCount++;

    const cell = gameBoard.children[row * gameState.cols + col];
    cell.classList.remove('hidden');
    cell.classList.add('revealed');

    if (cellData.isMine) {
        revealAllMines(row, col);
        gameOver(false);
        return;
    }

    if (cellData.adjacentMines === 0) {
        floodFill(row, col);
    } else {
        cell.textContent = cellData.adjacentMines;
        cell.classList.add(`num-${cellData.adjacentMines}`);
    }

    checkWin();
}

// ==================== 扩散算法 ====================
function floodFill(row, col) {
    for (let dr = -1; dr <= 1; dr++) {
        for (let dc = -1; dc <= 1; dc++) {
            if (dr === 0 && dc === 0) continue;

            const newRow = row + dr;
            const newCol = col + dc;

            if (isValidCell(newRow, newCol)) {
                const cellData = gameState.board[newRow][newCol];
                if (!cellData.isRevealed && !cellData.isFlagged) {
                    revealCell(newRow, newCol);
                }
            }
        }
    }
}

// ==================== 揭开所有地雷 ====================
function revealAllMines(explodedRow, explodedCol) {
    for (let row = 0; row < gameState.rows; row++) {
        for (let col = 0; col < gameState.cols; col++) {
            const cellData = gameState.board[row][col];
            const cell = gameBoard.children[row * gameState.cols + col];

            if (cellData.isMine) {
                cell.classList.remove('hidden');
                cell.classList.add('revealed', 'mine');

                if (row === explodedRow && col === explodedCol) {
                    cell.style.background = '#ff0000';
                }
            } else if (cellData.isFlagged) {
                cell.classList.add('wrong-flag');
            }
        }
    }
}

// ==================== 检查胜利 ====================
function checkWin() {
    const totalCells = gameState.rows * gameState.cols;
    const safeCells = totalCells - gameState.totalMines;

    if (gameState.revealedCount === safeCells) {
        gameOver(true);
    }
}

// ==================== 游戏结束 ====================
function gameOver(isWin) {
    gameState.isGameOver = true;
    stopTimer();

    if (isWin) {
        gameStatusDisplay.textContent = '🎉 胜利！';
        gameStatusDisplay.className = 'value status-win';
        gameBoard.classList.add('game-win');
        flagAllMines();
    } else {
        gameStatusDisplay.textContent = '💥 游戏结束';
        gameStatusDisplay.className = 'value status-gameover';
        gameBoard.classList.add('game-over');
    }
}

// ==================== 标记所有地雷 ====================
function flagAllMines() {
    for (let row = 0; row < gameState.rows; row++) {
        for (let col = 0; col < gameState.cols; col++) {
            const cellData = gameState.board[row][col];
            if (cellData.isMine && !cellData.isFlagged) {
                const cell = gameBoard.children[row * gameState.cols + col];
                cell.classList.add('flagged');
            }
        }
    }
}

// ==================== 计时器功能 ====================
function startTimer() {
    if (gameState.timerInterval) return;

    gameState.timerInterval = setInterval(() => {
        gameState.timer++;
        timerDisplay.textContent = gameState.timer;
    }, 1000);
}

function stopTimer() {
    if (gameState.timerInterval) {
        clearInterval(gameState.timerInterval);
        gameState.timerInterval = null;
    }
}

// ==================== 更新UI ====================
function updateUI() {
    const remainingMines = gameState.totalMines - gameState.flaggedMines;
    mineCountDisplay.textContent = remainingMines;
    timerDisplay.textContent = gameState.timer;
}

// ==================== 事件监听 ====================
newGameBtn.addEventListener('click', initGame);
levelSelect.addEventListener('change', initGame);

// ==================== 启动游戏 ====================
initGame();
```

---

### 🚀 运行方式

#### 方式一：直接打开HTML文件
```bash
# 直接在浏览器中打开
open index.html
```

#### 方式二：使用HTTP服务器
```bash
# Python 3
python3 -m http.server 8080

# 然后访问 http://localhost:8080
```

#### 方式三：使用Node.js
```bash
# 安装http-server
npm install -g http-server

# 启动服务器
http-server -p 8080
```

---

### 🎯 核心算法说明

#### 1. 地雷放置算法
- 第一次点击时不放置地雷，保证第一次点击安全
- 随机放置地雷，避免第一次点击到雷

#### 2. 周围雷数计算
- 对于每个非雷格子，检查周围8个方向
- 统计周围地雷数量并存储

#### 3. 扩散算法（Flood Fill）
- 当揭开空白格子（周围无雷）时，自动递归揭开周围格子
- 形成连锁反应，快速揭开大片区域

#### 4. 胜利判定
- 总格子数 = 行数 × 列数
- 安全格子数 = 总格子数 - 地雷数
- 当揭开的格子数 = 安全格子数时，胜利

---

## 作业：

现在我们的扫雷游戏已经完成了，但还留有一个bug，就是困难模式下页面实现存在问题，这个需求各位自己摸索解决喽。。。

在AI技术飞速发展的今天，代码生成工具已经从概念走向实用。作为一名开发者，我决定尝试一个有趣的项目 ：完全使用AI编程助手（类似Claude Code、GitHub Copilot等工具）来开发一个完整的H5游戏。

【跟着AI学】H5扫雷游戏开发

人工智能

探索AI编程助手的潜力：记录使用ClaudeCode开发HTML5扫雷游戏全过程。从需求分析到代码实现，展示AI如何完成游戏逻辑、界面设计和交互功能，包含三种难度级别、计时器和自动扩散等核心功能。

代码生成工具

响应式设计

服务器

HTML5

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【跟着AI学】H5扫雷游戏开发-腾讯云开发者社区-腾讯云

【跟着AI学】H5扫雷游戏开发

【跟着AI学】H5扫雷游戏开发

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐