Chess Game (Create on AI)

Ranajit Game Master March 24, 2026

গেমের সোর্স কোড:

<!DOCTYPE html>
  
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>পারফেক্ট চেস গেম</title>
    <style>
        body {
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            height: 100vh; margin: 0; font-family: Arial, sans-serif;
            background-color: #f0f0f0; 
        }
        .info-panel { font-size: 18px; font-weight: bold; margin-bottom: 5px; text-align: center; width: 96vw; max-width: 480px;}
        .captured-area {
            width: 96vw; max-width: 480px; min-height: 40px; display: flex; flex-wrap: wrap;
            align-items: center; font-size: 25px; padding: 5px; box-sizing: border-box;
            border: 1px dashed #888; margin: 5px 0; color: #333;
        }
        #chessboard {
            display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
            width: 96vw; max-width: 480px; height: 96vw; max-height: 480px; border: 2px solid #333;
            position: relative;
        }
        .square {
            display: flex; justify-content: center; align-items: center; font-size: 8vw;
            user-select: none; cursor: pointer;
        }
        @media (min-width: 480px) {
            .square { font-size: 40px; }
            .captured-area { font-size: 30px; min-height: 50px; }
        }
        .light { background-color: #f0d9b5; }
        .dark { background-color: #b58863; }
        .selected { background-color: #a9ea6e !important; }
        .invalid { background-color: #ff6b6b !important; }
        .potential-move { background-color: #a9ea6ea0 !important; } 
        #replay-btn {
            display: none; margin-top: 15px; padding: 10px 20px; font-size: 18px;
            background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;
        }
        #replay-btn:hover { background-color: #45a049; }

        #promotion-modal {
            display: none; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.95);
            border: 2px solid #333; border-radius: 5px;
            padding: 10px; z-index: 100;
            grid-template-columns: repeat(2, 1fr); gap: 10px;
        }
        .promotion-choice {
            font-size: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center;
            width: 50px; height: 50px; border: 1px solid #ccc;
        }
        .promotion-choice:hover { background-color: #eee; }
    </style>
</head>
<body>

<div id="top-captured" class="captured-area"></div>
<div class="info-panel" id="turn-indicator">আপনার (সাদার) চাল</div>
<div id="chessboard">
    <div id="promotion-modal"></div>
</div>
<div id="bottom-captured" class="captured-area"></div>
<button id="replay-btn" onclick="initGame()">আবার খেলুন (Replay)</button>

<script>
    const boardElement = document.getElementById('chessboard');
    const topCaptured = document.getElementById('top-captured');
    const bottomCaptured = document.getElementById('bottom-captured');
    const turnIndicator = document.getElementById('turn-indicator');
    const replayBtn = document.getElementById('replay-btn');
    const promotionModal = document.getElementById('promotion-modal');

    const whitePieces = ['♙', '♖', '♘', '♗', '♕', '♔'];
    const blackPieces = ['♟', '♜', '♞', '♝', '♛', '♚'];
    const promotionWhite = ['♕', '♖', '♗', '♘']; 
    const promotionBlack = ['♛', '♜', '♝', '♞'];

    let boardState = [];
    let isWhiteTurn = true;
    let gameOver = false;
    let promotionActive = false;
    let selectedSquare = null;
    let selectedRow = null;
    let selectedCol = null;

    function initGame() {
        boardState = [
            ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
            ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
            ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
        ];
        isWhiteTurn = true;
        gameOver = false;
        promotionActive = false;
        topCaptured.innerHTML = '';
        bottomCaptured.innerHTML = '';
        replayBtn.style.display = 'none';
        promotionModal.style.display = 'none';
        updateTurnIndicator("আপনার (সাদার) চাল", "#000");
        clearSelection();
        createBoard();
    }

    function updateTurnIndicator(text, color) {
        turnIndicator.textContent = text;
        turnIndicator.style.color = color;
    }

    function createBoard() {
        boardElement.innerHTML = '';
        boardElement.appendChild(promotionModal); 
        for (let row = 0; row < 8; row++) {
            for (let col = 0; col < 8; col++) {
                const square = document.createElement('div');
                square.classList.add('square');
                square.classList.add((row + col) % 2 === 0 ? 'light' : 'dark');
                square.dataset.row = row;
                square.dataset.col = col;
                
                if (boardState[row][col]) {
                    square.textContent = boardState[row][col];
                }

                square.addEventListener('click', () => {
                    if (isWhiteTurn && !gameOver && !promotionActive) handleSquareClick(square, row, col);
                });
                boardElement.appendChild(square);
            }
        }
    }

    function handleSquareClick(square, row, col) {
        const piece = boardState[row][col];

        if (selectedSquare) {
            if (row === selectedRow && col === selectedCol) {
                clearSelection();
                return;
            }
            if (piece && whitePieces.includes(piece)) {
                clearSelection();
                selectPiece(square, row, col);
                return;
            }
            if (isBasicValidMove(selectedRow, selectedCol, row, col) && isSafeMove(selectedRow, selectedCol, row, col, true)) {
                executeMove(selectedRow, selectedCol, row, col);
            } else {
                square.classList.add('invalid');
                setTimeout(() => square.classList.remove('invalid'), 300);
            }
        } else {
            if (piece && whitePieces.includes(piece)) {
                selectPiece(square, row, col);
            }
        }
    }

    function selectPiece(square, row, col) {
        selectedSquare = square;
        selectedRow = row;
        selectedCol = col;
        square.classList.add('selected');
        showPotentialMoves(row, col);
    }

    function clearSelection() {
        if (selectedSquare) selectedSquare.classList.remove('selected');
        selectedSquare = null;
        selectedRow = null;
        selectedCol = null;
        const highlighted = document.querySelectorAll('.potential-move');
        highlighted.forEach(sq => sq.classList.remove('potential-move'));
    }

    function showPotentialMoves(sr, sc) {
        for (let r = 0; r < 8; r++) {
            for (let c = 0; c < 8; c++) {
                if (isBasicValidMove(sr, sc, r, c) && isSafeMove(sr, sc, r, c, isWhiteTurn)) {
                    const square = boardElement.querySelector(`.square[data-row="${r}"][data-col="${c}"]`);
                    if (square) square.classList.add('potential-move');
                }
            }
        }
    }

    function executeMove(fromRow, fromCol, toRow, toCol) {
        const piece = boardState[fromRow][fromCol];
        const targetPiece = boardState[toRow][toCol];

        let promotionAvailable = false;
        if ((piece === '♙' && toRow === 0) || (piece === '♟' && toRow === 7)) {
            promotionAvailable = true;
        }

        if (promotionAvailable) {
            promotionActive = true;
            clearSelection(); 

            const onPromotionComplete = (promotedPiece) => {
                if (targetPiece) {
                    if (whitePieces.includes(targetPiece)) topCaptured.innerHTML += `<span>${targetPiece}</span>`;
                    else bottomCaptured.innerHTML += `<span>${targetPiece}</span>`;
                }
                boardState[toRow][toCol] = promotedPiece;
                boardState[fromRow][fromCol] = '';
                
                promotionActive = false; 
                createBoard(); 
                checkGameStates(!isWhiteTurn);
            };

            showPromotionModal(toRow, toCol, piece === '♙', onPromotionComplete);
            return; 
        }

        if (targetPiece) {
            if (whitePieces.includes(targetPiece)) topCaptured.innerHTML += `<span>${targetPiece}</span>`;
            else bottomCaptured.innerHTML += `<span>${targetPiece}</span>`;
        }

        boardState[toRow][toCol] = boardState[fromRow][fromCol];
        boardState[fromRow][fromCol] = '';

        clearSelection();
        createBoard();
        checkGameStates(!isWhiteTurn);
    }

    function checkInsufficientMaterial() {
        let pieces = [];
        for (let r = 0; r < 8; r++) {
            for (let c = 0; c < 8; c++) {
                if (boardState[r][c] !== '') pieces.push(boardState[r][c]);
            }
        }
        
        if (pieces.length === 2) return true;
        
        if (pieces.length === 3) {
            const hasMinorPiece = pieces.some(p => ['♗', '♝', '♘', '♞'].includes(p));
            if (hasMinorPiece) return true;
        }
        
        return false;
    }

    function checkGameStates(nextPlayerWhite) {
        if (checkInsufficientMaterial()) {
            gameOver = true;
            replayBtn.style.display = 'block';
            updateTurnIndicator("গেম ড্র! (অপর্যাপ্ত ঘুঁটি)", "#555");
            return;
        }

        if (!hasAnyLegalMove(nextPlayerWhite)) {
            gameOver = true;
            replayBtn.style.display = 'block';
            if (isKingInCheck(nextPlayerWhite)) {
                updateTurnIndicator(isWhiteTurn ? "চেকমেট! আপনি জিতেছেন!" : "চেকমেট! কম্পিউটার জিতেছে!", "#d9534f");
            } else {
                updateTurnIndicator("স্টেলমেট! গেম ড্র।", "#555");
            }
            return;
        }

        isWhiteTurn = !isWhiteTurn;
        let checkStatus = isKingInCheck(isWhiteTurn) ? "চেক! " : "";

        if (!isWhiteTurn) {
            updateTurnIndicator(checkStatus + "কম্পিউটার ভাবছে...", "#d9534f");
            setTimeout(makeSmartBlackMove, 600);
        } else {
            updateTurnIndicator(checkStatus + "আপনার (সাদার) চাল", "#000");
        }
    }

    function showPromotionModal(row, col, isWhite, callback) {
        const choices = isWhite ? promotionWhite : promotionBlack;
        promotionModal.innerHTML = ''; 
        promotionModal.style.gridTemplateColumns = 'repeat(2, 1fr)';
        promotionModal.style.display = 'grid';

        choices.forEach(pieceText => {
            const choice = document.createElement('div');
            choice.classList.add('promotion-choice');
            choice.textContent = pieceText;
            choice.onclick = () => {
                promotionModal.style.display = 'none';
                callback(pieceText); 
            };
            promotionModal.appendChild(choice);
        });
    }

    function makeSmartBlackMove() {
        if (gameOver || promotionActive) return;

        let capturingMoves = [];
        let promotingMoves = []; 
        let normalMoves = [];

        for (let r = 0; r < 8; r++) {
            for (let c = 0; c < 8; c++) {
                if (blackPieces.includes(boardState[r][c])) {
                    for (let tr = 0; tr < 8; tr++) {
                        for (let tc = 0; tc < 8; tc++) {
                            if (isBasicValidMove(r, c, tr, tc) && isSafeMove(r, c, tr, tc, false)) {
                                const piece = boardState[r][c];
                                const isPromoting = (piece === '♟' && tr === 7);
                                
                                const move = { r, c, tr, tc };
                                if (isPromoting) promotingMoves.push(move);
                                else if (boardState[tr][tc] !== '') capturingMoves.push(move);
                                else normalMoves.push(move);
                            }
                        }
                    }
                }
            }
        }

        let move;
        if (promotingMoves.length > 0) move = promotingMoves[Math.floor(Math.random() * promotingMoves.length)];
        else if (capturingMoves.length > 0) move = capturingMoves[Math.floor(Math.random() * capturingMoves.length)];
        else if (normalMoves.length > 0) move = normalMoves[Math.floor(Math.random() * normalMoves.length)];

        if (move) {
             const piece = boardState[move.r][move.c];
             if (piece === '♟' && move.tr === 7) {
                 executeMove_BlackPromotion(move.r, move.c, move.tr, move.tc, '♛');
             } else {
                executeMove(move.r, move.c, move.tr, move.tc);
             }
        }
    }

    function executeMove_BlackPromotion(fromRow, fromCol, toRow, toCol, promotedPiece) {
        const targetPiece = boardState[toRow][toCol];
        if (targetPiece) {
            topCaptured.innerHTML += `<span>${targetPiece}</span>`;
        }
        boardState[toRow][toCol] = promotedPiece;
        boardState[fromRow][fromCol] = '';
        createBoard();
        checkGameStates(!isWhiteTurn);
    }

    function isBasicValidMove(sr, sc, er, ec, isAttackCheck = false) {
        const piece = boardState[sr][sc];
        const targetPiece = boardState[er][ec];
        const dr = er - sr;
        const dc = ec - sc;
        const absDr = Math.abs(dr);
        const absDc = Math.abs(dc);

        if (!isAttackCheck && targetPiece) {
            const isWhite = whitePieces.includes(piece);
            const isTargetWhite = whitePieces.includes(targetPiece);
            if (isWhite === isTargetWhite) return false;
        }

        if (piece === '♙') { 
            if (isAttackCheck) return dr === -1 && absDc === 1; 
            if (dc === 0 && !targetPiece && dr === -1) return true;
            if (dc === 0 && !targetPiece && sr === 6 && dr === -2 && !boardState[sr-1][sc]) return true;
            if (absDc === 1 && dr === -1 && targetPiece) return true;
            return false;
        }
        if (piece === '♟') { 
            if (isAttackCheck) return dr === 1 && absDc === 1;
            if (dc === 0 && !targetPiece && dr === 1) return true;
            if (dc === 0 && !targetPiece && sr === 1 && dr === 2 && !boardState[sr+1][sc]) return true;
            if (absDc === 1 && dr === 1 && targetPiece) return true;
            return false;
        }

        if (piece === '♖' || piece === '♜') {
            if (dr !== 0 && dc !== 0) return false;
            return isPathClear(sr, sc, er, ec);
        }
        if (piece === '♘' || piece === '♞') return (absDr === 2 && absDc === 1) || (absDr === 1 && absDc === 2);
        if (piece === '♗' || piece === '♝') {
            if (absDr !== absDc) return false;
            return isPathClear(sr, sc, er, ec);
        }
        if (piece === '♕' || piece === '♛') {
            if (dr !== 0 && dc !== 0 && absDr !== absDc) return false;
            return isPathClear(sr, sc, er, ec);
        }
        if (piece === '♔' || piece === '♚') return absDr <= 1 && absDc <= 1;

        return false;
    }

    function isPathClear(sr, sc, er, ec) {
        const rowStep = Math.sign(er - sr);
        const colStep = Math.sign(ec - sc);
        let r = sr + rowStep;
        let c = sc + colStep;
        while (r !== er || c !== ec) {
            if (boardState[r][c] !== '') return false;
            r += rowStep;
            c += colStep;
        }
        return true;
    }

    function isKingInCheck(isWhiteKing) {
        let kingPiece = isWhiteKing ? '♔' : '♚';
        let kr = -1, kc = -1;
        for (let r = 0; r < 8; r++) {
            for (let c = 0; c < 8; c++) {
                if (boardState[r][c] === kingPiece) { kr = r; kc = c; break; }
            }
        }
        if (kr === -1) return true; 

        for (let r = 0; r < 8; r++) {
            for (let c = 0; c < 8; c++) {
                let piece = boardState[r][c];
                if (piece && (whitePieces.includes(piece) !== isWhiteKing)) {
                    if (isBasicValidMove(r, c, kr, kc, true)) return true;
                }
            }
        }
        return false;
    }

    function isSafeMove(sr, sc, er, ec, isWhite) {
        let targetPiece = boardState[er][ec];
        let originalPiece = boardState[sr][sc];
        boardState[er][ec] = originalPiece;
        boardState[sr][sc] = '';
        
        let simulatedPiece = originalPiece;
        if (originalPiece === '♙' && er === 0) simulatedPiece = '♕';
        else if (originalPiece === '♟' && er === 7) simulatedPiece = '♛';
        boardState[er][ec] = simulatedPiece;

        let safe = !isKingInCheck(isWhite);
        
        boardState[sr][sc] = originalPiece;
        boardState[er][ec] = targetPiece;
        
        return safe;
    }

    function hasAnyLegalMove(isWhite) {
        for (let r = 0; r < 8; r++) {
            for (let c = 0; c < 8; c++) {
                let piece = boardState[r][c];
                if (piece && (whitePieces.includes(piece) === isWhite)) {
                    for (let tr = 0; tr < 8; tr++) {
                        for (let tc = 0; tc < 8; tc++) {
                            if (isBasicValidMove(r, c, tr, tc) && isSafeMove(r, c, tr, tc, isWhite)) {
                                return true;
                            }
                        }
                    }
                }
            }
        }
        return false;
    }

    initGame();
</script>

</body>
</html>

Post a Comment

0 Comments