DeepSeek 代码生成：五子棋游戏 这段代码是一个 HTML 页面，它包含 CSS 样式和 JavaScript 脚本，用于创建一个简单的五子棋游戏。用户可以在棋盘上轮流放置黑白棋子，游戏会自动检查是否有玩家获胜。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你
演示效果
使用教程
DeepSeek | 深度求索 点击官网注册
DeepSeek 提示词样例
HTML&CSS
<!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> body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; margin: 0; font-family: Arial, sans-serif; } #game-container { text-align: center; } #game-board { display: grid; grid-template-columns: repeat(15, 30px); grid-template-rows: repeat(15, 30px); gap: 1px; background-color: #d2b48c; border: 5px solid #8b4513; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .cell { width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s; } .cell:hover { background-color: rgba(255, 255, 255, 0.3); } .cell.black { background-color: black; border-radius: 50%; } .cell.white { background-color: white; border-radius: 50%; } #status { margin-top: 20px; font-size: 24px; color: #333; } #restart-button { margin-top: 20px; padding: 10px 20px; font-size: 18px; color: white; background-color: #8b4513; border: none; border-radius: 5px; cursor: pointer; display: none; } #restart-button:hover { background-color: #a0522d; } </style> </head> <body> <div id="game-container"> <div id="game-board"></div> <div id="status">黑方回合</div> <button id="restart-button">再来一局</button> </div> <script> const boardSize = 15; const board = []; let currentPlayer = 'black'; let gameOver = false; const gameBoard = document.getElementById('game-board'); const statusDiv = document.getElementById('status'); const restartButton = document.getElementById('restart-button'); // 初始化棋盘 function initBoard() { gameBoard.innerHTML = ''; for (let i = 0; i < boardSize; i++) { board[i] = []; for (let j = 0; j < boardSize; j++) { board[i][j] = null; const cell = document.createElement('div'); cell.classList.add('cell'); cell.dataset.row = i; cell.dataset.col = j; cell.addEventListener('click', onCellClick); gameBoard.appendChild(cell); } } } // 处理单元格点击事件 function onCellClick(event) { if (gameOver) return; const row = parseInt(event.target.dataset.row); const col = parseInt(event.target.dataset.col); if (board[row][col] !== null) return; board[row][col] = currentPlayer; event.target.classList.add(currentPlayer); if (checkWin(row, col)) { statusDiv.textContent = `${currentPlayer === 'black' ? '黑' : '白'}方获胜！`; gameOver = true; restartButton.style.display = 'block'; return; } currentPlayer = currentPlayer === 'black' ? 'white' : 'black'; statusDiv.textContent = `${currentPlayer === 'black' ? '黑' : '白'}方回合`; } // 检查是否获胜 function checkWin(row, col) { const directions = [ [1, 0], // 水平 [0, 1], // 垂直 [1, 1], // 对角线 [1, -1] // 反对角线 ]; for (const [dx, dy] of directions) { let count = 1; // 向一个方向检查 let x = row + dx; let y = col + dy; while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && board[x][y] === currentPlayer) { count++; x += dx; y += dy; } // 向相反方向检查 x = row - dx; y = col - dy; while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && board[x][y] === currentPlayer) { count++; x -= dx; y -= dy; } if (count >= 5) { return true; } } return false; } // 重新开始游戏 function restartGame() { board.forEach(row => row.fill(null)); currentPlayer = 'black'; gameOver = false; statusDiv.textContent = '黑方回合'; restartButton.style.display = 'none'; initBoard(); } // 初始化游戏 initBoard(); restartButton.addEventListener('click', restartGame); </script> </body> </html>
