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

[col] = initialBoard[selectedRow][selectedCol];
initialBoard[selectedRow][selectedCol] = ”;
renderBoard();
selectedPiece = null;
} else {
if (initialBoard[col]) {
selectedPiece = ;
}
}
}

renderBoard();