用(HTML5 + JavaScript + CSS)设计一个外观布局美观，游戏可以和人对玩，也可以和电脑对玩的中国象棋游戏。

以下是一个使用 HTML5、JavaScript 和 CSS 实现的中国象棋游戏示例，该游戏支持人和人对玩，也支持人和电脑对玩。 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="chessboard"></div> <button id="startPVP">人 vs 人</button> <button id="startPVC">人 vs 电脑</button> <script src="script.js"></script> </body> </html> ``` CSS 代码（styles.css） ```css #chessboard { display: grid; grid-template-columns: repeat(9, 50px); grid-template-rows: repeat(10, 50px); gap: 2px; background-color: #b58863; padding: 10px; width: fit-content; margin: 20px auto; } .chess-piece { width: 50px; height: 50px; background-color: #f0d9b5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; } button { display: block; margin: 10px auto; padding: 10px 20px; font-size: 16px; } ``` JavaScript 代码（script.js） ```javascript // 获取棋盘元素 const chessboard = document.getElementById('chessboard'); // 获取人 vs 人按钮 const startPVP = document.getElementById('startPVP'); // 获取人 vs 电脑按钮 const startPVC = document.getElementById('startPVC'); // 初始化棋盘数据 let board = Array.from({ length: 10 }, () => Array(9).fill(null)); // 当前轮到的玩家，1 表示红方，-1 表示黑方 let currentPlayer = 1; // 游戏模式，'PVP' 表示人 vs 人，'PVC' 表示人 vs 电脑 let gameMode = null; // 初始化棋盘显示 function initBoard() { // 清空棋盘 chessboard.innerHTML = ''; // 初始化棋盘数据 board = Array.from({ length: 10 }, () => Array(9).fill(null)); // 红方棋子初始布局 const redPieces = ['车', '马', '相', '仕', '帅', '仕', '相', '马', '车']; // 黑方棋子初始布局 const blackPieces = ['車', '馬', '象', '士', '将', '士', '象', '馬', '車']; // 放置红方棋子 for (let i = 0; i < 9; i++) { board[0][i] = { type: redPieces[i], color: 1 }; } board[2][1] = board[2][7] = { type: '炮', color: 1 }; board[3][0] = board[3][2] = board[3][4] = board[3][6] = board[3][8] = { type: '兵', color: 1 }; // 放置黑方棋子 for (let i = 0; i < 9; i++) { board[9][i] = { type: blackPieces[i], color: -1 }; } board[7][1] = board[7][7] = { type: '砲', color: -1 }; board[6][0] = board[6][2] = board[6][4] = board[6][6] = board[6][8] = { type: '卒', color: -1 }; // 渲染棋盘 for (let row = 0; row < 10; row++) { for (let col = 0; col < 9; col++) { const cell = document.createElement('div'); if (board[row][col]) { cell.textContent = board[row][col].type; cell.classList.add('chess-piece'); if (board[row][col].color === 1) { cell.style.color = 'red'; } } cell.dataset.row = row; cell.dataset.col = col; cell.addEventListener('click', handlePieceClick); chessboard.appendChild(cell); } } } // 处理棋子点击事件 function handlePieceClick(event) { const row = parseInt(event.target.dataset.row); const col = parseInt(event.target.dataset.col); if (board[row][col] && board[row][col].color === currentPlayer) { // 选中当前玩家的棋子 // 这里可以添加选中效果，例如高亮显示 } else if (/* 这里添加合法移动的判断逻辑 */) { // 移动棋子 // 更新棋盘数据 // 切换玩家 currentPlayer = -currentPlayer; // 如果是人和电脑对战，轮到电脑下棋 if (gameMode === 'PVC' && currentPlayer === -1) { computerMove(); } } } // 电脑下棋逻辑（简单随机移动示例） function computerMove() { let validMoves = []; // 找出所有黑方棋子的合法移动 for (let row = 0; row < 10; row++) { for (let col = 0; col < 9; col++) { if (board[row][col] && board[row][col].color === -1) { // 这里添加合法移动的判断逻辑 // 将合法移动添加到 validMoves 数组中 } } } if (validMoves.length > 0) { // 随机选择一个合法移动 const randomMove = validMoves[Math.floor(Math.random() * validMoves.length)]; // 移动棋子 // 更新棋盘数据 // 切换玩家 currentPlayer = 1; } } // 开始人 vs 人游戏 startPVP.addEventListener('click', () => { gameMode = 'PVP'; currentPlayer = 1; initBoard(); }); // 开始人 vs 电脑游戏 startPVC.addEventListener('click', () => { gameMode = 'PVC'; currentPlayer = 1; initBoard(); }); // 初始化页面时显示开始按钮 initBoard(); ``` 需要小心的地方我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 棋子移动规则的实现比较复杂，需要仔细考虑各种棋子的走法和限制，例如马的蹩脚、象不能过河等。 2. 在处理点击事件时，要注意防止误操作，例如连续点击同一个棋子或者点击空白位置。 3. 电脑下棋的逻辑需要根据实际需求进行优化，简单的随机移动可能无法提供良好的游戏体验。 [2025-08-15 00:51:18 | AI写代码神器 | 1709点数解答]

服务商

更多选项

快捷项

直通车

用(HTML5 + JavaScript + CSS)设计一个外观布局美观，游戏可以和人对玩，也可以和电脑对玩的中国象棋游戏。