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
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: