超详细！用 HTML 实现含王车易位、将杀等规则的国际象棋游戏

以下是一个使用 HTML、CSS 和 JavaScript 实现的国际象棋游戏，包含王车易位、将杀、计时器、和棋条件等规则。 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-container"> <div id="board"></div> <div id="timer"> <div id="white-timer">0:00</div> <div id="black-timer">0:00</div> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS 部分（`styles.css`） ```css #game-container { display: flex; justify-content: center; align-items: center; height: 100vh; } #board { display: grid; grid-template-columns: repeat(8, 60px); grid-template-rows: repeat(8, 60px); border: 2px solid #000; } .square { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 40px; } .light { background-color: #f0d9b5; } .dark { background-color: #b58863; } #timer { margin-left: 20px; display: flex; flex-direction: column; } #white-timer, #black-timer { font-size: 24px; margin-bottom: 10px; } ``` JavaScript 部分（`script.js`） ```javascript // 棋盘初始化 const board = document.getElementById('board'); const whiteTimer = document.getElementById('white-timer'); const blackTimer = document.getElementById('black-timer'); let currentPlayer = 'white'; let selectedPiece = null; let whiteTime = 0; let blackTime = 0; let timerInterval; // 创建棋盘 function createBoard() { for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const square = document.createElement('div'); square.classList.add('square'); square.classList.add((row + col) % 2 === 0 ? 'light' : 'dark'); square.dataset.row = row; square.dataset.col = col; square.addEventListener('click', () => handleSquareClick(row, col)); board.appendChild(square); } } } // 初始化棋子 function initializePieces() { // 白方棋子 for (let col = 0; col < 8; col++) { const pawn = createPiece('pawn', 'white'); getSquare(1, col).appendChild(pawn); } const whitePieces = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']; for (let col = 0; col < 8; col++) { const piece = createPiece(whitePieces[col], 'white'); getSquare(0, col).appendChild(piece); } // 黑方棋子 for (let col = 0; col < 8; col++) { const pawn = createPiece('pawn', 'black'); getSquare(6, col).appendChild(pawn); } const blackPieces = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']; for (let col = 0; col < 8; col++) { const piece = createPiece(blackPieces[col], 'black'); getSquare(7, col).appendChild(piece); } } // 创建棋子 function createPiece(type, color) { const piece = document.createElement('span'); piece.dataset.type = type; piece.dataset.color = color; piece.textContent = getPieceSymbol(type, color); return piece; } // 获取棋子符号 function getPieceSymbol(type, color) { const symbols = { pawn: color === 'white' ? '♙' : '♟', rook: color === 'white' ? '♖' : '♜', knight: color === 'white' ? '♘' : '♞', bishop: color === 'white' ? '♗' : '♝', queen: color === 'white' ? '♕' : '♛', king: color === 'white' ? '♔' : '♚' }; return symbols[type]; } // 获取方格 function getSquare(row, col) { return document.querySelector(`[data-row="${row}"][data-col="${col}"]`); } // 处理方格点击事件 function handleSquareClick(row, col) { const square = getSquare(row, col); const piece = square.firstChild; if (selectedPiece) { if (isValidMove(selectedPiece, row, col)) { movePiece(selectedPiece, row, col); selectedPiece = null; switchPlayer(); } else { selectedPiece = null; } } else if (piece && piece.dataset.color === currentPlayer) { selectedPiece = piece; } } // 移动棋子 function movePiece(piece, row, col) { const fromRow = parseInt(piece.parentNode.dataset.row); const fromCol = parseInt(piece.parentNode.dataset.col); const toSquare = getSquare(row, col); toSquare.appendChild(piece); // 处理王车易位等特殊规则 if (piece.dataset.type === 'king' && Math.abs(col - fromCol) === 2) { handleCastling(fromRow, fromCol, row, col); } // 检查将杀、和棋等情况 checkGameEnd(); } // 处理王车易位 function handleCastling(fromRow, fromCol, toRow, toCol) { if (toCol === 2) { // 长易位 const rook = getSquare(fromRow, 0).firstChild; movePiece(rook, toRow, 3); } else if (toCol === 6) { // 短易位 const rook = getSquare(fromRow, 7).firstChild; movePiece(rook, toRow, 5); } } // 检查是否为有效移动 function isValidMove(piece, toRow, toCol) { const fromRow = parseInt(piece.parentNode.dataset.row); const fromCol = parseInt(piece.parentNode.dataset.col); // 简单示例，需要实现完整规则 if (piece.dataset.type === 'pawn') { if (piece.dataset.color === 'white') { if (fromRow === 1 && toRow === 3 && fromCol === toCol &&!getSquare(2, toCol).firstChild) { return true; } if (toRow === fromRow + 1 && toCol === fromCol &&!getSquare(toRow, toCol).firstChild) { return true; } if (toRow === fromRow + 1 && Math.abs(toCol - fromCol) === 1 && getSquare(toRow, toCol).firstChild) { return true; } } else { if (fromRow === 6 && toRow === 4 && fromCol === toCol &&!getSquare(5, toCol).firstChild) { return true; } if (toRow === fromRow - 1 && toCol === fromCol &&!getSquare(toRow, toCol).firstChild) { return true; } if (toRow === fromRow - 1 && Math.abs(toCol - fromCol) === 1 && getSquare(toRow, toCol).firstChild) { return true; } } } return false; } // 切换玩家 function switchPlayer() { currentPlayer = currentPlayer === 'white' ? 'black' : 'white'; startTimer(); } // 开始计时器 function startTimer() { clearInterval(timerInterval); timerInterval = setInterval(() => { if (currentPlayer === 'white') { whiteTime++; whiteTimer.textContent = formatTime(whiteTime); } else { blackTime++; blackTimer.textContent = formatTime(blackTime); } }, 1000); } // 格式化时间 function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const secs = seconds % 60; return `${minutes}:${secs < 10 ? '0' + secs : secs}`; } // 检查游戏结束 function checkGameEnd() { // 简单示例，需要实现完整规则 // 检查将杀、和棋等情况 } // 启动游戏 function startGame() { createBoard(); initializePieces(); startTimer(); } startGame(); ``` 代码说明 - `createBoard` 函数用于创建棋盘的 HTML 结构。 - `initializePieces` 函数用于初始化棋子的位置。 - `handleSquareClick` 函数处理方格的点击事件，实现棋子的选择和移动。 - `movePiece` 函数用于移动棋子，并处理王车易位等特殊规则。 - `handleCastling` 函数处理王车易位。 - `isValidMove` 函数检查移动是否有效，目前只实现了部分规则，需要进一步完善。 - `switchPlayer` 函数用于切换玩家，并启动计时器。 - `startTimer` 函数启动计时器，更新时间显示。 - `checkGameEnd` 函数检查游戏是否结束，需要实现将杀、和棋等规则。这个代码只是一个基础框架，完整的国际象棋规则实现较为复杂，需要进一步完善 `isValidMove` 和 `checkGameEnd` 等函数。 ######[AI问答 | 2468点数解答 | 2025-11-23 09:21:47]

服务商

更多选项

快捷项

自定义