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 { | |
| --board-size: min(80vh, 600px); | |
| --square-size: calc(var(--board-size) / 8); | |
| --primary-dark: #2c3e50; | |
| --primary-light: #34495e; | |
| --highlight: #f1c40f; | |
| --move-highlight: rgba(46, 204, 113, 0.4); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: var(--primary-dark); | |
| color: #ecf0f1; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .board-container { | |
| width: var(--board-size); | |
| height: var(--board-size); | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| grid-template-rows: repeat(8, 1fr); | |
| } | |
| .square { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: calc(var(--square-size) * 0.7); | |
| user-select: none; | |
| position: relative; | |
| } | |
| .white { background: #f0d9b5; } | |
| .black { background: #b58863; } | |
| .valid-move::after { | |
| content: '●'; | |
| font-size: 1.5rem; | |
| color: var(--move-highlight); | |
| position: absolute; | |
| } | |
| .selected { background-color: var(--highlight); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="board-container" id="board"></div> | |
| <script> | |
| class ChessGame { | |
| constructor() { | |
| this.board = this.createInitialBoard(); | |
| this.currentPlayer = 'white'; | |
| this.selectedPiece = null; | |
| this.validMoves = []; | |
| this.renderBoard(); | |
| } | |
| createInitialBoard() { | |
| return [ | |
| ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'], | |
| ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'], | |
| [null, null, null, null, null, null, null, null], | |
| [null, null, null, null, null, null, null, null], | |
| [null, null, null, null, null, null, null, null], | |
| [null, null, null, null, null, null, null, null], | |
| ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'], | |
| ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'] | |
| ]; | |
| } | |
| renderBoard() { | |
| const boardContainer = document.getElementById('board'); | |
| boardContainer.innerHTML = ''; | |
| for (let row = 0; row < 8; row++) { | |
| for (let col = 0; col < 8; col++) { | |
| const square = document.createElement('div'); | |
| square.classList.add('square', (row + col) % 2 === 0 ? 'white' : 'black'); | |
| square.dataset.row = row; | |
| square.dataset.col = col; | |
| square.addEventListener('click', () => this.handleSquareClick(row, col)); | |
| const piece = this.board[row][col]; | |
| if (piece) { | |
| const pieceElem = document.createElement('div'); | |
| pieceElem.textContent = piece; | |
| square.appendChild(pieceElem); | |
| } | |
| if (this.isValidMove(row, col)) { | |
| square.classList.add('valid-move'); | |
| } | |
| if (this.selectedPiece && this.selectedPiece.row === row && this.selectedPiece.col === col) { | |
| square.classList.add('selected'); | |
| } | |
| boardContainer.appendChild(square); | |
| } | |
| } | |
| } | |
| handleSquareClick(row, col) { | |
| const piece = this.board[row][col]; | |
| if (this.selectedPiece) { | |
| if (this.isValidMove(row, col)) { | |
| this.makeMove(this.selectedPiece.row, this.selectedPiece.col, row, col); | |
| this.selectedPiece = null; | |
| this.validMoves = []; | |
| } else { | |
| this.selectedPiece = null; | |
| this.validMoves = []; | |
| } | |
| } else if (piece && this.isCurrentPlayerPiece(piece)) { | |
| this.selectedPiece = { row, col }; | |
| this.validMoves = this.getValidMoves(row, col); | |
| } | |
| this.renderBoard(); | |
| } | |
| isCurrentPlayerPiece(piece) { | |
| return this.currentPlayer === 'white' ? '♙♖♘♗♕♔'.includes(piece) : '♟♜♞♝♛♚'.includes(piece); | |
| } | |
| getValidMoves(row, col) { | |
| const piece = this.board[row][col]; | |
| const moves = []; | |
| const directions = { | |
| '♖': [[-1, 0], [1, 0], [0, -1], [0, 1]], | |
| '♜': [[-1, 0], [1, 0], [0, -1], [0, 1]], | |
| '♗': [[-1, -1], [-1, 1], [1, -1], [1, 1]], | |
| '♝': [[-1, -1], [-1, 1], [1, -1], [1, 1]], | |
| '♕': [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]], | |
| '♛': [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]], | |
| '♘': [ | |
| [-2, -1], [-2, 1], [2, -1], [2, 1], | |
| [-1, -2], [-1, 2], [1, -2], [1, 2] | |
| ], | |
| '♞': [ | |
| [-2, -1], [-2, 1], [2, -1], [2, 1], | |
| [-1, -2], [-1, 2], [1, -2], [1, 2] | |
| ] | |
| }[piece] || []; | |
| for (const [dx, dy] of directions) { | |
| let r = row + dx, c = col + dy; | |
| while (r >= 0 && r < 8 && c >= 0 && c < 8 && !this.board[r][c]) { | |
| moves.push([r, c]); | |
| r += dx; c += dy; | |
| if ('♖♜♗♝♕♛'.includes(piece)) break; | |
| } | |
| } | |
| return moves; | |
| } | |
| isValidMove(row, col) { | |
| return this.validMoves.some(move => move[0] === row && move[1] === col); | |
| } | |
| makeMove(fromRow, fromCol, toRow, toCol) { | |
| this.board[toRow][toCol] = this.board[fromRow][fromCol]; | |
| this.board[fromRow][fromCol] = null; | |
| this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white'; | |
| } | |
| } | |
| const game = new ChessGame(); | |
| </script> | |
| </body> | |
| </html> | |