Selam dostlar ben bı süredir satranç yapmaya çalışıyorum aynı cihaz üzerinden html ile düzenli hamleler koydum hamle sıraları gösterme koydum taşların texturelarını hallettim kodu veriyim
Kod bu şekilde ama piyonu sona götürdüğümde taş alma
Pata bitme 50 hamle kuralı
Şah ve şahmat kodlarını yapamadım
Bana belirttiğim 3 konunun kodlarını verebilirseniz çok sevinirim iyi günler dilerim
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>satranc</title>
<style>
body {
font-family: sans-serif;
text-align: center;
margin: 20px;
}
#board {
display: grid;
grid-template-columns: repeat(8, 60px);
width: 480px;
margin: auto;
}
.square {
width: 60px; height: 60px;
display: flex; justify-content: center; align-items: center;
font-size: 40px; cursor: pointer; user-select: none;
transition: background 0.3s;
}
.white { background-color: #f0d9b5; }
.black { background-color: #b58863; color: white; }
.selected { outline: 3px solid red; }
#turn, #scores {
margin-top: 10px;
font-size: 18px;
}
#history {
margin-top: 20px;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
width: 300px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
button {
margin-top: 10px;
padding: 8px 16px;
}
</style>
</head>
<body>
<h2>satranc offline </h2>
<p id="turn">Turn: White</p>
<div id="board"></div>
<div id="scores">
White Captures: <span id="whiteScore"></span> |
Black Captures: <span id="blackScore"></span>
</div>
<button onclick="resetGame()">Yeni Oyun</button>
<div id="history">
<strong>Move History:</strong>
<ul id="moveList"></ul>
</div>
<script>
const boardElement = document.getElementById("board");
const turnLabel = document.getElementById("turn");
const whiteScoreEl = document.getElementById("whiteScore");
const blackScoreEl = document.getElementById("blackScore");
const moveListEl = document.getElementById("moveList");
const pieces = {
wP: "♙", wR: "♖", wN: "♘", wB: "♗", wQ: "♕", wK: "♔",
bP: "♟", bR: "♜", bN: "♞", bB: "♝", bQ: "♛", bK: "♚"
};
let board = [];
let currentTurn = "w";
let selected = null;
let captures = { w: [], b: [] };
let history = [];
function loadGame() {
const saved = localStorage.getItem("chessSave2");
if (saved) {
const data = JSON.parse(saved);
board = data.board;
currentTurn = data.turn;
captures = data.captures;
history = data.history || [];
} else {
resetGame();
}
}
function saveGame() {
localStorage.setItem("chessSave2", JSON.stringify({
board, turn: currentTurn, captures, history
}));
}
function resetGame() {
board = [
["bR", "bN", "bB", "bQ", "bK", "bB", "bN", "bR"],
["bP", "bP", "bP", "bP", "bP", "bP", "bP", "bP"],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["wP", "wP", "wP", "wP", "wP", "wP", "wP", "wP"],
["wR", "wN", "wB", "wQ", "wK", "wB", "wN", "wR"]
];
currentTurn = "w";
captures = { w: [], b: [] };
history = [];
selected = null;
saveGame();
renderBoard();
renderHistory();
}
function renderBoard() {
boardElement.innerHTML = "";
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const sq = document.createElement("div");
const piece = board[row][col];
sq.className = "square " + ((row + col) % 2 === 0 ? "white" : "black");
sq.dataset.row = row;
sq.dataset.col = col;
sq.textContent = pieces[piece] || "";
if (selected && selected.row == row && selected.col == col) {
sq.classList.add("selected");
}
sq.onclick = handleClick;
boardElement.appendChild(sq);
}
}
whiteScoreEl.textContent = captures.w.join(" ");
blackScoreEl.textContent = captures.b.join(" ");
turnLabel.textContent = `Turn: ${currentTurn === 'w' ? 'White' : 'Black'}`;
}
function handleClick(e) {
const row = +e.target.dataset.row;
const col = +e.target.dataset.col;
const piece = board[row][col];
if (selected) {
if (isValidMove(selected, { row, col })) {
const movingPiece = board[selected.row][selected.col];
const target = board[row][col];
const moveText = `${movingPiece} ${String.fromCharCode(97 + selected.col)}${8 - selected.row} → ${String.fromCharCode(97 + col)}${8 - row}` + (target ? ` x ${target}` : "");
if (target) captures[currentTurn].push(pieces[target]);
board[row][col] = movingPiece;
board[selected.row][selected.col] = "";
currentTurn = currentTurn === "w" ? "b" : "w";
history.push(moveText);
saveGame();
renderHistory();
}
selected = null;
renderBoard();
} else {
if (piece && piece[0] === currentTurn) {
selected = { row, col };
renderBoard();
}
}
}
function isValidMove(from, to) {
const piece = board[from.row][from.col];
const target = board[to.row][to.col];
if (target && target[0] === piece[0]) return false;
const dx = to.col - from.col;
const dy = to.row - from.row;
const absDx = Math.abs(dx);
const absDy = Math.abs(dy);
switch (piece[1]) {
case "P":
let dir = piece[0] === "w" ? -1 : 1;
if (dx === 0 && dy === dir && !target) return true;
if (dx === 0 && dy === 2 * dir && from.row === (piece[0] === "w" ? 6 : 1) && !target) return true;
if (absDx === 1 && dy === dir && target) return true;
break;
case "R":
if (dx === 0 || dy === 0) return clearPath(from, to);
break;
case "B":
if (absDx === absDy) return clearPath(from, to);
break;
case "Q":
if (dx === 0 || dy === 0 || absDx === absDy) return clearPath(from, to);
break;
case "N":
if ((absDx === 2 && absDy === 1) || (absDx === 1 && absDy === 2)) return true;
break;
case "K":
if (absDx <= 1 && absDy <= 1) return true;
break;
}
return false;
}
function clearPath(from, to) {
let dx = Math.sign(to.col - from.col);
let dy = Math.sign(to.row - from.row);
let x = from.col + dx;
let y = from.row + dy;
while (x !== to.col || y !== to.row) {
if (board[y][x] !== "") return false;
x += dx;
y += dy;
}
return true;
}
function renderHistory() {
moveListEl.innerHTML = "";
history.forEach((move, i) => {
const li = document.createElement("li");
li.textContent = `${i + 1}. ${move}`;
moveListEl.appendChild(li);
});
}
loadGame();
renderBoard();
renderHistory();
</script>
</body>
</html>Pata bitme 50 hamle kuralı
Şah ve şahmat kodlarını yapamadım
Bana belirttiğim 3 konunun kodlarını verebilirseniz çok sevinirim iyi günler dilerim
