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; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .white { | |
| background-color: #EEEED2; | |
| } | |
| .black { | |
| background-color: #769656; | |
| } | |
| .piece { | |
| font-size: 45px; | |
| user-select: none; | |
| } | |
| .highlight { | |
| background-color: yellow ; | |
| } | |
| .possible-move { | |
| background-color: rgba(144, 238, 144, 0.5) ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chessboard"></div> | |
| <script> | |
| const pieces = { | |
| 'white': { | |
| 'king': '♔', | |
| 'queen': '♕', | |
| 'rook': '♖', | |
| 'bishop': '♗', | |
| 'knight': '♘', | |
| 'pawn': '♙' | |
| }, | |
| 'black': { | |
| 'king': '♚', | |
| 'queen': '♛', | |
| 'rook': '♜', | |
| 'bishop': '♝', | |
| 'knight': '♞', | |
| 'pawn': '♟' | |
| } | |
| }; | |
| let selectedPiece = null; | |
| let currentTurn = 'white'; | |
| 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', (row + col) % 2 === 0 ? 'white' : 'black'); | |
| square.dataset.row = row; | |
| square.dataset.col = col; | |
| if (row === 1 || row === 6) { | |
| const color = row === 1 ? 'black' : 'white'; | |
| addPiece(square, color, 'pawn'); | |
| } else if (row === 0 || row === 7) { | |
| const color = row === 0 ? 'black' : 'white'; | |
| const pieceOrder = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook']; | |
| addPiece(square, color, pieceOrder[col]); | |
| } | |
| square.addEventListener('click', handleClick); | |
| board.appendChild(square); | |
| } | |
| } | |
| } | |
| function addPiece(square, color, pieceType) { | |
| const piece = document.createElement('span'); | |
| piece.classList.add('piece'); | |
| piece.dataset.piece = pieceType; | |
| piece.dataset.color = color; | |
| piece.textContent = pieces[color][pieceType]; | |
| square.appendChild(piece); | |
| } | |
| function handleClick(event) { | |
| const square = event.currentTarget; | |
| const piece = square.querySelector('.piece'); | |
| clearHighlights(); | |
| if (selectedPiece) { | |
| if (square.classList.contains('possible-move')) { | |
| movePiece(selectedPiece, square); | |
| selectedPiece = null; | |
| currentTurn = currentTurn === 'white' ? 'black' : 'white'; | |
| } else { | |
| selectedPiece = null; | |
| } | |
| } else if (piece && piece.dataset.color === currentTurn) { | |
| selectedPiece = square; | |
| showPossibleMoves(square); | |
| } | |
| } | |
| function movePiece(fromSquare, toSquare) { | |
| const piece = fromSquare.querySelector('.piece'); | |
| toSquare.innerHTML = ''; | |
| toSquare.appendChild(piece); | |
| } | |
| function showPossibleMoves(square) { | |
| const piece = square.querySelector('.piece'); | |
| const pieceType = piece.dataset.piece; | |
| const color = piece.dataset.color; | |
| const row = parseInt(square.dataset.row); | |
| const col = parseInt(square.dataset.col); | |
| switch (pieceType) { | |
| case 'pawn': | |
| showPawnMoves(row, col, color); | |
| break; | |
| case 'knight': | |
| showKnightMoves(row, col, color); | |
| break; | |
| case 'bishop': | |
| showBishopMoves(row, col, color); | |
| break; | |
| case 'rook': | |
| showRookMoves(row, col, color); | |
| break; | |
| case 'queen': | |
| showQueenMoves(row, col, color); | |
| break; | |
| case 'king': | |
| showKingMoves(row, col, color); | |
| break; | |
| } | |
| } | |
| function showPawnMoves(row, col, color) { | |
| const direction = color === 'white' ? -1 : 1; | |
| const startRow = color === 'white' ? 6 : 1; | |
| // Forward move | |
| let nextRow = row + direction; | |
| if (isEmpty(nextRow, col)) { | |
| highlightSquare(nextRow, col); | |
| if (row === startRow && isEmpty(nextRow + direction, col)) { | |
| highlightSquare(nextRow + direction, col); | |
| } | |
| } | |
| // Captures | |
| [-1, 1].forEach(offset => { | |
| const captureRow = row + direction; | |
| const captureCol = col + offset; | |
| if (isOpponent(captureRow, captureCol, color)) { | |
| highlightSquare(captureRow, captureCol); | |
| } | |
| }); | |
| } | |
| function showKnightMoves(row, col, color) { | |
| const moves = [[-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1]]; | |
| moves.forEach(([dr, dc]) => { | |
| const r = row + dr; | |
| const c = col + dc; | |
| if (isValidMove(r, c, color)) { | |
| highlightSquare(r, c); | |
| } | |
| }); | |
| } | |
| function showBishopMoves(row, col, color) { | |
| showLineMoves(row, col, color, [[-1, -1], [-1, 1], [1, -1], [1, 1]]); | |
| } | |
| function showRookMoves(row, col, color) { | |
| showLineMoves(row, col, color, [[-1, 0], [1, 0], [0, -1], [0, 1]]); | |
| } | |
| function showQueenMoves(row, col, color) { | |
| showBishopMoves(row, col, color); | |
| showRookMoves(row, col, color); | |
| } | |
| function showKingMoves(row, col, color) { | |
| const moves = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]]; | |
| moves.forEach(([dr, dc]) => { | |
| const r = row + dr; | |
| const c = col + dc; | |
| if (isValidMove(r, c, color)) { | |
| highlightSquare(r, c); | |
| } | |
| }); | |
| } | |
| function showLineMoves(row, col, color, directions) { | |
| directions.forEach(([dr, dc]) => { | |
| let r = row + dr; | |
| let c = col + dc; | |
| while (isValidMove(r, c, color)) { | |
| highlightSquare(r, c); | |
| if (isOpponent(r, c, color)) break; | |
| r += dr; | |
| c += dc; | |
| } | |
| }); | |
| } | |
| function isValidMove(row, col, color) { | |
| return isOnBoard(row, col) && !isAlly(row, col, color); | |
| } | |
| function isEmpty(row, col) { | |
| return isOnBoard(row, col) && !document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`); | |
| } | |
| function isOpponent(row, col, color) { | |
| const piece = document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`); | |
| return piece && piece.dataset.color !== color; | |
| } | |
| function isAlly(row, col, color) { | |
| const piece = document.querySelector(`[data-row="${row}"][data-col="${col}"] .piece`); | |
| return piece && piece.dataset.color === color; | |
| } | |
| function isOnBoard(row, col) { | |
| return row >= 0 && row < 8 && col >= 0 && col < 8; | |
| } | |
| function highlightSquare(row, col) { | |
| const square = document.querySelector(`[data-row="${row}"][data-col="${col}"]`); | |
| square.classList.add('possible-move'); | |
| } | |
| function clearHighlights() { | |
| document.querySelectorAll('.square').forEach(square => { | |
| square.classList.remove('highlight', 'possible-move'); | |
| }); | |
| } | |
| createBoard(); | |
| </script> | |
| </body> | |
| </html> |