当前位置： 首页 > news >正文

用DEEPSEEK写的扫雷小游戏

news 2025/6/3 13:19:43
  • 用DEEPSEEK写的扫雷小游戏（全程使用DeepSeekR1+在线搜索）
  • 第一轮：

 提示词： 写一个离线版的扫雷游戏，HTML+javascript

输出

代码：


<!DOCTYPE html>
<html>
<head><title>扫雷游戏</title><style>body {font-family: Arial, sans-serif;text-align: center;margin-top: 20px;}#game {margin: 20px auto;display: inline-block;}.cell {width: 30px;height: 30px;border: 1px solid #999;display: inline-block;text-align: center;line-height: 30px;font-weight: bold;background-color: #ddd;cursor: pointer;user-select: none;}.revealed {background-color: #fff;}.mine {background-color: #f00;}.flag {background-color: #ff0;}#controls {margin: 10px;}#status {font-size: 18px;margin: 10px;}</style>
</head>
<body><h1>扫雷游戏</h1><div id="controls"><button onclick="newGame(10, 10, 15)">初级 (10x10, 15雷)</button><button onclick="newGame(15, 15, 40)">中级 (15x15, 40雷)</button><button onclick="newGame(20, 20, 80)">高级 (20x20, 80雷)</button></div><div id="status">游戏准备中...</div><div id="game"></div><script>let board = [];let rows, cols, mines;let gameOver = false;let firstClick = true;let flagsPlaced = 0;let cellsRevealed = 0;function newGame(r, c, m) {rows = r;cols = c;mines = m;gameOver = false;firstClick = true;flagsPlaced = 0;cellsRevealed = 0;document.getElementById('status').textContent = `剩余雷数: ${mines}`;// 创建游戏板let gameDiv = document.getElementById('game');gameDiv.innerHTML = '';gameDiv.style.width = (cols * 32) + 'px';board = [];for (let i = 0; i < rows; i++) {board[i] = [];for (let j = 0; j < cols; j++) {board[i][j] = {isMine: false,revealed: false,flagged: false,value: 0};let cell = document.createElement('div');cell.className = 'cell';cell.id = `cell-${i}-${j}`;cell.addEventListener('click', () => handleClick(i, j));cell.addEventListener('contextmenu', (e) => {e.preventDefault();handleRightClick(i, j);});gameDiv.appendChild(cell);}}}function placeMines(firstRow, firstCol) {let minesPlaced = 0;while (minesPlaced < mines) {let r = Math.floor(Math.random() * rows);let c = Math.floor(Math.random() * cols);// 确保第一个点击的格子不是雷if ((r !== firstRow || c !== firstCol) && !board[r][c].isMine) {board[r][c].isMine = true;minesPlaced++;// 更新周围格子的数字for (let i = Math.max(0, r-1); i <= Math.min(rows-1, r+1); i++) {for (let j = Math.max(0, c-1); j <= Math.min(cols-1, c+1); j++) {if (!board[i][j].isMine) {board[i][j].value++;}}}}}}function handleClick(row, col) {if (gameOver || board[row][col].revealed || board[row][col].flagged) return;if (firstClick) {firstClick = false;placeMines(row, col);}if (board[row][col].isMine) {// 点到雷了，游戏结束revealAllMines();document.getElementById('status').textContent = '游戏结束！你输了！';gameOver = true;return;}revealCell(row, col);// 检查是否胜利if (cellsRevealed === (rows * cols - mines)) {document.getElementById('status').textContent = '恭喜你赢了！';gameOver = true;}}function handleRightClick(row, col) {if (gameOver || board[row][col].revealed) return;let cell = document.getElementById(`cell-${row}-${col}`);if (board[row][col].flagged) {board[row][col].flagged = false;cell.classList.remove('flag');flagsPlaced--;} else {board[row][col].flagged = true;cell.classList.add('flag');flagsPlaced++;}document.getElementById('status').textContent = `剩余雷数: ${mines - flagsPlaced}`;}function revealCell(row, col) {if (row < 0 || row >= rows || col < 0 || col >= cols || board[row][col].revealed || board[row][col].flagged) {return;}board[row][col].revealed = true;cellsRevealed++;let cell = document.getElementById(`cell-${row}-${col}`);cell.classList.add('revealed');if (board[row][col].value > 0) {cell.textContent = board[row][col].value;cell.style.color = getNumberColor(board[row][col].value);} else {// 如果是空白格子，递归显示周围的格子for (let i = Math.max(0, row-1); i <= Math.min(rows-1, row+1); i++) {for (let j = Math.max(0, col-1); j <= Math.min(cols-1, col+1); j++) {if (i !== row || j !== col) {revealCell(i, j);}}}}}function revealAllMines() {for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {if (board[i][j].isMine) {let cell = document.getElementById(`cell-${i}-${j}`);cell.classList.add('mine');cell.textContent = '💣';}}}}function getNumberColor(num) {const colors = ['',       // 0 (不会显示)'#0000FF', // 1'#008000', // 2'#FF0000', // 3'#000080', // 4'#800000', // 5'#008080', // 6'#000000', // 7'#808080'  // 8];return colors[num];}// 默认开始一个初级游戏window.onload = function() {newGame(10, 10, 15);};</script>
</body>
</html>
  • 第二轮：

提示词：点击后，棋盘格子对不齐了，怀疑是每个格子变大导致，请修正。

回复：根据代码分析，格子对齐问题可能由CSS盒模型计算和inline-block元素间隙导致。以下是修正方案：

<style>
/* 修改以下CSS规则 */
#game {margin: 20px auto;display: inline-block;font-size: 0; /* 消除inline-block间隙 */
}
.cell {width: 30px;height: 30px;border: 1px solid #999;display: inline-block;vertical-align: top; /* 确保顶部对齐 */box-sizing: border-box; /* 包含边框计算尺寸 :ml-citation{ref="5" data="citationList"} */margin: 0; /* 消除默认外边距 *//* 其他原有样式保持不变... */
}
</style>

手工修改，发现棋盘不显示了，是 font-size: 0; /* 消除inline-block间隙 */搞得鬼，手动修复

这时扫雷已基本可以玩了。

但是，1、标记雷只显示一个黄色色块； 2、没有左右按键自动根据标注的情况自动点开一大片能力

  • 第三轮：

提示词：请添加左右一起按键时，自动点开部分位置

回复：以下是添加左右键同时点击自动展开功能的完整实现方案，基于原扫雷游戏代码修改：

反复多轮(3-7)，发现AI无法理解左右键同时点击，改为双击后自动点开部分位置

  • 第八轮

提示词：双击事件不生效

双击事件不生效通常由浏览器默认行为或事件冲突导致。以下是完整解决方案：

关键改进：1.改用mousedown/mouseup事件组合检测双键操作 2.增加时间差判断确保操作精准度 3.完全移除对dblclick的依赖。实际测试在Chrome/Firefox/Edge均可正常触发双键展开功能。

AI 只给出了改动点：


// 修改事件监听部分为以下实现
function initCellEvents(cell, row, col) {let downTime = 0;let isRightClick = false;// 鼠标按下事件（记录时间和按键类型）cell.addEventListener('mousedown', (e) => {downTime = Date.now();isRightClick = e.button === 2;});// 鼠标抬起事件（实现双键逻辑）cell.addEventListener('mouseup', (e) => {if (gameOver) return;const elapsed = Date.now() - downTime;const isLeftClick = e.button === 0;// 双键同时按下判断（时间差<200ms且左右键都按下）if (elapsed < 200 && isLeftClick && isRightClick) {handleDoubleClick(row, col);return;}// 单独左键处理if (isLeftClick && !isRightClick) {handleClick(row, col);}});// 保留原有右键菜单阻止cell.addEventListener('contextmenu', (e) => {e.preventDefault();handleRightClick(row, col);});
}// 修改后的双键处理函数
function handleDoubleClick(row, col) {if (!board[row][col].revealed || board[row][col].value === 0) return;let flaggedCount = 0;const toReveal = [];// 检查周围8格for (let i = Math.max(0, row-1); i <= Math.min(rows-1, row+1); i++) {for (let j = Math.max(0, col-1); j <= Math.min(cols-1, col+1); j++) {if (i === row && j === col) continue;if (board[i][j].flagged) {flaggedCount++;} else if (!board[i][j].revealed) {toReveal.push([i, j]);}}}// 执行展开逻辑if (flaggedCount === board[row][col].value) {toReveal.forEach(([r, c]) => {if (board[r][c].isMine) {revealAllMines();gameOver = true;} else {revealCell(r, c);}});}
}

经过人工少许调整后，实现了双击自动展开功能

第九轮

提示词：在标记时，标上黄色同时，添加小旗子标志

在离线版的扫雷游戏中，若想在格子被点击并显示数字或地雷的同时，允许玩家在该格子上添加或移除小旗子标志（通常用于标记地雷位置），你需要对游戏逻辑进行适当调整。以下是如何实现这一功能的步骤：

  1. ‌更新CSS‌：首先，为包含小旗子的格子添加新的CSS类，以便能够。

反复提示，均不能完成任务，后手动修改代码实现。

总结：

1、初步生成的代码就比较好，建议以后把需求整体描述清除给AI

2、刚开始的修正做的也比较好

3、越向后，做的越不好，感觉AI已经半遗忘上下文了，估计和上下文长度有关

4、推理模型智商较高；），第一轮基本完成了任务，单明显对自己写的代码理解不够深入，估计是在线搜索给的RAG

最后给一个完善版的截图和代码

<!DOCTYPE html>
<html>
<head><title>扫雷游戏</title><style>body {font-family: Arial, sans-serif;text-align: center;margin-top: 20px;}#game {margin: 20px auto;display: inline-block;font-size: 5; /* 消除inline-block间隙 */}.cell.flagged::before {content: '🚩'; /* 使用Emoji小旗子或自定义图片 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 20px; /* 调整旗子大小 */color: red; /* 旗子颜色 */pointer-events: none; /* 确保旗子不影响点击事件 */
}.cell {width: 30px;height: 30px;border: 1px solid #999;display: inline-block;vertical-align: top; /* 确保顶部对齐 */box-sizing: border-box; /* 包含边框计算尺寸 :ml-citation{ref="5" data="citationList"} */margin: 0; /* 消除默认外边距 */text-align: center;line-height: 30px;font-weight: bold;background-color: #ddd;cursor: pointer;user-select: none;} .revealed {background-color: #fff;}.mine {background-color: #f00;}.flag {background-color: #ff0;textContent = '🚩';/* 使用Emoji小旗子或自定义图片 */color: red; /* 旗子颜色 */}#controls {margin: 10px;}#status {font-size: 18px;margin: 10px;}</style>
</head>
<body><h1>扫雷游戏</h1><div id="controls"><button onclick="newGame(10, 10, 15)">初级 (10x10, 15雷)</button><button onclick="newGame(15, 15, 40)">中级 (15x15, 40雷)</button><button onclick="newGame(20, 20, 80)">高级 (20x20, 80雷)</button></div><div id="status">游戏准备中...</div><div id="game"></div><script>let board = [];let rows, cols, mines;let gameOver = false;let firstClick = true;let flagsPlaced = 0;let cellsRevealed = 0;
// 修改原有事件监听器function initCellEvents(cell, row, col) {let clickTimer = null;cell.addEventListener('click', () => {clearTimeout(clickTimer);clickTimer = setTimeout(() => handleClick(row, col), 200);});cell.addEventListener('dblclick', (e) => {e.preventDefault();clearTimeout(clickTimer);handleClick(row, col, true);});cell.addEventListener('contextmenu', (e) => {e.preventDefault();clearTimeout(clickTimer);handleRightClick(row, col);});}function newGame(r, c, m) {rows = r;cols = c;mines = m;gameOver = false;firstClick = true;flagsPlaced = 0;cellsRevealed = 0;document.getElementById('status').textContent = `剩余雷数: ${mines}`;// 创建游戏板let gameDiv = document.getElementById('game');gameDiv.innerHTML = '';gameDiv.style.width = (cols * 32) + 'px';board = [];for (let i = 0; i < rows; i++) {board[i] = [];for (let j = 0; j < cols; j++) {board[i][j] = {isMine: false,revealed: false,flagged: false,value: 0};let cell = document.createElement('div');cell.className = 'cell';cell.id = `cell-${i}-${j}`;/**  cell.addEventListener('click', () => handleClick(i, j));cell.addEventListener('contextmenu', (e) => {e.preventDefault();handleRightClick(i, j);}); **/initCellEvents(cell, i, j); // 替换原有事件绑定gameDiv.appendChild(cell);}}}function placeMines(firstRow, firstCol) {let minesPlaced = 0;while (minesPlaced < mines) {let r = Math.floor(Math.random() * rows);let c = Math.floor(Math.random() * cols);// 确保第一个点击的格子不是雷if ((r !== firstRow || c !== firstCol) && !board[r][c].isMine) {board[r][c].isMine = true;minesPlaced++;// 更新周围格子的数字for (let i = Math.max(0, r-1); i <= Math.min(rows-1, r+1); i++) {for (let j = Math.max(0, c-1); j <= Math.min(cols-1, c+1); j++) {if (!board[i][j].isMine) {board[i][j].value++;}}}}}}function handleClick(row, col, isDoubleClick = false) {if (gameOver || !isDoubleClick && board[row][col].flagged) return;if (firstClick) {firstClick = false;placeMines(row, col);}if (isDoubleClick) {console.log("handleDoubleClick..");handleDoubleClick(row, col);return;}if (board[row][col].isMine) {// 点到雷了，游戏结束revealAllMines();document.getElementById('status').textContent = '游戏结束！你输了！';gameOver = true;return;}revealCell(row, col);// 检查是否胜利if (cellsRevealed === (rows * cols - mines)) {document.getElementById('status').textContent = '恭喜你赢了！';gameOver = true;}}function handleDoubleClick(row, col) {if (board[row][col].revealed && board[row][col].value > 0) {let flaggedAround = 0;let unrevealedAround = [];// 统计周围标记数和未翻开格子for (let i = Math.max(0, row-1); i <= Math.min(rows-1, row+1); i++) {for (let j = Math.max(0, col-1); j <= Math.min(cols-1, col+1); j++) {if (i === row && j === col) continue;if (board[i][j].flagged) flaggedAround++;if (!board[i][j].revealed && !board[i][j].flagged) {unrevealedAround.push([i, j]);}}}// 标记数与数字匹配时展开周围if (flaggedAround === board[row][col].value) {unrevealedAround.forEach(pos => {if (board[pos[0]][pos[1]].isMine) {revealAllMines();document.getElementById('status').textContent = '游戏结束！标记错误！';gameOver = true;} else {revealCell(pos[0], pos[1]);}});}}}function handleRightClick(row, col) {if (gameOver || board[row][col].revealed) return;let cell = document.getElementById(`cell-${row}-${col}`);if (board[row][col].flagged) {board[row][col].flagged = false;cell.classList.remove('flag');cell.textContent = '';flagsPlaced--;} else {board[row][col].flagged = true;cell.classList.add('flag');
cell.textContent = '🚩';flagsPlaced++;}document.getElementById('status').textContent = `剩余雷数: ${mines - flagsPlaced}`;}function revealCell(row, col) {if (row < 0 || row >= rows || col < 0 || col >= cols || board[row][col].revealed || board[row][col].flagged) {return;}board[row][col].revealed = true;cellsRevealed++;let cell = document.getElementById(`cell-${row}-${col}`);cell.classList.add('revealed');if (board[row][col].value > 0) {cell.textContent = board[row][col].value;cell.style.color = getNumberColor(board[row][col].value);} else {// 如果是空白格子，递归显示周围的格子for (let i = Math.max(0, row-1); i <= Math.min(rows-1, row+1); i++) {for (let j = Math.max(0, col-1); j <= Math.min(cols-1, col+1); j++) {if (i !== row || j !== col) {revealCell(i, j);}}}}}function revealAllMines() {for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {if (board[i][j].isMine) {let cell = document.getElementById(`cell-${i}-${j}`);cell.classList.add('mine');cell.textContent = '💣';}}}}function getNumberColor(num) {const colors = ['',       // 0 (不会显示)'#0000FF', // 1'#008000', // 2'#FF0000', // 3'#000080', // 4'#800000', // 5'#008080', // 6'#000000', // 7'#808080'  // 8];return colors[num];}// 默认开始一个初级游戏window.onload = function() {newGame(10, 10, 15);};</script>
</body>
</html>

http://www.xdnf.cn/news/681355.html

相关文章：

  • 如何设计高效的索引策略？
  • 一则doris数据不一致问题
  • Day38 Python打卡训练营
  • Python+OpenCV实战：高效实现车牌自动识别
  • 卷积神经网络（CNN）入门学习笔记
  • 定时清理流媒体服务器录像自动化bash脚本
  • 大模型 Agent 中的通用 MCP 机制详解
  • JavaScript- 4.1 DOM-document对象
  • FEMFAT许可的常见问题及解决方案
  • 【慧游鲁博】【10】全端优化用户信息存储+网页端user模块与后端对接
  • AI一周事件（2025年5月20日-5月26日）
  • 使用API有效率地管理Dynadot域名，查看一口价域名的详细信息
  • 伪创新-《软件方法》全流程引领AI-第1章 04
  • JavaScript 中 this 指向详解
  • 2025年我国低空经济产业链研究与梳理
  • P2 C++基础（2.2）
  • minhash-大模型输入前的去重
  • Bootloader 与 U-Boot 全解析
  • 2025年- H55-Lc163--124. 二叉树的最大路径和(深搜）--Java版
  • 深度学习常见实验问题与实验技巧
  • 基于 OpenCV 和 DLib 实现面部特征调整（眼间距、鼻子、嘴巴）
  • DAY9 热力图和箱线图的绘制
  • 【数据库】-4 mysql权限语句
  • 阿姆斯特朗数
  • 两视角分析
  • Python 实现桶排序详解
  • 龙虎榜——20250527
  • 7.0 Q1|四川大学CHARLS发文 | 前瞻性队列中肌肉减少症和心血管疾病的变化
  • vue3 判断 一个多字段数组内 包含某个值
  • STM32 UART通信实战指南：从原理到项目落地