Scribd
Upload
9 views4 pages

Chess Game

Uploaded by

hspandit071
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views4 pages

Chess Game

Uploaded by

hspandit071
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Game</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}

.chess-board {
display: grid;
grid-template-columns: repeat(8, 80px);
grid-template-rows: repeat(8, 80px);
border: 2px solid black;
}

.cells {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
cursor: pointer;
}

.black {
background-color: black;
color: white;
}

.white {
background-color: white;
}

.selected {
border: 2px solid red;
}
</style>
</head>

<body>
<div class="chess-board" id="chess-board"></div>

<script>
const pieces = {
'black': {
'king': '♚',
'queen': '♛',
'rook': '♜',
'bishop': '♝',
'knight': '♞',
'pawn': '♟︎'
},
'white': {
'king': '♔',
'queen': '♕',
'rook': '♖',
'bishop': '♗',
'knight': '♘',
'pawn': '♙'
}
};

// Initialize the chessboard state as an 8x8 array


const boardState = [
['black-rook', 'black-knight', 'black-bishop', 'black-queen', 'black-
king', 'black-bishop', 'black-knight', 'black-rook'],
['black-pawn', 'black-pawn', 'black-pawn', 'black-pawn', 'black-pawn',
'black-pawn', 'black-pawn', 'black-pawn'],
[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],
['white-pawn', 'white-pawn', 'white-pawn', 'white-pawn', 'white-pawn',
'white-pawn', 'white-pawn', 'white-pawn'],
['white-rook', 'white-knight', 'white-bishop', 'white-queen', 'white-
king', 'white-bishop', 'white-knight', 'white-rook']
];

// Track the current player ('white' starts)


let currentPlayer = 'white';

// Track the selected square


let selectedSquare = null;

// Get the chessboard element


const chessboard = document.getElementById('chess-board');

// Function to get the piece symbol based on its identifier


function getPieceSymbol(piece) {
if (!piece) return '';
const [color, type] = piece.split('-');
return pieces[color][type] || '';
}

function drawBoard() {
chessboard.innerHTML = ''; // Clear the board before redrawing
boardState.forEach((row, x) => {
row.forEach((piece, y) => {
const square = document.createElement('div');
square.classList.add('cells', (x + y) % 2 === 0 ? 'white' :
'black');
square.dataset.pos = `${x},${y}`;
square.textContent = getPieceSymbol(piece);
chessboard.appendChild(square);
});
});
}

function clearSelection() {
if (selectedSquare) {
selectedSquare.classList.remove('selected');
selectedSquare = null;
}
}

// Function to handle square clicks


function handleSquareClick(event) {
const targetSquare = event.target.closest('.cells');
if (!targetSquare) return;

const pos = targetSquare.dataset.pos.split(',').map(Number);


const x = pos[0];
const y = pos[1];
const clickedPiece = boardState[x][y];

if (selectedSquare) {
// If a square is already selected, attempt to move the piece
const selectedPos =
selectedSquare.dataset.pos.split(',').map(Number);
const selectedX = selectedPos[0];
const selectedY = selectedPos[1];
const selectedPiece = boardState[selectedX][selectedY];

// Ensure the selected piece belongs to the current player


if (selectedPiece && selectedPiece.startsWith(currentPlayer)) {
// Move the piece
boardState[x][y] = selectedPiece;
boardState[selectedX][selectedY] = null;

// Clear the selection and redraw the board


clearSelection();
drawBoard();

// Switch the current player


currentPlayer = currentPlayer === 'white' ? 'black' : 'white';
} else {
// If the piece doesn't belong to the current player, do
nothing
clearSelection();
}
} else {
// No square is selected yet
if (clickedPiece && clickedPiece.startsWith(currentPlayer)) {
// Select the square if it contains the current player's piece
selectedSquare = targetSquare;
selectedSquare.classList.add('selected');
}
}
}

chessboard.addEventListener('click', handleSquareClick);

drawBoard(); // Initial draw of the board


</script>
</body>

</html>

You might also like