扫雷游戏，作为经典的电脑游戏之一，玩家通过点击空白格子来揭示地雷周围的数字，目的是避免触发地雷。虽然规则看似简单，但背后涉及到复杂的游戏逻辑，比如地雷的随机生成、周围数字的计算和格子的揭示等。每次点击后，玩家需要依靠周围数字的信息，进行推理和判断，寻找安全的格子。
过去，开发一个扫雷游戏需要编写复杂的地雷生成算法、格子状态管理、点击事件响应等代码，这对于开发者来说无疑是一项挑战。不过，使用 Trae IDE，所有的复杂逻辑和细节处理都由系统自动完成。接下来，我将分享如何通过 Trae 快速生成一个扫雷游戏，轻松实现经典的逻辑挑战。
💡 我的需求其实很简单
我的需求非常明确：制作一个扫雷游戏，功能要求如下：
- 随机生成地雷：游戏开始时，在棋盘上随机生成若干个地雷。
- 揭示空白格子：玩家点击空白格子，显示该格子周围地雷的数量。
- 避免触雷：玩家需要通过逻辑推理，避免点击到地雷所在的格子。
- 简洁的UI：游戏界面简洁，操作直观，玩家可以轻松玩转扫雷。
虽然游戏规则非常简单，但要实现地雷随机生成、空白格子揭示、点击响应等功能，手动编写这些逻辑依然需要一定的工作量。
✨ Trae 如何理解需求并生成代码？
我只需要在 Trae 中输入一句话：
"生成扫雷游戏，玩家点击空白格子，避免触发地雷。"
Trae 会自动解析我的需求，并生成完整的扫雷游戏代码，包括：
- 地雷生成：游戏在棋盘上随机生成地雷，并确保地雷的数量符合设置的要求。
- 空白格子揭示：当玩家点击空白格子时，系统会自动显示该格子周围的地雷数量。若格子周围没有地雷，则继续揭示相邻空白格子，直到达到游戏规则。
- 游戏规则：玩家点击到地雷所在的格子，游戏结束，显示游戏失败的提示。
- 简洁的UI设计：游戏界面设计简洁，格子的点击和揭示效果流畅，玩家能够轻松进行操作。
只需简单的指令，Trae 就能为我自动生成一个完整的扫雷游戏，并处理所有复杂的游戏逻辑。
🧩 游戏操作简便，逻辑清晰
Trae 生成的扫雷游戏操作非常简便。玩家只需要点击空白格子，系统会揭示该格子周围的数字。如果格子周围没有地雷，系统会继续自动揭示相邻的格子。如果玩家点击到地雷所在的格子，游戏会结束并显示"游戏失败"提示。
每个格子的揭示效果都非常流畅，点击后的反应及时，让玩家能够快速了解每一步的进展。此外，系统会自动计算每个格子周围地雷的数量，并显示在该格子上，帮助玩家判断哪些地方安全。
🛠 游戏拓展，功能轻松加
尽管 Trae 生成的扫雷游戏已经非常完善，但它也支持轻松添加更多功能。例如：
- 计时器功能：为游戏增加计时功能，记录玩家完成扫雷的时间，增加游戏的挑战性。
- 难度设置：可以设置不同的难度，调整棋盘的大小和地雷的数量。
- 排行榜功能：记录玩家的成绩，并展示排行榜，增加游戏的竞争性。
- 音效和动画：为点击格子的揭示效果和触雷时加入音效，增加游戏的互动性。
这些新功能都可以通过简单描述，Trae 会自动生成并将其集成到现有的游戏中。
这就是扫雷游戏开发的新体验
通过这次扫雷游戏的开发，我深刻感受到了 Trae 带来的便利。从地雷的随机生成，到格子的揭示和游戏失败的判断，Trae 都能完美地自动化完成。这样，我不需要担心复杂的逻辑实现，而只需专注于游戏设计和细节。
对于独立开发者或小团队来说，Trae 是一个非常高效的工具，它能够帮助你快速完成游戏开发，专注于创意和功能拓展。
结语
如果你也想制作一个经典的扫雷游戏，试试 Trae IDE，输入类似的需求：
"生成扫雷游戏，玩家点击空白格子，避免触发地雷。"
几秒钟内，Trae 就会生成完整的扫雷游戏代码，带有地雷随机生成、格子揭示、点击响应等功能。你可以直接将它嵌入到你的项目中，甚至根据需求继续扩展和优化。
快来体验一下 Trae，让你的扫雷游戏开发变得更加轻松、充满挑战！
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫雷游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #333;
}
.game-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 90%;
max-width: 500px;
}
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.game-info {
display: flex;
gap: 15px;
}
.mines-counter, .timer {
background-color: #333;
color: #ff0000;
font-family: 'Courier New', monospace;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
min-width: 80px;
text-align: center;
}
.difficulty-selector {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.difficulty-btn {
background-color: #e0e0e0;
border: none;
padding: 8px 15px;
margin: 0 5px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
font-weight: bold;
}
.difficulty-btn:hover {
background-color: #d0d0d0;
}
.difficulty-btn.active {
background-color: #4a6fa5;
color: white;
}
.game-board {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 2px;
margin: 0 auto;
user-select: none;
}
.cell {
aspect-ratio: 1 / 1;
background-color: #bdbdbd;
border: 2px solid;
border-color: #f5f5f5 #7b7b7b #7b7b7b #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 18px;
cursor: pointer;
}
.cell:hover {
filter: brightness(1.1);
}
.cell.revealed {
background-color: #d9d9d9;
border-color: #bdbdbd;
border-width: 1px;
}
.cell.mine {
background-color: #ff4d4d;
}
.cell.flagged {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4,2H6V4H10V6H6V12H10V14H6V20H4V14H0V12H4V6H0V4H4V2Z" fill="%23ff0000"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
}
.cell.question {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM13,19H11V17H13V19ZM15.07,11.25L14.17,12.17C13.45,12.9 13,13.5 13,15H11V14.5C11,13.4 11.45,12.4 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.9 13.1,7 12,7C10.9,7 10,7.9 10,9H8C8,6.79 9.79,5 12,5C14.21,5 16,6.79 16,9C16,9.88 15.64,10.68 15.07,11.25Z" fill="%23333"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
}
.cell.mine-revealed {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23333"/><circle cx="12" cy="12" r="8" fill="%23000"/><line x1="6" y1="6" x2="18" y2="18" stroke="%23fff" stroke-width="2"/><line x1="6" y1="18" x2="18" y2="6" stroke="%23fff" stroke-width="2"/><line x1="12" y1="2" x2="12" y2="22" stroke="%23fff" stroke-width="2"/><line x1="2" y1="12" x2="22" y2="12" stroke="%23fff" stroke-width="2"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
.cell.mine-wrong {
background-color: #ff4d4d;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%23333"/><circle cx="12" cy="12" r="8" fill="%23000"/><line x1="6" y1="6" x2="18" y2="18" stroke="%23fff" stroke-width="2"/><line x1="6" y1="18" x2="18" y2="6" stroke="%23fff" stroke-width="2"/><line x1="12" y1="2" x2="12" y2="22" stroke="%23fff" stroke-width="2"/><line x1="2" y1="12" x2="22" y2="12" stroke="%23fff" stroke-width="2"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
.number-1 { color: #0000ff; }
.number-2 { color: #008000; }
.number-3 { color: #ff0000; }
.number-4 { color: #000080; }
.number-5 { color: #800000; }
.number-6 { color: #008080; }
.number-7 { color: #000000; }
.number-8 { color: #808080; }
.controls {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee;
}
.btn {
background-color: #4a6fa5;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
font-weight: bold;
}
.btn:hover {
background-color: #3a5a80;
}
.btn:active {
transform: scale(0.98);
}
.restart-btn {
background-color: #f5f5f5;
border: 2px solid #bdbdbd;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 24px;
transition: all 0.2s;
}
.restart-btn:hover {
background-color: #e0e0e0;
}
.restart-btn.sad {
background-color: #ffcccc;
}
.restart-btn.happy {
background-color: #ccffcc;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background-color: white;
padding: 30px;
border-radius: 10px;
text-align: center;
max-width: 90%;
width: 400px;
transform: scale(0.8);
transition: transform 0.3s;
}
.modal.active .modal-content {
transform: scale(1);
}
.modal h2 {
margin-bottom: 20px;
color: #333;
}
.modal p {
margin-bottom: 30px;
color: #666;
line-height: 1.5;
}
.modal-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.help-btn {
background-color: transparent;
border: none;
color: #4a6fa5;
cursor: pointer;
font-size: 16px;
padding: 5px;
}
.help-btn:hover {
text-decoration: underline;
}
@media (max-width: 500px) {
.game-container {
padding: 15px;
width: 95%;
}
.mines-counter, .timer {
font-size: 18px;
min-width: 60px;
}
.cell {
font-size: 14px;
}
.difficulty-btn {
padding: 6px 10px;
font-size: 14px;
}
.btn {
padding: 8px 15px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="game-container">
<div class="game-header">
<div class="mines-counter" id="mines-counter">10</div>
<div class="restart-btn" id="restart-btn">😊</div>
<div class="timer" id="timer">000</div>
</div>
<div class="difficulty-selector">
<button class="difficulty-btn active" data-difficulty="beginner">初级</button>
<button class="difficulty-btn" data-difficulty="intermediate">中级</button>
<button class="difficulty-btn" data-difficulty="expert">高级</button>
</div>
<div class="game-board" id="game-board">
<!-- 游戏格子将由JS动态生成 -->
</div>
<div class="controls">
<button class="help-btn" id="help-btn">游戏规则</button>
<button class="btn" id="new-game-btn">新游戏</button>
</div>
</div>
<div class="modal" id="win-modal">
<div class="modal-content">
<h2>恭喜你赢了！</h2>
<p>你成功找出了所有地雷！</p>
<p>用时: <span id="win-time">0</span> 秒</p>
<div class="modal-buttons">
<button class="btn" id="win-new-game-btn">新游戏</button>
</div>
</div>
</div>
<div class="modal" id="lose-modal">
<div class="modal-content">
<h2>游戏结束</h2>
<p>很遗憾，你触发了地雷！</p>
<div class="modal-buttons">
<button class="btn" id="lose-new-game-btn">再试一次</button>
</div>
</div>
</div>
<div class="modal" id="help-modal">
<div class="modal-content">
<h2>游戏规则</h2>
<p>
1. 点击格子揭开它<br>
2. 数字表示周围8个格子中的地雷数量<br>
3. 右键点击可以标记地雷（旗子）<br>
4. 再次右键点击可以标记为问号<br>
5. 第三次右键点击取消标记<br>
6. 避免点到地雷，标记出所有地雷即可获胜
</p>
<div class="modal-buttons">
<button class="btn" id="close-help-btn">了解了</button>
</div>
</div>
</div>
<script>
// 获取DOM元素
const gameBoard = document.getElementById('game-board');
const minesCounter = document.getElementById('mines-counter');
const timerElement = document.getElementById('timer');
const restartBtn = document.getElementById('restart-btn');
const newGameBtn = document.getElementById('new-game-btn');
const difficultyBtns = document.querySelectorAll('.difficulty-btn');
const helpBtn = document.getElementById('help-btn');
const winModal = document.getElementById('win-modal');
const loseModal = document.getElementById('lose-modal');
const helpModal = document.getElementById('help-modal');
const winNewGameBtn = document.getElementById('win-new-game-btn');
const loseNewGameBtn = document.getElementById('lose-new-game-btn');
const closeHelpBtn = document.getElementById('close-help-btn');
const winTimeElement = document.getElementById('win-time');
// 游戏配置
const difficulties = {
beginner: { rows: 9, cols: 9, mines: 10 },
intermediate: { rows: 16, cols: 16, mines: 40 },
expert: { rows: 16, cols: 30, mines: 99 }
};
// 游戏变量
let currentDifficulty = 'beginner';
let board = [];
let minesCount;
let flagsCount = 0;
let revealedCount = 0;
let gameStarted = false;
let gameOver = false;
let timer;
let seconds = 0;
let firstClick = true;
// 初始化游戏
function initGame() {
// 重置游戏状态
board = [];
gameStarted = false;
gameOver = false;
firstClick = true;
flagsCount = 0;
revealedCount = 0;
seconds = 0;
clearInterval(timer);
timerElement.textContent = '000';
restartBtn.textContent = '😊';
restartBtn.classList.remove('sad', 'happy');
// 获取当前难度的配置
const { rows, cols, mines } = difficulties[currentDifficulty];
minesCount = mines;
minesCounter.textContent = minesCount;
// 设置游戏板样式
gameBoard.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
gameBoard.innerHTML = '';
// 创建格子
for (let row = 0; row < rows; row++) {
board[row] = [];
for (let col = 0; col < cols; col++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = row;
cell.dataset.col = col;
// 添加点击事件
cell.addEventListener('click', () => handleCellClick(row, col));
cell.addEventListener('contextmenu', (e) => {
e.preventDefault();
handleRightClick(row, col);
});
gameBoard.appendChild(cell);
// 初始化格子状态
board[row][col] = {
element: cell,
isMine: false,
isRevealed: false,
isFlagged: false,
isQuestion: false,
neighborMines: 0
};
}
}
}
// 生成地雷
function generateMines(firstRow, firstCol) {
const { rows, cols, mines } = difficulties[currentDifficulty];
let minesPlaced = 0;
// 确保第一次点击的位置及其周围没有地雷
const safeZone = [];
for (let r = Math.max(0, firstRow - 1); r <= Math.min(rows - 1, firstRow + 1); r++) {
for (let c = Math.max(0, firstCol - 1); c <= Math.min(cols - 1, firstCol + 1); c++) {
safeZone.push(`${r},${c}`);
}
}
// 随机放置地雷
while (minesPlaced < mines) {
const row = Math.floor(Math.random() * rows);
const col = Math.floor(Math.random() * cols);
const key = `${row},${col}`;
// 确保不在安全区域内放置地雷
if (!safeZone.includes(key) && !board[row][col].isMine) {
board[row][col].isMine = true;
minesPlaced++;
}
}
// 计算每个格子周围的地雷数
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (!board[row][col].isMine) {
board[row][col].neighborMines = countNeighborMines(row, col);
}
}
}
}
// 计算周围的地雷数
function countNeighborMines(row, col) {
let count = 0;
const { rows, cols } = difficulties[currentDifficulty];
for (let r = Math.max(0, row - 1); r <= Math.min(rows - 1, row + 1); r++) {
for (let c = Math.max(0, col - 1); c <= Math.min(cols - 1, col + 1); c++) {
if (r === row && c === col) continue;
if (board[r][c].isMine) count++;
}
}
return count;
}
// 处理格子点击
function handleCellClick(row, col) {
if (gameOver || board[row][col].isRevealed || board[row][col].isFlagged) return;
// 第一次点击时生成地雷
if (firstClick) {
generateMines(row, col);
startTimer();
firstClick = false;
}
// 揭开格子
revealCell(row, col);
// 检查游戏状态
checkGameStatus();
}
// 处理右键点击（标记地雷）
function handleRightClick(row, col) {
if (gameOver || board[row][col].isRevealed) return;
const cell = board[row][col];
// 开始计时（如果是第一次操作）
if (firstClick) {
generateMines(row, col);
startTimer();
firstClick = false;
}
// 循环切换：无标记 -> 旗子 -> 问号 -> 无标记
if (!cell.isFlagged && !cell.isQuestion) {
// 设置旗子
cell.isFlagged = true;
cell.element.classList.add('flagged');
flagsCount++;
} else if (cell.isFlagged) {
// 设置问号
cell.isFlagged = false;
cell.isQuestion = true;
cell.element.classList.remove('flagged');
cell.element.classList.add('question');
flagsCount--;
} else {
// 移除标记
cell.isQuestion = false;
cell.element.classList.remove('question');
}
// 更新地雷计数器
updateMinesCounter();
// 检查游戏状态
checkGameStatus();
}
// 揭开格子
function revealCell(row, col) {
const cell = board[row][col];
// 如果已经揭开或已标记，则忽略
if (cell.isRevealed || cell.isFlagged) return;
// 标记为已揭开
cell.isRevealed = true;
cell.element.classList.add('revealed');
cell.element.classList.remove('question');
revealedCount++;
// 如果是地雷，游戏结束
if (cell.isMine) {
gameOver = true;
cell.element.classList.add('mine-revealed');
revealAllMines();
endGame(false);
return;
}
// 显示周围地雷数
if (cell.neighborMines > 0) {
cell.element.textContent = cell.neighborMines;
cell.element.classList.add(`number-${cell.neighborMines}`);
} else {
// 如果周围没有地雷，自动揭开周围的格子
const { rows, cols } = difficulties[currentDifficulty];
for (let r = Math.max(0, row - 1); r <= Math.min(rows - 1, row + 1); r++) {
for (let c = Math.max(0, col - 1); c <= Math.min(cols - 1, col + 1); c++) {
if (r === row && c === col) continue;
revealCell(r, c);
}
}
}
}
// 揭开所有地雷
function revealAllMines() {
const { rows, cols } = difficulties[currentDifficulty];
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const cell = board[row][col];
if (cell.isMine && !cell.isRevealed) {
cell.element.classList.add('mine-revealed');
}
// 标记错误的旗子
if (cell.isFlagged && !cell.isMine) {
cell.element.classList.add('mine-wrong');
}
}
}
}
// 更新地雷计数器
function updateMinesCounter() {
const remainingMines = minesCount - flagsCount;
minesCounter.textContent = remainingMines < 0 ? '000' : remainingMines;
}
// 开始计时器
function startTimer() {
gameStarted = true;
timer = setInterval(() => {
seconds++;
timerElement.textContent = seconds.toString().padStart(3, '0');
if (seconds >= 999) {
clearInterval(timer);
}
}, 1000);
}
// 检查游戏状态
function checkGameStatus() {
if (gameOver) return;
const { rows, cols, mines } = difficulties[currentDifficulty];
const totalCells = rows * cols;
// 检查是否获胜（所有非地雷格子都已揭开）
if (revealedCount === totalCells - mines) {
gameOver = true;
endGame(true);
}
}
// 结束游戏
function endGame(isWin) {
clearInterval(timer);
if (isWin) {
// 标记所有地雷
const { rows, cols } = difficulties[currentDifficulty];
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (board[row][col].isMine && !board[row][col].isFlagged) {
board[row][col].isFlagged = true;
board[row][col].element.classList.add('flagged');
}
}
}
restartBtn.textContent = '😎';
restartBtn.classList.add('happy');
winTimeElement.textContent = seconds;
setTimeout(() => {
winModal.classList.add('active');
}, 500);
} else {
restartBtn.textContent = '😵';
restartBtn.classList.add('sad');
setTimeout(() => {
loseModal.classList.add('active');
}, 500);
}
}
// 切换难度
function changeDifficulty(difficulty) {
currentDifficulty = difficulty;
// 更新按钮状态
difficultyBtns.forEach(btn => {
if (btn.dataset.difficulty === difficulty) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
// 重新初始化游戏
initGame();
}
// 事件监听
difficultyBtns.forEach(btn => {
btn.addEventListener('click', () => {
changeDifficulty(btn.dataset.difficulty);
});
});
restartBtn.addEventListener('click', initGame);
newGameBtn.addEventListener('click', initGame);
winNewGameBtn.addEventListener('click', () => {
winModal.classList.remove('active');
initGame();
});
loseNewGameBtn.addEventListener('click', () => {
loseModal.classList.remove('active');
initGame();
});
helpBtn.addEventListener('click', () => {
helpModal.classList.add('active');
});
closeHelpBtn.addEventListener('click', () => {
helpModal.classList.remove('active');
});
// 初始化游戏
initGame();
</script>
</body>
</html>