Spaces:
Running
Running
| <html> | |
| <head> | |
| <style> | |
| .board { | |
| width: 480px; | |
| height: 480px; | |
| border: 2px solid #333; | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| } | |
| .square { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 40px; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .white { | |
| background: #fff; | |
| } | |
| .black { | |
| background: #999; | |
| } | |
| .highlight { | |
| background: rgba(255, 255, 0, 0.5); | |
| } | |
| .possible-move::after { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(0, 255, 0, 0.3); | |
| border-radius: 50%; | |
| } | |
| .captured { | |
| margin: 20px; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| } | |
| .captured-piece { | |
| font-size: 24px; | |
| margin: 0 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="board" id="board"></div> | |
| <div class="captured"> | |
| <div> | |
| White captured: <span id="whiteCaptured"></span> | |
| </div> | |
| <div> | |
| Black captured: <span id="blackCaptured"></span> | |
| </div> | |
| </div> | |
| <script> | |
| const board = document.getElementById('board'); | |
| const whiteCaptured = document.getElementById('whiteCaptured'); | |
| const blackCaptured = document.getElementById('blackCaptured'); | |
| let selectedPiece = null; | |
| let currentTurn = 'white'; | |
| let whiteCapturedPieces = []; | |
| let blackCapturedPieces = []; | |
| const initialBoard = [ | |
| ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'], | |
| ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'], | |
| ['', '', '', '', '', '', '', ''], | |
| ['', '', '', '', '', '', '', ''], | |
| ['', '', '', '', '', '', '', ''], | |
| ['', '', '', '', '', '', '', ''], | |
| ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'], | |
| ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'] | |
| ]; | |
| let gameBoard = JSON.parse(JSON.stringify(initialBoard)); | |
| function createBoard() { | |
| board.innerHTML = ''; | |
| for (let i = 0; i < 8; i++) { | |
| for (let j = 0; j < 8; j++) { | |
| const square = document.createElement('div'); | |
| square.className = `square ${(i + j) % 2 === 0 ? 'white' : 'black'}`; | |
| square.dataset.row = i; | |
| square.dataset.col = j; | |
| square.textContent = gameBoard[i][j]; | |
| square.addEventListener('click', handleClick); | |
| board.appendChild(square); | |
| } | |
| } | |
| } | |
| function isWhitePiece(piece) { | |
| return '♔♕♖♗♘♙'.includes(piece); | |
| } | |
| function isBlackPiece(piece) { | |
| return '♚♛♜♝♞♟'.includes(piece); | |
| } | |
| function clearHighlights() { | |
| document.querySelectorAll('.square').forEach(square => { | |
| square.classList.remove('highlight', 'possible-move'); | |
| }); | |
| } | |
| function getPossibleMoves(row, col) { | |
| const piece = gameBoard[row][col]; | |
| const moves = []; | |
| switch (piece) { | |
| case '♔': | |
| case '♚': | |
| // King moves | |
| for (let i = -1; i <= 1; i++) { | |
| for (let j = -1; j <= 1; j++) { | |
| if (i === 0 && j === 0) continue; | |
| const newRow = row + i; | |
| const newCol = col + j; | |
| if (isValidMove(newRow, newCol, piece)) { | |
| moves.push([newRow, newCol]); | |
| } | |
| } | |
| } | |
| break; | |
| case '♕': | |
| case '♛': | |
| // Queen moves (combination of rook and bishop) | |
| moves.push(...getRookMoves(row, col)); | |
| moves.push(...getBishopMoves(row, col)); | |
| break; | |
| case '♖': | |
| case '♜': | |
| // Rook moves | |
| moves.push(...getRookMoves(row, col)); | |
| break; | |
| case '♗': | |
| case '♝': | |
| // Bishop moves | |
| moves.push(...getBishopMoves(row, col)); | |
| break; | |
| case '♘': | |
| case '♞': | |
| // Knight moves | |
| const knightMoves = [ | |
| [-2, -1], [-2, 1], [-1, -2], [-1, 2], | |
| [1, -2], [1, 2], [2, -1], [2, 1] | |
| ]; | |
| for (const [dRow, dCol] of knightMoves) { | |
| const newRow = row + dRow; | |
| const newCol = col + dCol; | |
| if (isValidMove(newRow, newCol, piece)) { | |
| moves.push([newRow, newCol]); | |
| } | |
| } | |
| break; | |
| case '♙': | |
| // White pawn moves | |
| if (row > 0 && !gameBoard[row - 1][col]) { | |
| moves.push([row - 1, col]); | |
| if (row === 6 && !gameBoard[row - 2][col]) { | |
| moves.push([row - 2, col]); | |
| } | |
| } | |
| // Capture diagonally | |
| if (row > 0 && col > 0 && isBlackPiece(gameBoard[row - 1][col - 1])) { | |
| moves.push([row - 1, col - 1]); | |
| } | |
| if (row > 0 && col < 7 && isBlackPiece(gameBoard[row - 1][col + 1])) { | |
| moves.push([row - 1, col + 1]); | |
| } | |
| break; | |
| case '♟': | |
| // Black pawn moves | |
| if (row < 7 && !gameBoard[row + 1][col]) { | |
| moves.push([row + 1, col]); | |
| if (row === 1 && !gameBoard[row + 2][col]) { | |
| moves.push([row + 2, col]); | |
| } | |
| } | |
| // Capture diagonally | |
| if (row < 7 && col > 0 && isWhitePiece(gameBoard[row + 1][col - 1])) { | |
| moves.push([row + 1, col - 1]); | |
| } | |
| if (row < 7 && col < 7 && isWhitePiece(gameBoard[row + 1][col + 1])) { | |
| moves.push([row + 1, col + 1]); | |
| } | |
| break; | |
| } | |
| return moves; | |
| } | |
| function getRookMoves(row, col) { | |
| const moves = []; | |
| const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]]; | |
| for (const [dRow, dCol] of directions) { | |
| let newRow = row + dRow; | |
| let newCol = col + dCol; | |
| while (isValidMove(newRow, newCol, gameBoard[row][col])) { | |
| moves.push([newRow, newCol]); | |
| if (gameBoard[newRow][newCol]) break; | |
| newRow += dRow; | |
| newCol += dCol; | |
| } | |
| } | |
| return moves; | |
| } | |
| function getBishopMoves(row, col) { | |
| const moves = []; | |
| const directions = [[1, 1], [1, -1], [-1, 1], [-1, -1]]; | |
| for (const [dRow, dCol] of directions) { | |
| let newRow = row + dRow; | |
| let newCol = col + dCol; | |
| while (isValidMove(newRow, newCol, gameBoard[row][col])) { | |
| moves.push([newRow, newCol]); | |
| if (gameBoard[newRow][newCol]) break; | |
| newRow += dRow; | |
| newCol += dCol; | |
| } | |
| } | |
| return moves; | |
| } | |
| function isValidMove(row, col, piece) { | |
| if (row < 0 || row > 7 || col < 0 || col > 7) return false; | |
| const targetPiece = gameBoard[row][col]; | |
| if (!targetPiece) return true; | |
| return isWhitePiece(piece) ? isBlackPiece(targetPiece) : isWhitePiece(targetPiece); | |
| } | |
| function handleClick(event) { | |
| const row = parseInt(event.target.dataset.row); | |
| const col = parseInt(event.target.dataset.col); | |
| const piece = gameBoard[row][col]; | |
| if (selectedPiece) { | |
| const selectedRow = parseInt(selectedPiece.dataset.row); | |
| const selectedCol = parseInt(selectedPiece.dataset.col); | |
| const possibleMoves = getPossibleMoves(selectedRow, selectedCol); | |
| const isValidMove = possibleMoves.some(([r, c]) => r === row && c === col); | |
| if (isValidMove) { | |
| const capturedPiece = gameBoard[row][col]; | |
| if (capturedPiece) { | |
| if (isWhitePiece(gameBoard[selectedRow][selectedCol])) { | |
| whiteCapturedPieces.push(capturedPiece); | |
| } else { | |
| blackCapturedPieces.push(capturedPiece); | |
| } | |
| updateCapturedPieces(); | |
| if (capturedPiece === '♚' || capturedPiece === '♔') { | |
| alert('Game Over! ' + (isWhitePiece(gameBoard[selectedRow][selectedCol]) ? 'White' : 'Black') + ' wins!'); | |
| resetGame(); | |
| return; | |
| } | |
| } | |
| gameBoard[row][col] = gameBoard[selectedRow][selectedCol]; | |
| gameBoard[selectedRow][selectedCol] = ''; | |
| currentTurn = currentTurn === 'white' ? 'black' : 'white'; | |
| } | |
| selectedPiece = null; | |
| clearHighlights(); | |
| createBoard(); | |
| return; | |
| } | |
| if (!piece) return; | |
| const isWhiteTurn = currentTurn === 'white'; | |
| if ((isWhiteTurn && !isWhitePiece(piece)) || (!isWhiteTurn && !isBlackPiece(piece))) { | |
| return; | |
| } | |
| selectedPiece = event.target; | |
| clearHighlights(); | |
| event.target.classList.add('highlight'); | |
| const possibleMoves = getPossibleMoves(row, col); | |
| possibleMoves.forEach(([r, c]) => { | |
| const square = document.querySelector(`[data-row="${r}"][data-col="${c}"]`); | |
| square.classList.add('possible-move'); | |
| }); | |
| } | |
| function updateCapturedPieces() { | |
| whiteCaptured.textContent = whiteCapturedPieces.join(' '); | |
| blackCaptured.textContent = blackCapturedPieces.join(' '); | |
| } | |
| function resetGame() { | |
| gameBoard = JSON.parse(JSON.stringify(initialBoard)); | |
| currentTurn = 'white'; | |
| whiteCapturedPieces = []; | |
| blackCapturedPieces = []; | |
| selectedPiece = null; | |
| updateCapturedPieces(); | |
| createBoard(); | |
| } | |
| createBoard(); | |
| </script> | |
| </body> | |
| </html> |