satranç oyunu yapıyorum.

d3n1z7313

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

`// 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();

});`

By_Surmeneli

Düzeltilmiş Kod aşağıdaki gibidir.

<!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>
    <link rel="stylesheet" href="styles.css">
	
	<style>

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

.chessboard {
    display: grid;
    grid-template-columns: repeat(8, 60px);
    grid-template-rows: repeat(8, 60px);
    border: 2px solid #333;
}

.square {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: Arial, sans-serif;
}

.square.black {
    background-color: #769656;
}

.square.white {
    background-color: #eeeed2;
}

.square.selected {
    outline: 2px solid red;
}

[data-piece]:before {
    content: attr(data-piece);
}

	</style>
	
	<script> 
	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]);

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

            // Çapraz hareket kontrolü (rakip taşı yeme)
            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[0] === board[to][0]) {
                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();
});

	</script>
</head>
<body>
    <div class="chessboard"></div>
    <script src="script.js"></script>
</body>
</html>

Ek Bilgiler Aşağıdaki Gibidir

Projenizde piyonların hareketlerinde ve aynı renk taşların birbirini yiyebilmesi gibi problemlerle karşılaşmışsınız. Bu tür sorunları çözmek için piyonların hareket kurallarını ve taşların yemek kurallarını gözden geçirmemiz gerekiyor. İşte bu sorunları çözmenize yardımcı olacak birkaç öneri ve kod düzeltmeleri:

Piyon Hareket Kuralları
Piyonlar sadece dikey olarak hareket edebilirler ve ilk hamlede iki kare ilerleyebilirler. Ayrıca, çapraz bir kareye sadece orada bir rakip taş varsa hareket edebilirler. Piyonların bu kurallara uygun hareket etmesini sağlamak için pieceMoves.p fonksiyonunu şu şekilde güncelleyebilirsiniz:
Aynı Renk Taşların Birbirini Yemesi
Aynı renk taşların birbirini yemesini önlemek için isValidMove fonksiyonunda mevcut kontrolleri sıkılaştırmanız gerekiyor. Eğer hedef karede bir taş varsa ve bu taş aynı renkteyse, hamleyi geçersiz kılmalısınız.
Kilitlenme Sorunu
Beyaz piyonların kilitlenme sorununu çözmek için her iki tarafın da doğru şekilde ilerlediğinden emin olmalısınız. Piyonlar doğru yönde hareket ediyor mu ve piyonların hareket kuralları diğer taşlarla çakışıyor mu diye kontrol etmelisiniz.

Beyaz ve siyah piyonların doğru yönde ilerleyip ilerlemediğini kontrol etmek için yukarıdaki pieceMoves.p fonksiyonunda direction değişkenini kullanıyoruz. Eğer piyon hareket etmiyorsa, bu hareketin geçersiz olduğunu belirten hata mesajlarını konsola yazdırarak da kontrol edebilirsiniz.