Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Chess Game</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background: #f0f0f0; | |
| } | |
| #chessboard { | |
| display: grid; | |
| grid-template-columns: repeat(8, 60px); | |
| grid-template-rows: repeat(8, 60px); | |
| border: 2px solid #333; | |
| } | |
| .square { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 40px; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .white { | |
| background-color: #EEEED2; | |
| } | |
| .black { | |
| background-color: #769656; | |
| } | |
| .highlight { | |
| background-color: rgba(255, 255, 0, 0.4) ; | |
| } | |
| .possible-move { | |
| position: relative; | |
| } | |
| .possible-move::before { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| background-color: rgba(0,0,0,0.2); | |
| border-radius: 50%; | |
| } | |
| .piece { | |
| user-select: none; | |
| } | |
| .white-piece { | |
| color: white; | |
| text-shadow: 1px 1px 2px black; | |
| } | |
| .black-piece { | |
| color: black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chessboard"></div> | |
| <script> | |
| let selectedPiece = null; | |
| let currentTurn = 'white'; | |
| const pieces = { | |
| 'white': { | |
| 'king': '♔', | |
| 'queen': '♕', | |
| 'rook': '♖', | |
| 'bishop': '♗', | |
| 'knight': '♘', | |
| 'pawn': '♙' | |
| }, | |
| 'black': { | |
| 'king': '♚', | |
| 'queen': '♛', | |
| 'rook': '♜', | |
| 'bishop': '♝', | |
| 'knight': '♞', | |
| 'pawn': '♟' | |
| } | |
| }; | |
| function createBoard() { | |
| const board = document.getElementById('chessboard'); | |
| 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 ? 'black' : 'white'); | |
| square.dataset.row = row; | |
| square.dataset.col = col; | |
| // Add pieces | |
| if (row < 2 || row > 5) { | |
| const color = row < 2 ? 'black' : 'white'; | |
| let piece; | |
| if (row === 1 || row === 6) { | |
| piece = 'pawn'; | |
| } else { | |
| if (col === 0 || col === 7) piece = 'rook'; | |
| if (col === 1 || col === 6) piece = 'knight'; | |
| if (col === 2 || col === 5) piece = 'bishop'; | |
| if (col === 3) piece = 'queen'; | |
| if (col === 4) piece = 'king'; | |
| } | |
| if (piece) { | |
| square.innerHTML = pieces[color][piece]; | |
| square.dataset.piece = piece; | |
| square.dataset.color = color; | |
| square.classList.add('piece', `${color}-piece`); | |
| } | |
| } | |
| square.addEventListener('click', handleClick); | |
| board.appendChild(square); | |
| } | |
| } | |
| } | |
| function clearHighlights() { | |
| document.querySelectorAll('.square').forEach(square => { | |
| square.classList.remove('highlight', 'possible-move'); | |
| }); | |
| } | |
| function showPossibleMoves(square) { | |
| const piece = square.dataset.piece; | |
| const row = parseInt(square.dataset.row); | |
| const col = parseInt(square.dataset.col); | |
| const color = square.dataset.color; | |
| if (piece === 'pawn') { | |
| const direction = color === 'white' ? -1 : 1; | |
| const startRow = color === 'white' ? 6 : 1; | |
| // Forward moves | |
| let nextRow = row + direction; | |
| if (nextRow >= 0 && nextRow < 8) { | |
| const forwardSquare = document.querySelector(`[data-row="${nextRow}"][data-col="${col}"]`); | |
| if (!forwardSquare.dataset.piece) { | |
| forwardSquare.classList.add('possible-move'); | |
| // Initial two-square move | |
| if (row === startRow) { | |
| const twoAheadSquare = document.querySelector(`[data-row="${row + 2 * direction}"][data-col="${col}"]`); | |
| if (!twoAheadSquare.dataset.piece) { | |
| twoAheadSquare.classList.add('possible-move'); | |
| } | |
| } | |
| } | |
| } | |
| // Captures | |
| [-1, 1].forEach(offset => { | |
| const captureSquare = document.querySelector(`[data-row="${nextRow}"][data-col="${col + offset}"]`); | |
| if (captureSquare && captureSquare.dataset.piece && captureSquare.dataset.color !== color) { | |
| captureSquare.classList.add('possible-move'); | |
| } | |
| }); | |
| } | |
| } | |
| function handleClick(event) { | |
| const square = event.target; | |
| const piece = square.dataset.piece; | |
| const color = square.dataset.color; | |
| clearHighlights(); | |
| if (selectedPiece) { | |
| if (square.classList.contains('possible-move')) { | |
| // Move piece | |
| square.innerHTML = selectedPiece.innerHTML; | |
| square.dataset.piece = selectedPiece.dataset.piece; | |
| square.dataset.color = selectedPiece.dataset.color; | |
| square.classList.add('piece', `${selectedPiece.dataset.color}-piece`); | |
| selectedPiece.innerHTML = ''; | |
| selectedPiece.removeAttribute('data-piece'); | |
| selectedPiece.removeAttribute('data-color'); | |
| selectedPiece.classList.remove('piece', 'white-piece', 'black-piece'); | |
| currentTurn = currentTurn === 'white' ? 'black' : 'white'; | |
| } | |
| selectedPiece = null; | |
| } else if (piece && color === currentTurn) { | |
| selectedPiece = square; | |
| square.classList.add('highlight'); | |
| showPossibleMoves(square); | |
| } | |
| } | |
| createBoard(); | |
| </script> | |
| </body> | |
| </html> |