Live Code Editor

Try it yourself..

code for chess game in html|css|js

Developing a modern, multiplayer chess game with all of the rules, instructions, and hints is a challenging but rewarding project. Below is a simplified version of a multiplayer chess game using HTML, CSS, and JavaScript. This implementation will include a modern design, basic chess rules, and hints for legal moves.

HTML

CSS

body {
    font-family: 'Arial', sans-serif;
    background-color: #1e1e1e;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.chess-container {
    text-align: center;
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

h1 {
    margin-bottom: 20px;
    font-size: 2.5em;
    color: #ffcc00;
}

.chessboard {
    display: grid;
    grid-template-columns: repeat(8, 60px);
    grid-template-rows: repeat(8, 60px);
    gap: 2px;
    margin-bottom: 20px;
}

.chessboard .square {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chessboard .square.light {
    background-color: #f0d9b5;
}

.chessboard .square.dark {
    background-color: #b58863;
}

.chessboard .square.highlight {
    background-color: #ffcc00 !important;
}

.chessboard .square.selected {
    background-color: #aaffaa !important;
}

.info-panel {
    margin-top: 20px;
}

.turn-indicator {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.hint {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 10px;
}

.start-button, .restart-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: none;
    background-color: #ffcc00;
    color: #1e1e1e;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin: 5px;
}

.start-button:hover, .restart-button:hover {
    background-color: #e6b800;
}

JavaScript

const chessboard = document.querySelector('.chessboard');
const turnIndicator = document.getElementById('turn');
const startButton = document.querySelector('.start-button');
const restartButton = document.querySelector('.restart-button');

let board = [];
let selectedPiece = null;
let currentPlayer = 'white';
let gameStarted = false;

// Chess piece Unicode characters
const pieces = {
    white: {
        king: '♔',
        queen: '♕',
        rook: '♖',
        bishop: '♗',
        knight: '♘',
        pawn: '♙'
    },
    black: {
        king: '♚',
        queen: '♛',
        rook: '♜',
        bishop: '♝',
        knight: '♞',
        pawn: '♟'
    }
};

// Initialize the chessboard
function initializeBoard() {
    board = [
        ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
        ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
        ['', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '', ''],
        ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
        ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
    ];
    renderBoard();
}

// Render the chessboard
function renderBoard() {
    chessboard.innerHTML = '';
    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 ? 'light' : 'dark');
            square.dataset.row = row;
            square.dataset.col = col;
            square.textContent = board[row][col];
            if (gameStarted) {
                square.addEventListener('click', () => handleSquareClick(row, col));
            }
            chessboard.appendChild(square);
        }
    }
}

// Handle square click
function handleSquareClick(row, col) {
    const piece = board[row][col];
    if (selectedPiece) {
        movePiece(selectedPiece.row, selectedPiece.col, row, col);
        selectedPiece = null;
        renderBoard();
    } else if (piece && isValidPiece(piece)) {
        selectedPiece = { row, col };
        highlightLegalMoves(row, col);
    }
}

// Check if the piece belongs to the current player
function isValidPiece(piece) {
    if (currentPlayer === 'white') {
        return piece === piece.toUpperCase();
    } else {
        return piece === piece.toLowerCase();
    }
}

// Move a piece
function movePiece(fromRow, fromCol, toRow, toCol) {
    const piece = board[fromRow][fromCol];
    board[toRow][toCol] = piece;
    board[fromRow][fromCol] = '';
    currentPlayer = currentPlayer === 'white' ? 'black' : 'white';
    turnIndicator.textContent = currentPlayer === 'white' ? 'White' : 'Black';
}

// Highlight legal moves (simplified for demonstration)
function highlightLegalMoves(row, col) {
    const piece = board[row][col];
    const squares = document.querySelectorAll('.square');
    squares.forEach(square => square.classList.remove('highlight'));

if (piece.toLowerCase() === '♟' || piece.toLowerCase() === '♙') { // Pawn
        const direction = piece === '♙' ? -1 : 1;
        const newRow = row + direction;
        if (newRow >= 0 && newRow < 8 && board[newRow][col] === '') {
            const square = document.querySelector(`.square[data-row="${newRow}"][data-col="${col}"]`);
            square.classList.add('highlight');
        }
    }
    // Add more rules for other pieces (Rook, Knight, Bishop, Queen, King)
}

// Start the game
startButton.addEventListener('click', () => {
    gameStarted = true;
    initializeBoard();
    currentPlayer = 'white';
    turnIndicator.textContent = 'White';
    startButton.disabled = true;
});

// Restart the game
restartButton.addEventListener('click', () => {
    gameStarted = true;
    initializeBoard();
    currentPlayer = 'white';
    turnIndicator.textContent = 'White';
    startButton.disabled = false;
});

// Initialize the board on page load (without starting the game)
initializeBoard();

Live Code Editor

code for chess game in html|css|js

HTML

CSS

JavaScript

Output