chess.html

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; } #chessboard { display: grid; grid-template-columns: repeat(8, 60px); grid-template-rows: repeat(8, 60px); gap: 0; width: 480px; height: 480px; border: 2px solid #333; } .square { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .square:nth-child(even) { background-color: #f0d9b5; } .square:nth-child(odd) { background-color: #b58863; } .piece { font-size: 32px; cursor: pointer; }

Chess Game

const board = document.getElementById('chessboard'); // Define initial chess pieces const initialBoard = [ ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'], ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'], ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'] ]; // Function to render the chessboard function renderBoard() { board.innerHTML = ''; for (let row = 0; row < 8; row++) { for (let col = 0; col handleSquareClick(row, col)); board.appendChild(square); } } } let selectedPiece = null; function handleSquareClick(row, col) { if (selectedPiece) { const [selectedRow, selectedCol] = selectedPiece; // Move piece logic here (just for now, moving it to the clicked square) initialBoard[row][col] = initialBoard[selectedRow][selectedCol]; initialBoard[selectedRow][selectedCol] = ''; renderBoard(); selectedPiece = null; } else { if (initialBoard[row][col]) { selectedPiece = [row, col]; } } } renderBoard();