satranç oyunu yapıyorum

denizius

80+
Katılım
24 Mart 2024
Mesajlar
35
Reaksiyon skoru
5
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:
Yeni mesajlar Yeni Konu Aç  

   

SON KONULAR

Forum istatistikleri

Konular
1,210,166
Mesajlar
10,951,800
Üyeler
195,281
Son üye
TalAİ
Geri
Top