HTML5+JS+CSS实现可人机、人人对战的中国围棋游戏，附完整代码与注意要点！

以下是一个使用 HTML5、JavaScript 和 CSS 实现的简单中国围棋游戏示例，支持人机对战（人一方，电脑三方）和人人对战。 HTML 代码（index.html） ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>中国围棋游戏</title> </head> <body> <div id="game-board"></div> <button id="start-game">开始游戏</button> <button id="reset-game">重置游戏</button> <select id="game-mode"> <option value="human">人人对战</option> <option value="computer">人机对战</option> </select> <script src="script.js"></script> </body> </html> ``` CSS 代码（styles.css） ```css #game-board { width: 600px; height: 600px; background-color: #f0d9b5; border: 2px solid #000; position: relative; margin: 20px auto; } .cell { width: 30px; height: 30px; position: absolute; box-sizing: border-box; } .stone { width: 26px; height: 26px; border-radius: 50%; position: absolute; top: 2px; left: 2px; } .black { background-color: #000; } .white { background-color: #fff; border: 1px solid #000; } button, select { display: block; margin: 10px auto; } ``` JavaScript 代码（script.js） ```javascript // 棋盘大小 const BOARD_SIZE = 19; // 每个格子的大小 const CELL_SIZE = 30; // 游戏棋盘元素 const gameBoard = document.getElementById('game-board'); // 开始游戏按钮 const startGameButton = document.getElementById('start-game'); // 重置游戏按钮 const resetGameButton = document.getElementById('reset-game'); // 游戏模式选择框 const gameModeSelect = document.getElementById('game-mode'); // 棋盘二维数组，用于记录每个格子的状态 let board = []; // 当前玩家，1 表示黑棋，2 表示白棋 let currentPlayer = 1; // 游戏是否开始 let gameStarted = false; // 游戏模式，'human' 表示人人对战，'computer' 表示人机对战 let gameMode = 'human'; // 初始化棋盘 function initBoard() { board = []; for (let i = 0; i < BOARD_SIZE; i++) { board[i] = []; for (let j = 0; j < BOARD_SIZE; j++) { board[i][j] = 0; // 创建每个格子元素 const cell = document.createElement('div'); cell.classList.add('cell'); cell.style.left = j * CELL_SIZE + 'px'; cell.style.top = i * CELL_SIZE + 'px'; gameBoard.appendChild(cell); } } } // 落子函数 function placeStone(x, y) { if (!gameStarted || board[x][y] !== 0) return; board[x][y] = currentPlayer; // 创建棋子元素 const stone = document.createElement('div'); stone.classList.add('stone', currentPlayer === 1 ? 'black' : 'white'); stone.style.left = y * CELL_SIZE + 2 + 'px'; stone.style.top = x * CELL_SIZE + 2 + 'px'; gameBoard.appendChild(stone); // 切换玩家 currentPlayer = currentPlayer === 1 ? 2 : 1; // 如果是人机对战，电脑落子 if (gameMode === 'computer') { computerMove(); } } // 电脑落子函数（简单随机落子，可优化） function computerMove() { let availableMoves = []; for (let i = 0; i < BOARD_SIZE; i++) { for (let j = 0; j < BOARD_SIZE; j++) { if (board[i][j] === 0) { availableMoves.push({ x: i, y: j }); } } } if (availableMoves.length > 0) { const randomIndex = Math.floor(Math.random() * availableMoves.length); const move = availableMoves[randomIndex]; placeStone(move.x, move.y); } } // 开始游戏 function startGame() { gameStarted = true; gameMode = gameModeSelect.value; initBoard(); currentPlayer = 1; } // 重置游戏 function resetGame() { gameStarted = false; gameBoard.innerHTML = ''; } // 绑定点击事件 startGameButton.addEventListener('click', startGame); resetGameButton.addEventListener('click', resetGame); gameBoard.addEventListener('click', function (e) { const x = Math.floor((e.offsetY) / CELL_SIZE); const y = Math.floor((e.offsetX) / CELL_SIZE); placeStone(x, y); }); // 初始化棋盘 initBoard(); ``` 代码解释 - HTML：创建了游戏界面，包含游戏棋盘、开始游戏按钮、重置游戏按钮和游戏模式选择框。 - CSS：对游戏棋盘和棋子进行了样式设计，使其外观美观。 - JavaScript：实现了游戏的核心逻辑，包括初始化棋盘、落子、切换玩家和电脑落子等功能。需要小心的地方我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 边界检查：在落子和判断是否有气时，要确保不会越界访问棋盘数组。 2. 提子规则：当前代码没有实现提子规则，需要在后续完善时仔细处理。 3. 电脑算法：简单的随机落子算法不够智能，可根据围棋规则和策略进行优化。 ######[AI写代码神器 | 1494点数解答 | 2025-08-15 01:00:29]

服务商

更多选项

快捷项

自定义