Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chess Game</title> | |
| <style> | |
| :root { | |
| --light-square: #f0d9b5; | |
| --dark-square: #b58863; | |
| --highlight: rgba(255, 255, 0, 0.4); | |
| --possible-move: rgba(0, 255, 0, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #2c3e50; | |
| font-family: Arial, sans-serif; | |
| } | |
| .game-container { | |
| display: flex; | |
| gap: 2rem; | |
| padding: 1rem; | |
| background: #34495e; | |
| border-radius: 10px; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.5); | |
| } | |
| .board { | |
| width: 560px; | |
| height: 560px; | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| border: 3px solid #111; | |
| } | |
| .square { | |
| width: 70px; | |
| height: 70px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 45px; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .light { | |
| background-color: var(--light-square); | |
| } | |
| .dark { | |
| background-color: var(--dark-square); | |
| } | |
| .highlight { | |
| background-color: var(--highlight); | |
| } | |
| .possible-move::after { | |
| content: ''; | |
| position: absolute; | |
| width: 25px; | |
| height: 25px; | |
| background: var(--possible-move); | |
| border-radius: 50%; | |
| } | |
| .game-info { | |
| color: white; | |
| padding: 1rem; | |
| width: 200px; | |
| } | |
| .status { | |
| margin-bottom: 1rem; | |
| padding: 1rem; | |
| background: #2c3e50; | |
| border-radius: 5px; | |
| } | |
| .captured { | |
| margin-top: 1rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| } | |
| .piece { | |
| user-select: none; | |
| } | |
| @media (max-width: 800px) { | |
| .game-container { | |
| flex-direction: column; | |
| } | |
| .board { | |
| width: 400px; | |
| height: 400px; | |
| } | |
| .square { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 35px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <div class="board" id="board"></div> | |
| <div class="game-info"> | |
| <div class="status" id="status">White's turn</div> | |
| <div>Captured pieces:</div> | |
| <div class="captured" id="captured"></div> | |
| </div> | |
| </div> | |
| <script> | |
| class ChessGame { | |
| constructor() { | |
| this.board = document.getElementById('board'); | |
| this.status = document.getElementById('status'); | |
| this.captured = document.getElementById('captured'); | |
| this.selectedPiece = null; | |
| this.currentPlayer = 'white'; | |
| this.possibleMoves = []; | |
| this.gameBoard = this.initializeBoard(); | |
| this.createBoard(); | |
| this.capturedPieces = []; | |
| } | |
| initializeBoard() { | |
| return [ | |
| ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'], | |
| ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'], | |
| ['', '', '', '', '', '', '', ''], | |
| ['', '', '', '', '', '', '', ''], | |
| ['', '', '', '', '', '', '', ''], | |
| ['', '', '', '', '', '', '', ''], | |
| ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'], | |
| ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'] | |
| ]; | |
| } | |
| createBoard() { | |
| this.board.innerHTML = ''; | |
| 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'); | |
| const piece = this.gameBoard[row][col]; | |
| if (piece) { | |
| square.innerHTML = `<span class="piece">${piece}</span>`; | |
| } | |
| square.dataset.row = row; | |
| square.dataset.col = col; | |
| square.addEventListener('click', (e) => this.handleSquareClick(e)); | |
| this.board.appendChild(square); | |
| } | |
| } | |
| } | |
| isPieceWhite(piece) { | |
| return '♔♕♖♗♘♙'.includes(piece); | |
| } | |
| handleSquareClick(e) { | |
| const square = e.target.closest('.square'); | |
| const row = parseInt(square.dataset.row); | |
| const col = parseInt(square.dataset.col); | |
| const piece = this.gameBoard[row][col]; | |
| if (this.currentPlayer === 'black') return; // Prevent moves during AI turn | |
| if (this.selectedPiece) { | |
| if (this.possibleMoves.some(move => move.row === row && move.col === col)) { | |
| this.movePiece(row, col); | |
| this.clearHighlights(); | |
| this.selectedPiece = null; | |
| this.possibleMoves = []; | |
| // AI move | |
| setTimeout(() => this.makeAIMove(), 500); | |
| } else { | |
| this.clearHighlights(); | |
| this.selectedPiece = null; | |
| this.possibleMoves = []; | |
| } | |
| } else if (piece && this.isPieceWhite(piece) === (this.currentPlayer === 'white')) { | |
| this.selectedPiece = { row, col, piece }; | |
| this.highlightSquare(row, col); | |
| this.possibleMoves = this.calculatePossibleMoves(row, col, piece); | |
| this.showPossibleMoves(); | |
| } | |
| } | |
| clearHighlights() { | |
| document.querySelectorAll('.square').forEach(square => { | |
| square.classList.remove('highlight', 'possible-move'); | |
| }); | |
| } | |
| highlightSquare(row, col) { | |
| const square = this.getSquare(row, col); | |
| square.classList.add('highlight'); | |
| } | |
| showPossibleMoves() { | |
| this.possibleMoves.forEach(move => { | |
| const square = this.getSquare(move.row, move.col); | |
| square.classList.add('possible-move'); | |
| }); | |
| } | |
| getSquare(row, col) { | |
| return this.board.children[row * 8 + col]; | |
| } | |
| calculatePossibleMoves(row, col, piece) { | |
| const moves = []; | |
| // Pawn moves | |
| if (piece === '♙') { | |
| // Forward move | |
| if (row > 0 && !this.gameBoard[row-1][col]) { | |
| moves.push({row: row-1, col: col}); | |
| // Initial two-square move | |
| if (row === 6 && !this.gameBoard[row-2][col]) { | |
| moves.push({row: row-2, col: col}); | |
| } | |
| } | |
| // Diagonal captures | |
| if (row > 0 && col > 0 && this.gameBoard[row-1][col-1] && !this.isPieceWhite(this.gameBoard[row-1][col-1])) { | |
| moves.push({row: row-1, col: col-1}); | |
| } | |
| if (row > 0 && col < 7 && this.gameBoard[row-1][col+1] && !this.isPieceWhite(this.gameBoard[row-1][col+1])) { | |
| moves.push({row: row-1, col: col+1}); | |
| } | |
| } | |
| // Basic moves for other pieces (simplified) | |
| if ('♖♜'.includes(piece)) { // Rook | |
| moves.push(...this.getRookMoves(row, col)); | |
| } | |
| if ('♗♝'.includes(piece)) { // Bishop | |
| moves.push(...this.getBishopMoves(row, col)); | |
| } | |
| if ('♕♛'.includes(piece)) { // Queen | |
| moves.push(...this.getRookMoves(row, col)); | |
| moves.push(...this.getBishopMoves(row, col)); | |
| } | |
| if ('♘♞'.includes(piece)) { // Knight | |
| const knightMoves = [ | |
| {row: row-2, col: col-1}, {row: row-2, col: col+1}, | |
| {row: row-1, col: col-2}, {row: row-1, col: col+2}, | |
| {row: row+1, col: col-2}, {row: row+1, col: col+2}, | |
| {row: row+2, col: col-1}, {row: row+2, col: col+1} | |
| ]; | |
| moves.push(...knightMoves.filter(move => | |
| move.row >= 0 && move.row < 8 && move.col >= 0 && move.col < 8 && | |
| (!this.gameBoard[move.row][move.col] || | |
| this.isPieceWhite(this.gameBoard[move.row][move.col]) !== this.isPieceWhite(piece)) | |
| )); | |
| } | |
| if ('♔♚'.includes(piece)) { // King | |
| 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 (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8 && | |
| (!this.gameBoard[newRow][newCol] || | |
| this.isPieceWhite(this.gameBoard[newRow][newCol]) !== this.isPieceWhite(piece))) { | |
| moves.push({row: newRow, col: newCol}); | |
| } | |
| } | |
| } | |
| } | |
| return moves; | |
| } | |
| getRookMoves(row, col) { | |
| const moves = []; | |
| const directions = [[0,1], [0,-1], [1,0], [-1,0]]; | |
| for (let [dx, dy] of directions) { | |
| let x = row + dx; | |
| let y = col + dy; | |
| while (x >= 0 && x < 8 && y >= 0 && y < 8) { | |
| if (!this.gameBoard[x][y]) { | |
| moves.push({row: x, col: y}); | |
| } else { | |
| if (this.isPieceWhite(this.gameBoard[x][y]) !== this.isPieceWhite(this.gameBoard[row][col])) { | |
| moves.push({row: x, col: y}); | |
| } | |
| break; | |
| } | |
| x += dx; | |
| y += dy; | |
| } | |
| } | |
| return moves; | |
| } | |
| getBishopMoves(row, col) { | |
| const moves = []; | |
| const directions = [[1,1], [1,-1], [-1,1], [-1,-1]]; | |
| for (let [dx, dy] of directions) { | |
| let x = row + dx; | |
| let y = col + dy; | |
| while (x >= 0 && x < 8 && y >= 0 && y < 8) { | |
| if (!this.gameBoard[x][y]) { | |
| moves.push({row: x, col: y}); | |
| } else { | |
| if (this.isPieceWhite(this.gameBoard[x][y]) !== this.isPieceWhite(this.gameBoard[row][col])) { | |
| moves.push({row: x, col: y}); | |
| } | |
| break; | |
| } | |
| x += dx; | |
| y += dy; | |
| } | |
| } | |
| return moves; | |
| } | |
| movePiece(toRow, toCol) { | |
| const fromRow = this.selectedPiece.row; | |
| const fromCol = this.selectedPiece.col; | |
| // Capture logic | |
| if (this.gameBoard[toRow][toCol]) { | |
| this.capturedPieces.push(this.gameBoard[toRow][toCol]); | |
| this.updateCapturedPieces(); | |
| } | |
| this.gameBoard[toRow][toCol] = this.gameBoard[fromRow][fromCol]; | |
| this.gameBoard[fromRow][fromCol] = ''; | |
| this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white'; | |
| this.status.textContent = `${this.currentPlayer.charAt(0).toUpperCase() + this.currentPlayer.slice(1)}'s turn`; | |
| this.createBoard(); | |
| } | |
| updateCapturedPieces() { | |
| this.captured.innerHTML = this.capturedPieces.map(piece => | |
| `<span class="piece">${piece}</span>` | |
| ).join(''); | |
| } | |
| makeAIMove() { | |
| // Simple AI: randomly select a valid move | |
| let possibleAIMoves = []; | |
| for (let row = 0; row < 8; row++) { | |
| for (let col = 0; col < 8; col++) { | |
| const piece = this.gameBoard[row][col]; | |
| if (piece && !this.isPieceWhite(piece)) { | |
| const moves = this.calculatePossibleMoves(row, col, piece); | |
| moves.forEach(move => { | |
| possibleAIMoves.push({ | |
| from: {row, col}, | |
| to: move | |
| }); | |
| }); | |
| } | |
| } | |
| } | |
| if (possibleAIMoves.length > 0) { | |
| const move = possibleAIMoves[Math.floor(Math.random() * possibleAIMoves.length)]; | |
| this.selectedPiece = { | |
| row: move.from.row, | |
| col: move.from.col, | |
| piece: this.gameBoard[move.from.row][move.from.col] | |
| }; | |
| this.movePiece(move.to.row, move.to.col); | |
| } | |
| } | |
| } | |
| // Start the game | |
| const game = new ChessGame(); | |
| </script> | |
| </body> | |
| </html> |