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: #2d3436; | |
| --highlight: #f1c40f; | |
| --move-highlight: rgba(46, 204, 113, 0.4); | |
| --check-highlight: rgba(231, 76, 60, 0.4); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; | |
| background: var(--primary-dark); | |
| color: #ecf0f1; | |
| min-height: 100vh; | |
| display: flex; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: var(--board-size) 300px; | |
| gap: 2rem; | |
| margin: auto; | |
| padding: 2rem; | |
| background: var(--primary-light); | |
| border-radius: 1rem; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .board-container { | |
| width: var(--board-size); | |
| height: var(--board-size); | |
| position: relative; | |
| } | |
| .chessboard { | |
| width: 100%; | |
| height: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| grid-template-rows: repeat(8, 1fr); | |
| border: 4px solid #2c3e50; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .square { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: calc(var(--square-size) * 0.7); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| position: relative; | |
| user-select: none; | |
| } | |
| .white { background: #e0c48f; } | |
| .black { background: #b4835a; } | |
| .square.selected { | |
| background: var(--highlight) ; | |
| } | |
| .square.valid-move::after { | |
| content: '•'; | |
| position: absolute; | |
| color: rgba(0,0,0,0.3); | |
| font-size: 2em; | |
| } | |
| .square.attack-move::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border: 2px solid rgba(231, 76, 60, 0.6); | |
| border-radius: 50%; | |
| } | |
| .piece { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: calc(var(--square-size) * 0.7); | |
| cursor: grab; | |
| } | |
| .piece.white { color: #fff; } | |
| .piece.black { color: #000; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="board-container"> | |
| <div class="chessboard" id="board"></div> | |
| </div> | |
| </div> | |
| <script> | |
| class ChessGame { | |
| constructor() { | |
| this.board = this.createInitialBoard(); | |
| this.currentPlayer = 'white'; | |
| this.selectedPiece = null; | |
| this.initializeBoard(); | |
| } | |
| createInitialBoard() { | |
| return [ | |
| ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'], | |
| ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'], | |
| [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], | |
| ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'], | |
| ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'] | |
| ]; | |
| } | |
| initializeBoard() { | |
| const boardElement = document.getElementById('board'); | |
| boardElement.innerHTML = ''; | |
| for (let row = 0; row < 8; row++) { | |
| for (let col = 0; col < 8; col++) { | |
| const square = document.createElement('div'); | |
| square.className = `square ${(row + col) % 2 === 0 ? 'white' : 'black'}`; | |
| square.dataset.row = row; | |
| square.dataset.col = col; | |
| square.onclick = (e) => this.handleSquareClick(e); | |
| const piece = this.board[row][col]; | |
| if (piece) { | |
| const pieceElement = document.createElement('div'); | |
| pieceElement.className = `piece ${piece === piece.toUpperCase() ? 'white' : 'black'}`; | |
| pieceElement.textContent = this.getPieceSymbol(piece); | |
| square.appendChild(pieceElement); | |
| } | |
| boardElement.appendChild(square); | |
| } | |
| } | |
| } | |
| getPieceSymbol(piece) { | |
| const symbols = { | |
| 'P': '♙', 'p': '♟', | |
| 'R': '♖', 'r': '♜', | |
| 'N': '♘', 'n': '♞', | |
| 'B': '♗', 'b': '♝', | |
| 'Q': '♕', 'q': '♛', | |
| 'K': '♔', 'k': '♚' | |
| }; | |
| return symbols[piece] || ''; | |
| } | |
| handleSquareClick(event) { | |
| const square = event.target.closest('.square'); | |
| const row = parseInt(square.dataset.row); | |
| const col = parseInt(square.dataset.col); | |
| const piece = this.board[row][col]; | |
| if (this.selectedPiece) { | |
| this.tryMove(row, col); | |
| } else if (piece && this.isCurrentPlayerPiece(piece)) { | |
| this.selectPiece(row, col); | |
| } | |
| } | |
| isCurrentPlayerPiece(piece) { | |
| return (this.currentPlayer === 'white' && piece === piece.toUpperCase()) || | |
| (this.currentPlayer === 'black' && piece === piece.toLowerCase()); | |
| } | |
| selectPiece(row, col) { | |
| this.selectedPiece = { row, col }; | |
| document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected')); | |
| document.querySelector(`[data-row='${row}'][data-col='${col}']`).classList.add('selected'); | |
| } | |
| tryMove(toRow, toCol) { | |
| const { row, col } = this.selectedPiece; | |
| this.board[toRow][toCol] = this.board[row][col]; | |
| this.board[row][col] = null; | |
| this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white'; | |
| this.selectedPiece = null; | |
| this.initializeBoard(); | |
| } | |
| } | |
| new ChessGame(); | |
| </script> | |
| </body> | |
| </html> | |