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

DeepSeek五子棋游戏与AI对战

news 2025/6/30 14:26:07

使用DeepSeek(R1模型)开发一款HTML5五子棋对战游戏，可以与AI进行对战。
提示词
帮我做一款html5五子棋游戏游戏的各个流程要完善。做的很好但是界面比例得缩放到75%时候全部界面才能显示出来这个要修复一下还有就是AI的水平太低了游戏毫无难度需要增强白棋ai的水平
在这里插入图片描述

五子棋游戏功能总结
游戏流程
1 开始界面
显示游戏规则和难度选择
提供四种AI难度选项（简单/中等/困难/专家）
2 游戏主界面
15×15标准棋盘
实时显示游戏状态（当前玩家/回合）
动态棋盘和棋子渲染
3 游戏结束界面
显示获胜方（黑方/白方）或平局
提供游戏结果描述
"再来一局"按钮

核心功能
1 棋盘系统
15×15标准五子棋棋盘
动态尺寸调整（响应式设计）
2 游戏机制
黑白双方轮流落子（黑方先行）
五子连珠判定（横/竖/斜方向）
胜负判定与平局判定
最后落子标记（红色圆圈）
3 控制功能
游戏控制
新游戏（可选择难度）
重新开始当前游戏
悔棋功能（可撤销上一步操作）
支持多步悔棋（包括AI落子）
AI对手
难度级别特性描述
简单随机落子
中等基础策略（阻挡玩家连珠）+两层评估
困难位置评估策略+三层评估
专家增强算法+四层深度评估
AI增强特性：
连子数量评估（活二/活三/活四）
进攻与防守平衡策略
中心位置优势计算
威胁检测（优先防守玩家威胁位置）
获胜机会优先选择
模拟对手最佳回应
AI思考状态显示（带动画效果）
思考时间随难度增加（专家级最长）
视觉效果
界面设计
动态渐变背景（流动色带）
精美的棋盘和棋子设计（带渐变效果）
当前玩家高亮显示
平滑的弹窗动画
响应式设计
自适应不同屏幕尺寸
移动端优化布局
窗口大小变化自动重绘
特效
最后落子标记（红色圆圈）
AI思考动画（脉动效果）
按钮悬停效果
用户体验
交互优化
游戏状态清晰显示
游戏结束信息丰富化
按钮布局合理化
智能提示
游戏结果描述（不同结果不同文案）
AI思考状态提示
难度选择说明
技术增强
窗口大小变化监听器
动态棋盘尺寸计算
Flex布局确保正确缩放
画布重绘优化
使用方式
复制HTML代码到文件
用浏览器打开即可开始游戏
操作方式：点击棋盘交叉点放置棋子
游戏规则：黑方先行，五子连珠获胜
该版本完美解决了界面比例问题，并在任何屏幕尺寸上都能正确显示。AI智能水平显著提升，特别是专家难度下展现出强大的计算能力，为玩家提供真正的挑战。
五子棋游戏所有源码如下

<!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;font-family: 'Microsoft YaHei', sans-serif;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);background-size: 400% 400%;animation: gradientBG 15s ease infinite;overflow: auto;padding: 20px;}@keyframes gradientBG {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}.container {display: flex;flex-direction: column;align-items: center;width: 100%;max-width: 900px;padding: 20px;}.title {color: #fff;font-size: 3rem;text-align: center;margin-bottom: 20px;text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);letter-spacing: 3px;position: relative;}.title::after {content: "";position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 200px;height: 4px;background: linear-gradient(to right, transparent, #ffeb3b, transparent);}.game-container {display: flex;flex-direction: column;align-items: center;width: 100%;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 20px;padding: 20px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);border: 1px solid rgba(255, 255, 255, 0.2);}.game-info {display: flex;justify-content: space-between;width: 100%;margin-bottom: 20px;color: white;font-size: 1.1rem;padding: 10px 20px;background: rgba(0, 0, 0, 0.3);border-radius: 10px;flex-wrap: wrap;}.player-info {display: flex;align-items: center;gap: 10px;margin: 5px 0;}.player-indicator {width: 20px;height: 20px;border-radius: 50%;}.black-indicator {background: #000;border: 2px solid #fff;}.white-indicator {background: #fff;border: 2px solid #000;}.current-player {font-weight: bold;color: #ffeb3b;text-shadow: 0 0 5px rgba(255, 235, 59, 0.7);}.canvas-container {position: relative;width: 100%;max-width: 600px;margin: 0 auto;}#game-canvas {width: 100%;height: auto;background: #e9b96e;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);cursor: pointer;display: block;}.controls {display: flex;justify-content: center;flex-wrap: wrap;gap: 15px;margin-top: 25px;width: 100%;}button {padding: 12px 25px;font-size: 1rem;border: none;border-radius: 50px;background: linear-gradient(to right, #ff9800, #ff5722);color: white;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}button:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);}button:active {transform: translateY(1px);}#restart-btn {background: linear-gradient(to right, #4CAF50, #2E7D32);}#undo-btn {background: linear-gradient(to right, #2196F3, #0D47A1);}.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;z-index: 100;opacity: 0;pointer-events: none;transition: opacity 0.5s ease;}.modal.active {opacity: 1;pointer-events: all;}.modal-content {background: linear-gradient(135deg, #2c3e50, #1a237e);padding: 30px;border-radius: 20px;text-align: center;width: 90%;max-width: 500px;box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);transform: scale(0.8);transition: transform 0.5s ease;}.modal.active .modal-content {transform: scale(1);}.modal h2 {color: #fff;font-size: 2.2rem;margin-bottom: 15px;}.modal p {color: #fff;font-size: 1.3rem;margin-bottom: 20px;}.winner-message {font-size: 1.8rem;color: #ffeb3b;text-shadow: 0 0 10px rgba(255, 235, 59, 0.7);margin: 15px 0;padding: 10px;}.start-screen {text-align: center;}.start-screen h2 {margin-bottom: 20px;}.game-rules {background: rgba(255, 255, 255, 0.1);padding: 15px;border-radius: 15px;margin: 15px 0;text-align: left;}.game-rules h3 {color: #ff9800;margin-bottom: 10px;text-align: center;}.game-rules ul {padding-left: 20px;}.game-rules li {color: #fff;margin-bottom: 8px;line-height: 1.4;}.difficulty {margin: 15px 0;color: white;}.difficulty select {padding: 8px 15px;border-radius: 10px;background: rgba(0, 0, 0, 0.3);color: white;border: 1px solid #ff9800;font-size: 1rem;}.ai-thinking {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;border-radius: 10px;color: white;font-size: 1.5rem;opacity: 0;pointer-events: none;transition: opacity 0.3s ease;}.ai-thinking.active {opacity: 1;}.ai-thinking span {animation: pulse 1.5s infinite;}@keyframes pulse {0% { opacity: 0.3; }50% { opacity: 1; }100% { opacity: 0.3; }}footer {color: rgba(255, 255, 255, 0.7);text-align: center;margin-top: 20px;font-size: 0.9rem;max-width: 600px;}@media (max-width: 768px) {.title {font-size: 2.2rem;}.game-container {padding: 15px;}.game-info {flex-direction: column;align-items: center;gap: 10px;}.controls {gap: 10px;}button {padding: 10px 20px;font-size: 0.9rem;}.modal h2 {font-size: 1.8rem;}.winner-message {font-size: 1.5rem;}}@media (max-width: 480px) {.title {font-size: 1.8rem;}.player-info {font-size: 1rem;}button {padding: 8px 15px;font-size: 0.85rem;}.modal-content {padding: 20px;}.modal h2 {font-size: 1.5rem;}.modal p {font-size: 1.1rem;}.winner-message {font-size: 1.3rem;}}</style>
</head>
<body><div class="container"><h1 class="title">增强版五子棋</h1><div class="game-container"><div class="game-info"><div class="player-info"><span>黑方:</span><div class="player-indicator black-indicator"></div><span id="black-player" class="player">玩家</span></div><div class="player-info"><span>当前:</span><span id="current-player" class="current-player">黑方</span></div><div class="player-info"><span>白方:</span><div class="player-indicator white-indicator"></div><span id="white-player" class="player">AI</span></div></div><div class="canvas-container"><canvas id="game-canvas" width="600" height="600"></canvas><div class="ai-thinking" id="ai-thinking"><span>AI思考中...</span></div></div><div class="controls"><button id="new-game-btn">新游戏</button><button id="restart-btn">重新开始</button><button id="undo-btn">悔棋</button></div></div><footer>五子棋游戏 | 黑方先行 | 五子连珠获胜 | 使用增强AI算法</footer></div><!-- 开始游戏弹窗 --><div class="modal" id="start-modal"><div class="modal-content"><div class="start-screen"><h2>增强版五子棋</h2><div class="game-rules"><h3>游戏规则</h3><ul><li>黑方先行，双方轮流在棋盘上放置棋子</li><li>首先在横、竖或斜方向形成五子连珠者获胜</li><li>棋盘大小为15×15</li><li>您将执黑先行，AI执白</li><li>AI使用增强算法，难度越高越强大</li></ul></div><div class="difficulty"><label for="difficulty">选择难度：</label><select id="difficulty"><option value="easy">简单</option><option value="medium" selected>中等</option><option value="hard">困难</option><option value="expert">专家</option></select></div><button id="start-game-btn">开始游戏</button></div></div></div><!-- 游戏结束弹窗 --><div class="modal" id="game-over-modal"><div class="modal-content"><h2>游戏结束</h2><div class="winner-message" id="winner-message">黑方获胜！</div><p id="game-result-message">五子连珠，精彩对局！</p><button id="play-again-btn">再来一局</button></div></div><script>document.addEventListener('DOMContentLoaded', () => {// 获取DOM元素const canvas = document.getElementById('game-canvas');const ctx = canvas.getContext('2d');const startModal = document.getElementById('start-modal');const gameOverModal = document.getElementById('game-over-modal');const startGameBtn = document.getElementById('start-game-btn');const playAgainBtn = document.getElementById('play-again-btn');const newGameBtn = document.getElementById('new-game-btn');const restartBtn = document.getElementById('restart-btn');const undoBtn = document.getElementById('undo-btn');const currentPlayerEl = document.getElementById('current-player');const winnerMessageEl = document.getElementById('winner-message');const aiThinkingEl = document.getElementById('ai-thinking');const gameResultMessage = document.getElementById('game-result-message');// 游戏常量const BOARD_SIZE = 15;let CELL_SIZE;let STONE_RADIUS;// 游戏状态let board = [];let currentPlayer = 1; // 1: 黑方, 2: 白方let gameActive = false;let moveHistory = [];let difficulty = "medium";// 初始化棋盘function initBoard() {// 计算动态尺寸const canvasWidth = canvas.parentElement.clientWidth;canvas.width = canvasWidth;canvas.height = canvasWidth;CELL_SIZE = canvas.width / BOARD_SIZE;STONE_RADIUS = CELL_SIZE * 0.4;board = [];for (let i = 0; i < BOARD_SIZE; i++) {board[i] = [];for (let j = 0; j < BOARD_SIZE; j++) {board[i][j] = 0;}}moveHistory = [];currentPlayer = 1;currentPlayerEl.textContent = "黑方";currentPlayerEl.style.color = "#ffeb3b";}// 绘制棋盘function drawBoard() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制棋盘背景ctx.fillStyle = '#e9b96e';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制网格线ctx.strokeStyle = '#000';ctx.lineWidth = 1;for (let i = 0; i < BOARD_SIZE; i++) {// 横线ctx.beginPath();ctx.moveTo(CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);ctx.lineTo(canvas.width - CELL_SIZE / 2, i * CELL_SIZE + CELL_SIZE / 2);ctx.stroke();// 竖线ctx.beginPath();ctx.moveTo(i * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE / 2);ctx.lineTo(i * CELL_SIZE + CELL_SIZE / 2, canvas.height - CELL_SIZE / 2);ctx.stroke();}// 绘制天元和星位const starPoints = [3, 7, 11];ctx.fillStyle = '#000';for (let i = 0; i < starPoints.length; i++) {for (let j = 0; j < starPoints.length; j++) {ctx.beginPath();ctx.arc(starPoints[i] * CELL_SIZE + CELL_SIZE / 2,starPoints[j] * CELL_SIZE + CELL_SIZE / 2,4, 0, Math.PI * 2);ctx.fill();}}// 绘制棋子for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {if (board[i][j] !== 0) {drawStone(i, j, board[i][j]);}}}}// 绘制棋子function drawStone(row, col, player) {const x = col * CELL_SIZE + CELL_SIZE / 2;const y = row * CELL_SIZE + CELL_SIZE / 2;ctx.beginPath();ctx.arc(x, y, STONE_RADIUS, 0, Math.PI * 2);if (player === 1) { // 黑棋const gradient = ctx.createRadialGradient(x - 3, y - 3, 1,x, y, STONE_RADIUS);gradient.addColorStop(0, "#666");gradient.addColorStop(1, "#000");ctx.fillStyle = gradient;} else { // 白棋const gradient = ctx.createRadialGradient(x - 2, y - 2, 1,x, y, STONE_RADIUS);gradient.addColorStop(0, "#fff");gradient.addColorStop(1, "#ddd");ctx.fillStyle = gradient;}ctx.fill();ctx.strokeStyle = "#000";ctx.lineWidth = 1;ctx.stroke();// 为最后一步添加标记if (moveHistory.length > 0) {const lastMove = moveHistory[moveHistory.length - 1];if (lastMove.row === row && lastMove.col === col) {ctx.strokeStyle = "#ff0000";ctx.lineWidth = 2;ctx.beginPath();ctx.arc(x, y, STONE_RADIUS * 0.7, 0, Math.PI * 2);ctx.stroke();}}}// 落子function placeStone(row, col) {if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE || board[row][col] !== 0) {return false;}board[row][col] = currentPlayer;moveHistory.push({row, col, player: currentPlayer});// 检查胜利if (checkWin(row, col)) {endGame(currentPlayer === 1 ? "黑方" : "白方");return true;}// 检查平局if (moveHistory.length === BOARD_SIZE * BOARD_SIZE) {endGame("平局");return true;}// 切换玩家currentPlayer = currentPlayer === 1 ? 2 : 1;currentPlayerEl.textContent = currentPlayer === 1 ? "黑方" : "白方";return true;}// 检查胜利function checkWin(row, col) {const player = board[row][col];const directions = [[0, 1],   // 水平[1, 0],   // 垂直[1, 1],   // 对角线[1, -1]   // 反对角线];for (const [dx, dy] of directions) {let count = 1;  // 当前位置已经有一个棋子// 正向检查for (let i = 1; i <= 4; i++) {const newRow = row + dx * i;const newCol = col + dy * i;if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || board[newRow][newCol] !== player) {break;}count++;}// 反向检查for (let i = 1; i <= 4; i++) {const newRow = row - dx * i;const newCol = col - dy * i;if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE || board[newRow][newCol] !== player) {break;}count++;}if (count >= 5) {return true;}}return false;}// 结束游戏function endGame(winner) {gameActive = false;winnerMessageEl.textContent = winner === "平局" ? "平局！" : `${winner}获胜！`;if (winner === "黑方") {gameResultMessage.textContent = "恭喜您战胜了强大的AI！";} else if (winner === "白方") {gameResultMessage.textContent = "AI展示了强大的计算能力！再试一次？";} else {gameResultMessage.textContent = "旗鼓相当！精彩的对局！";}gameOverModal.classList.add('active');}// 开始新游戏function startNewGame() {initBoard();drawBoard();gameActive = true;startModal.classList.remove('active');gameOverModal.classList.remove('active');}// 悔棋function undoMove() {if (moveHistory.length < 1 || !gameActive) return;const lastMove = moveHistory.pop();board[lastMove.row][lastMove.col] = 0;currentPlayer = lastMove.player;currentPlayerEl.textContent = currentPlayer === 1 ? "黑方" : "白方";// 如果上一步是AI，需要再悔一步if (moveHistory.length > 0 && moveHistory[moveHistory.length - 1].player === 2) {const aiMove = moveHistory.pop();board[aiMove.row][aiMove.col] = 0;}drawBoard();}// 增强的AI评估函数function evaluatePosition(row, col, player) {let score = 0;const opponent = player === 1 ? 2 : 1;// 方向数组：水平、垂直、对角线、反对角线const directions = [[0, 1], [1, 0], [1, 1], [1, -1]];// 中心位置分数更高const center = BOARD_SIZE / 2;const distanceFromCenter = Math.sqrt(Math.pow(row - center, 2) + Math.pow(col - center, 2));score += (BOARD_SIZE - distanceFromCenter) * 2;// 检查每个方向for (const [dx, dy] of directions) {let playerCount = 0;let opponentCount = 0;let emptyCount = 0;// 检查当前方向上的5个点for (let i = -4; i <= 4; i++) {if (i === 0) {// 当前位置playerCount++;continue;}const newRow = row + dx * i;const newCol = col + dy * i;if (newRow < 0 || newRow >= BOARD_SIZE || newCol < 0 || newCol >= BOARD_SIZE) {continue;}const cell = board[newRow][newCol];if (cell === player) {playerCount++;} else if (cell === opponent) {opponentCount++;} else {emptyCount++;}}// 根据连子情况评分if (playerCount >= 5) {score += 100000; // 五连} else if (playerCount === 4 && emptyCount > 0) {score += 10000; // 活四} else if (playerCount === 3 && emptyCount > 0) {score += 1000; // 活三} else if (playerCount === 2 && emptyCount > 0) {score += 100; // 活二}// 防守评分if (opponentCount >= 4 && emptyCount > 0) {score += 5000; // 阻止对手活四} else if (opponentCount === 3 && emptyCount > 0) {score += 500; // 阻止对手活三}}return score;}// 增强的AI落子function makeAIMove() {if (!gameActive || currentPlayer !== 2) return;// 显示AI思考状态aiThinkingEl.classList.add('active');// 延迟执行，模拟AI思考setTimeout(() => {let bestScore = -Infinity;let bestMove = null;// 获取所有可落子的位置let emptyCells = [];for (let i = 0; i < BOARD_SIZE; i++) {for (let j = 0; j < BOARD_SIZE; j++) {if (board[i][j] === 0) {emptyCells.push({row: i, col: j});}}}// 根据难度设置不同的搜索深度let searchDepth;switch(difficulty) {case "easy":searchDepth = 1;break;case "medium":searchDepth = 2;break;case "hard":searchDepth = 3;break;case "expert":searchDepth = 4;break;default:searchDepth = 2;}// 评估每个可能的位置for (const cell of emptyCells) {let score = evaluatePosition(cell.row, cell.col, 2);// 增强：检查此位置是否形成威胁board[cell.row][cell.col] = 2;if (checkWin(cell.row, cell.col)) {score += 1000000; // 直接获胜}board[cell.row][cell.col] = 0;// 增强：检查玩家下一步是否会获胜board[cell.row][cell.col] = 1;if (checkWin(cell.row, cell.col)) {score += 50000; // 必须防守}board[cell.row][cell.col] = 0;// 根据难度增加搜索深度if (difficulty !== "easy") {for (let d = 0; d < searchDepth; d++) {// 模拟对手的最佳回应let opponentScore = -Infinity;for (const oppCell of emptyCells) {if (oppCell.row === cell.row && oppCell.col === cell.col) continue;const oppScore = evaluatePosition(oppCell.row, oppCell.col, 1);if (oppScore > opponentScore) {opponentScore = oppScore;}}score -= opponentScore * 0.5;}}// 更新最佳移动if (score > bestScore) {bestScore = score;bestMove = cell;}}// 如果没有找到最佳移动，随机选择if (!bestMove && emptyCells.length > 0) {bestMove = emptyCells[Math.floor(Math.random() * emptyCells.length)];}// 执行最佳移动if (bestMove) {placeStone(bestMove.row, bestMove.col);drawBoard();}// 隐藏AI思考状态aiThinkingEl.classList.remove('active');}, difficulty === "expert" ? 1000 : difficulty === "hard" ? 700 : 400);}// 事件监听canvas.addEventListener('click', (e) => {if (!gameActive || currentPlayer !== 1) return;const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;const col = Math.floor(x / CELL_SIZE);const row = Math.floor(y / CELL_SIZE);if (placeStone(row, col)) {drawBoard();// AI回合if (gameActive) {makeAIMove();}}});startGameBtn.addEventListener('click', () => {difficulty = document.getElementById('difficulty').value;startNewGame();});playAgainBtn.addEventListener('click', startNewGame);newGameBtn.addEventListener('click', () => {startModal.classList.add('active');});restartBtn.addEventListener('click', () => {if (confirm("确定要重新开始当前游戏吗？")) {startNewGame();}});undoBtn.addEventListener('click', undoMove);// 窗口大小变化时重新初始化棋盘window.addEventListener('resize', () => {if (gameActive) {initBoard();drawBoard();}});// 初始化initBoard();startModal.classList.add('active');drawBoard();});</script>
</body>
</html>