Neler Yeni

satranç oyunu yapıyorum

denizius

80+
Katılım
24 Mart 2024
Mesajlar
28
Dahası  
Reaksiyon skoru
5
İsim
deniz fersiz
yaptığım oyunda basit olarak kurallı hareketleri çözdüm fakat aynı renkler birbirini yiyebiliyor. ve siyah piyon düzgün hareket ederken beyaz piyon tek bir hareket yapabiliyor daha sonra kilitleniyor.
projeyi css html ve js kullanarak yapıyorum

JavaScript:
// script.js
document.addEventListener('DOMContentLoaded', () => {
    const initialBoard = {
        a8: 'r', b8: 'n', c8: 'b', d8: 'q', e8: 'k', f8: 'b', g8: 'n', h8: 'r',
        a7: 'p', b7: 'p', c7: 'p', d7: 'p', e7: 'p', f7: 'p', g7: 'p', h7: 'p',
        a2: 'P', b2: 'P', c2: 'P', d2: 'P', e2: 'P', f2: 'P', g2: 'P', h2: 'P',
        a1: 'R', b1: 'N', c1: 'B', d1: 'Q', e1: 'K', f1: 'B', g1: 'N', h1: 'R'
    };

    const pieceMoves = {
        p: (from, to, board) => {
            const direction = from[1] === '2' ? 1 : -1;
            const startRow = from[1] === '2' || from[1] === '7';
            const diff = parseInt(to[1]) - parseInt(from[1]);

            if (from[0] === to[0] && board[to] === undefined && (diff === direction || (startRow && diff === 2 * direction && board[to[0] + (parseInt(to[1]) - direction)] === undefined))) {
                return true;
            }

            if (Math.abs(from.charCodeAt(0) - to.charCodeAt(0)) === 1 && diff === direction && board[to] !== undefined) {
                return true;
            }

            return false;
        },
        r: (from, to, board) => {
            if (from[0] === to[0]) {
                for (let i = Math.min(parseInt(from[1]), parseInt(to[1])) + 1; i < Math.max(parseInt(from[1]), parseInt(to[1])); i++) {
                    if (board[from[0] + i]) return false;
                }
                return true;
            }
            if (from[1] === to[1]) {
                for (let i = Math.min(from.charCodeAt(0), to.charCodeAt(0)) + 1; i < Math.max(from.charCodeAt(0), to.charCodeAt(0)); i++) {
                    if (board[String.fromCharCode(i) + from[1]]) return false;
                }
                return true;
            }
            return false;
        },
        n: (from, to) => {
            const dx = Math.abs(from.charCodeAt(0) - to.charCodeAt(0));
            const dy = Math.abs(from[1] - to[1]);
            return (dx === 2 && dy === 1) || (dx === 1 && dy === 2);
        },
        b: (from, to, board) => {
            if (Math.abs(from.charCodeAt(0) - to.charCodeAt(0)) !== Math.abs(from[1] - to[1])) return false;
            const xDirection = from.charCodeAt(0) < to.charCodeAt(0) ? 1 : -1;
            const yDirection = from[1] < to[1] ? 1 : -1;
            for (let i = 1; i < Math.abs(from.charCodeAt(0) - to.charCodeAt(0)); i++) {
                if (board[String.fromCharCode(from.charCodeAt(0) + i * xDirection) + (parseInt(from[1]) + i * yDirection)]) return false;
            }
            return true;
        },
        q: (from, to, board) => {
            return pieceMoves.r(from, to, board) || pieceMoves.b(from, to, board);
        },
        k: (from, to) => {
            const dx = Math.abs(from.charCodeAt(0) - to.charCodeAt(0));
            const dy = Math.abs(from[1] - to[1]);
            return dx <= 1 && dy <= 1;
        }
    };

    const isValidMove = (piece, from, to, board) => {
        if (piece.toLowerCase() in pieceMoves) {
            if (board[to] && piece.toLowerCase() === board[to].toLowerCase()) {
                return false; // Kendi taşını yeme
            }
            return pieceMoves[piece.toLowerCase()](from, to, board);
        }
        return false;
    };

    const chessboard = document.querySelector('.chessboard');
    const rows = '87654321'.split('');
    const cols = 'abcdefgh'.split('');

    const boardState = { ...initialBoard };

    const renderBoard = () => {
        chessboard.innerHTML = '';
        rows.forEach(row => {
            cols.forEach(col => {
                const square = document.createElement('div');
                square.classList.add('square');
                square.classList.add((col.charCodeAt(0) + parseInt(row)) % 2 === 0 ? 'black' : 'white');
                square.id = col + row;
                if (boardState[col + row]) {
                    square.setAttribute('data-piece', boardState[col + row]);
                }
                chessboard.appendChild(square);
            });
        });

        document.querySelectorAll('.square').forEach(square => {
            square.addEventListener('click', squareClickHandler);
        });
    };

    let selectedSquare = null;

    const squareClickHandler = (event) => {
        const square = event.target;
        if (selectedSquare) {
            selectedSquare.classList.remove('selected');
            const piece = selectedSquare.getAttribute('data-piece');
            const targetPiece = square.getAttribute('data-piece');
            if (selectedSquare !== square && isValidMove(piece, selectedSquare.id, square.id, boardState) && (!targetPiece || piece[0] !== targetPiece[0])) {
                boardState[square.id] = piece;
                delete boardState[selectedSquare.id];
                renderBoard();
            }
            selectedSquare = null;
        } else if (square.getAttribute('data-piece')) {
            selectedSquare = square;
            selectedSquare.classList.add('selected');
        }
    };

    renderBoard();
});
 
Son düzenleme:
Top Bottom