Rozumiem. Wprowadzenie pełnej logiki szachowej jest złożone. Zaktualizuję kod, dodając podstawową walidację ruchów dla figur, obsługę tur i podświetlanie możliwych ruchów. Na razie bot będzie bardzo prosty (losowy ruch), a multiplayer pozostanie tylko interfejsem. Szachy

Szachy

Wybierz Tryb Gry

body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #2c3e50; color: #ecf0f1; padding-top: 20px; } #menu, #game-area { background-color: #34495e; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); text-align: center; width: 90%; max-width: 600px; /* Zwiększona szerokość dla planszy */ } #game-area { display: flex; flex-direction: column; align-items: center; } h1 { color: #e74c3c; margin-bottom: 30px; border-bottom: 2px solid #e74c3c; padding-bottom: 10px; } h2 { color: #f1c40f; margin-top: 20px; margin-bottom: 15px; } button { background-color: #e74c3c; color: white; border: none; padding: 12px 25px; margin: 8px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease, transform 0.1s ease; } button:disabled { background-color: #95a5a6; cursor: not-allowed; } button:not(:disabled):hover { background-color: #c0392b; } button:not(:disabled):active { transform: scale(0.98); } #difficulty-selection button, #multiplayer-options button:not(#btn-back-to-mode-from-multiplayer) { background-color: #3498db; } #difficulty-selection button:not(:disabled):hover, #multiplayer-options button:not(#btn-back-to-mode-from-multiplayer):not(:disabled):hover { background-color: #2980b9; } #btn-back-to-mode-from-difficulty, #btn-back-to-mode-from-multiplayer, #btn-back-to-menu { background-color: #7f8c8d; /* Szary dla przycisków "Wróć" */ margin-top: 15px; } #btn-back-to-mode-from-difficulty:hover, #btn-back-to-mode-from-multiplayer:hover, #btn-back-to-menu:hover { background-color: #6c7a7b; } #join-room-section { margin-top: 20px; display: flex; justify-content: center; align-items: center; gap: 10px; } #input-join-code { padding: 10px; border-radius: 5px; border: 1px solid #7f8c8d; font-size: 16px; background-color: #ecf0f1; color: #2c3e50; } #input-join-code:disabled { background-color: #bdc3c7; } #room-code-display { margin-top: 15px; padding: 10px; background-color: #2c3e50; border-radius: 5px; display: inline-block; } #room-code { color: #f1c40f; font-weight: bold; } #game-info { margin-bottom: 15px; font-size: 1.1em; width: 100%; display: flex; justify-content: space-between; padding: 0 10px; box-sizing: border-box; } #turn-indicator { font-weight: bold; color: #f1c40f; } #status-indicator { color: #e74c3c; font-weight: bold; } #chessboard-container { display: inline-block; /* Aby obramowanie pasowało do planszy */ border: 5px solid #16a085; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); line-height: 0; /* Usunięcie dodatkowej przestrzeni pod planszą */ } #chessboard { display: grid; grid-template-columns: repeat(8, 55px); grid-template-rows: repeat(8, 55px); width: 440px; /* 8 * 55px */ height: 440px; /* 8 * 55px */ /* Usunięto border stąd, jest na kontenerze */ } .square { width: 55px; height: 55px; display: flex; justify-content: center; align-items: center; font-size: 40px; user-select: none; box-sizing: border-box; /* Zapobiega problemom z paddingiem/borderem */ position: relative; /* Dla pozycjonowania wskaźników */ } .light { background-color: #ecf0f1; } .dark { background-color: #95a5a6; } .piece { cursor: grab; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); position: relative; /* Dla z-index */ z-index: 10; } .piece:active { cursor: grabbing; } .piece.dragging { opacity: 0.5; /* Lekko przezroczysta podczas przeciągania */ z-index: 100; /* Na wierzchu podczas przeciągania */ } .white-piece { color: #f1f1f1; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); } .black-piece { color: #2c3e50; text-shadow: 1px 1px 2px rgba(255,255,255,0.3); } .selected { background-color: rgba(241, 196, 15, 0.5) !important; /* Żółtawe podświetlenie wybranego pola */ } .valid-move-indicator { position: absolute; width: 20px; height: 20px; background-color: rgba(46, 204, 113, 0.6); /* Zielony wskaźnik */ border-radius: 50%; z-index: 5; /* Pod figurą, ale nad tłem pola */ pointer-events: none; /* Aby nie blokował kliknięć na pole */ } .valid-capture-indicator { box-sizing: border-box; position: absolute; width: 100%; height: 100%; border: 4px solid rgba(231, 76, 60, 0.6); /* Czerwona obwódka dla bicia */ border-radius: 5px; z-index: 5; pointer-events: none; } .hidden { display: none; } // Plik: chess-logic.js - Logika gry w szachy const BOARD_SIZE = 8; // --- Reprezentacja Planszy --- let board = []; // Dwuwymiarowa tablica [wiersz][kolumna] let currentPlayer = 'w'; // 'w' - białe, 'b' - czarne let gameActive = false; let selectedPiece = null; // { piece: 'P', row: 6, col: 0 } let validMoves = []; // Tablica możliwych ruchów dla wybranej figury [{row, col, capture}] const PIECES = { 'r': '♜', 'n': '♞', 'b': '♝', 'q': '♛', 'k': '♚', 'p': '♟', // Czarne 'R': '♖', 'N': '♘', 'B': '♗', 'Q': '♕', 'K': '♔', 'P': '♙' // Białe }; const INITIAL_BOARD = [ ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'], ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'], ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'] ]; function initializeBoard() { board = JSON.parse(JSON.stringify(INITIAL_BOARD)); // Głęboka kopia currentPlayer = 'w'; gameActive = true; selectedPiece = null; validMoves = []; console.log("Chess logic initialized. White's turn."); } function getPieceAt(row, col) { if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) { return null; // Poza planszą } return board[row][col]; } function isWhitePiece(piece) { return piece && piece === piece.toUpperCase(); } function isBlackPiece(piece) { return piece && piece === piece.toLowerCase(); } function getPieceColor(piece) { if (!piece) return null; return isWhitePiece(piece) ? 'w' : 'b'; } function isOpponentPiece(piece, playerColor) { const pieceColor = getPieceColor(piece); return pieceColor && pieceColor !== playerColor; } function isSquareEmpty(row, col) { return getPieceAt(row, col) === ''; } function isSquareOnBoard(row, col) { return row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE; } // --- Logika Ruchów --- function getValidMoves(piece, r, c) { const moves = []; const playerColor = getPieceColor(piece); const pieceType = piece.toLowerCase(); switch (pieceType) { case 'p': // Pionek const direction = playerColor === 'w' ? -1 : 1; const startRow = playerColor === 'w' ? 6 : 1; // Ruch o 1 pole do przodu if (isSquareOnBoard(r + direction, c) && isSquareEmpty(r + direction, c)) { moves.push({ row: r + direction, col: c, capture: false }); // Ruch o 2 pola do przodu (z pozycji startowej) if (r === startRow && isSquareEmpty(r + 2 * direction, c)) { moves.push({ row: r + 2 * direction, col: c, capture: false }); } } // Bicie po skosie const captureCols = [c - 1, c + 1]; captureCols.forEach(captureCol => { if (isSquareOnBoard(r + direction, captureCol)) { const targetPiece = getPieceAt(r + direction, captureCol); if (targetPiece && isOpponentPiece(targetPiece, playerColor)) { moves.push({ row: r + direction, col: captureCol, capture: true }); } } }); // TODO: En passant, Promocja break; case 'r': // Wieża addLinearMoves(moves, playerColor, r, c, [[-1, 0], [1, 0], [0, -1], [0, 1]]); break; case 'n': // Skoczek const knightMoves = [ [-2, -1], [-2, 1], [-1, -2], [-1, 2], [1, -2], [1, 2], [2, -1], [2, 1] ]; knightMoves.forEach(([dr, dc]) => { const nr = r + dr; const nc = c + dc; if (isSquareOnBoard(nr, nc)) { const targetPiece = getPieceAt(nr, nc); if (!targetPiece || isOpponentPiece(targetPiece, playerColor)) { moves.push({ row: nr, col: nc, capture: !!targetPiece }); } } }); break; case 'b': // Goniec addLinearMoves(moves, playerColor, r, c, [[-1, -1], [-1, 1], [1, -1], [1, 1]]); break; case 'q': // Królowa (Hetman) addLinearMoves(moves, playerColor, r, c, [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]]); break; case 'k': // Król const kingMoves = [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]]; kingMoves.forEach(([dr, dc]) => { const nr = r + dr; const nc = c + dc; if (isSquareOnBoard(nr, nc)) { const targetPiece = getPieceAt(nr, nc); if (!targetPiece || isOpponentPiece(targetPiece, playerColor)) { // TODO: Sprawdzić, czy pole nie jest atakowane (szach) moves.push({ row: nr, col: nc, capture: !!targetPiece }); } } }); // TODO: Roszada break; } // TODO: Filtrowanie ruchów, które pozostawiają króla w szachu return moves; } // Funkcja pomocnicza dla ruchów liniowych (wieża, goniec, królowa) function addLinearMoves(moves, playerColor, r, c, directions) { directions.forEach(([dr, dc]) => { for (let i = 1; ; i++) { const nr = r + i * dr; const nc = c + i * dc; if (!isSquareOnBoard(nr, nc)) break; // Poza planszą const targetPiece = getPieceAt(nr, nc); if (targetPiece) { if (isOpponentPiece(targetPiece, playerColor)) { moves.push({ row: nr, col: nc, capture: true }); // Bicie } break; // Zablokowane przez inną figurę (swoją lub przeciwnika) } else { moves.push({ row: nr, col: nc, capture: false }); // Puste pole } } }); } function makeMove(fromRow, fromCol, toRow, toCol) { if (!gameActive) return false; const pieceToMove = board[fromRow][fromCol]; if (!pieceToMove || getPieceColor(pieceToMove) !== currentPlayer) { console.error("Invalid move: Not your piece or empty square."); return false; // Nie ta figura lub puste pole } // Sprawdź, czy ruch jest na liście dozwolonych const isValid = validMoves.some(move => move.row === toRow && move.col === toCol); if (!isValid) { console.error("Invalid move: Move not in valid moves list."); return false; } // Wykonaj ruch const capturedPiece = board[toRow][toCol]; // Zapamiętaj zbitą figurę (jeśli jest) board[toRow][toCol] = pieceToMove; board[fromRow][fromCol] = ''; console.log(`Moved ${pieceToMove} from [${fromRow},${fromCol}] to [${toRow},${toCol}]${capturedPiece ? ` capturing ${capturedPiece}` : ''}`); // TODO: Obsługa promocji piona // TODO: Obsługa roszady // TODO: Sprawdzenie szacha/mata/pata // Zmień turę switchTurn(); // Wyczyść wybór i możliwe ruchy selectedPiece = null; validMoves = []; return true; // Ruch wykonany pomyślnie } function switchTurn() { currentPlayer = (currentPlayer === 'w' ? 'b' : 'w'); console.log(`Turn switched to: ${currentPlayer === 'w' ? 'White' : 'Black'}`); } // --- Logika Bota (bardzo prosta) --- function getBotMove() { if (!gameActive || currentPlayer !== 'b') return null; // Tylko dla czarnego gracza (bota) const possibleMoves = []; for (let r = 0; r < BOARD_SIZE; r++) { for (let c = 0; c < BOARD_SIZE; c++) { const piece = board[r][c]; if (piece && getPieceColor(piece) === 'b') { const moves = getValidMoves(piece, r, c); if (moves.length > 0) { possibleMoves.push({ piece, fromRow: r, fromCol: c, moves }); } } } } if (possibleMoves.length === 0) { console.log("Bot has no possible moves."); // TODO: Sprawdzić czy to pat czy mat return null; } // Wybierz losową figurę, która ma ruchy const randomPieceData = possibleMoves[Math.floor(Math.random() * possibleMoves.length)]; // Wybierz losowy ruch dla tej figury const randomMove = randomPieceData.moves[Math.floor(Math.random() * randomPieceData.moves.length)]; return { fromRow: randomPieceData.fromRow, fromCol: randomPieceData.fromCol, toRow: randomMove.row, toCol: randomMove.col }; } // Eksport (jeśli używasz modułów, w przeciwnym razie będą globalne) // export { initializeBoard, getPieceAt, selectPiece, makeMove, currentPlayer, board }; // Plik: script.js - Interakcja z UI i główna pętla gry const chessboardEl = document.getElementById('chessboard'); const menuEl = document.getElementById('menu'); const gameAreaEl = document.getElementById('game-area'); const turnIndicatorEl = document.getElementById('turn-indicator'); const statusIndicatorEl = document.getElementById('status-indicator'); // Do szacha/mata // Przyciski menu const btnSinglePlayer = document.getElementById('btn-singleplayer'); const btnMultiplayer = document.getElementById('btn-multiplayer'); const modeSelectionEl = document.getElementById('mode-selection'); const difficultySelectionEl = document.getElementById('difficulty-selection'); const difficultyButtons = document.querySelectorAll('.btn-difficulty'); const btnBackToModeFromDifficulty = document.getElementById('btn-back-to-mode-from-difficulty'); const multiplayerOptionsEl = document.getElementById('multiplayer-options'); const btnBackToModeFromMultiplayer = document.getElementById('btn-back-to-mode-from-multiplayer'); const btnBackToMenu = document.getElementById('btn-back-to-menu'); let isPlayerTurn = true; // Czy jest tura gracza (w trybie vs Bot) // --- Renderowanie Planszy --- function renderBoard() { chessboardEl.innerHTML = ''; // Wyczyść planszę przed rysowaniem for (let row = 0; row < BOARD_SIZE; row++) { for (let col = 0; col < BOARD_SIZE; col++) { const square = document.createElement('div'); square.classList.add('square'); square.classList.add((row + col) % 2 === 0 ? 'light' : 'dark'); square.dataset.row = row; square.dataset.col = col; const pieceSymbol = getPieceAt(row, col); // Użyj funkcji z chess-logic.js if (pieceSymbol) { const pieceElement = document.createElement('span'); pieceElement.classList.add('piece'); pieceElement.textContent = PIECES[pieceSymbol]; // Użyj stałej z chess-logic.js pieceElement.classList.add(isWhitePiece(pieceSymbol) ? 'white-piece' : 'black-piece'); pieceElement.dataset.piece = pieceSymbol; // Nie ustawiamy draggable tutaj, obsługa przez kliknięcia square.appendChild(pieceElement); } // Dodanie obsługi kliknięcia na pole square.addEventListener('click', handleSquareClick); chessboardEl.appendChild(square); } } updateTurnIndicator(); clearHighlights(); // Wyczyść podświetlenia po przerysowaniu // Jeśli wybrano figurę, podświetl ją i jej ruchy if (selectedPiece) { highlightSelectedPieceAndMoves(); } console.log("Board rendered."); } function updateTurnIndicator() { turnIndicatorEl.textContent = `Ruch: ${currentPlayer === 'w' ? 'Białe' : 'Czarne'}`; // TODO: Dodać wskaźnik szacha/mata statusIndicatorEl.textContent = ""; // Na razie puste } // --- Obsługa Kliknięć i Ruchów --- function handleSquareClick(event) { if (!gameActive || !isPlayerTurn) return; // Ignoruj kliknięcia, gdy gra nieaktywna lub tura bota const clickedSquare = event.currentTarget; const row = parseInt(clickedSquare.dataset.row); const col = parseInt(clickedSquare.dataset.col); const clickedPieceSymbol = getPieceAt(row, col); console.log(`Clicked square: [${row}, ${col}], Piece: ${clickedPieceSymbol || 'Empty'}`); if (selectedPiece) { // Mamy wybraną figurę - próbujemy wykonać ruch const targetMove = validMoves.find(move => move.row === row && move.col === col); if (targetMove) { // To jest prawidłowy ruch dla wybranej figury if (makeMove(selectedPiece.row, selectedPiece.col, row, col)) { renderBoard(); // Przerenderuj planszę po udanym ruchu // Jeśli to gra vs Bot, teraz tura bota if (currentPlayer === 'b') { // Zakładamy, że gracz gra białymi isPlayerTurn = false; setTimeout(handleBotTurn, 500); // Dajmy botowi chwilę "namysłu" } } else { // Ruch nie powiódł się (np. zostawia króla w szachu - przyszła logika) console.log("Move failed (logic prevented)."); // Można dodać feedback dla użytkownika clearHighlights(); selectedPiece = null; validMoves = []; } } else { // Kliknięto inne pole - może wybór innej figury tego samego koloru? if (clickedPieceSymbol && getPieceColor(clickedPieceSymbol) === currentPlayer) { selectPieceAndCalculateMoves(clickedPieceSymbol, row, col); renderBoard(); // Przerenderuj, aby pokazać nowe podświetlenia } else { // Kliknięto puste pole lub figurę przeciwnika (bez ruchu) - odznaczamy clearHighlights(); selectedPiece = null; validMoves = []; } } } else { // Nie ma wybranej figury - próbujemy wybrać nową if (clickedPieceSymbol && getPieceColor(clickedPieceSymbol) === currentPlayer) { selectPieceAndCalculateMoves(clickedPieceSymbol, row, col); renderBoard(); // Przerenderuj, aby pokazać podświetlenia } } } function selectPieceAndCalculateMoves(pieceSymbol, row, col) { selectedPiece = { piece: pieceSymbol, row: row, col: col }; validMoves = getValidMoves(pieceSymbol, row, col); // Pobierz ruchy z logiki console.log(`Selected piece: ${pieceSymbol} at [${row}, ${col}]. Valid moves:`, validMoves); } function handleBotTurn() { console.log("Bot's turn..."); const botMove = getBotMove(); // Pobierz ruch z logiki if (botMove) { console.log("Bot move:", botMove); // Symulacja kliknięcia przez bota (dla spójności logiki) selectPieceAndCalculateMoves(getPieceAt(botMove.fromRow, botMove.fromCol), botMove.fromRow, botMove.fromCol); if(makeMove(botMove.fromRow, botMove.fromCol, botMove.toRow, botMove.toCol)) { renderBoard(); } else { console.error("Bot failed to make a calculated move!"); // To nie powinno się zdarzyć z prostym botem, ale zabezpieczenie } } else { console.log("Bot has no move or game ended."); // TODO: Obsługa końca gry (mat/pat zadany przez gracza) gameActive = false; statusIndicatorEl.textContent = "Koniec gry?"; // Placeholder } isPlayerTurn = true; // Tura wraca do gracza updateTurnIndicator(); // Zaktualizuj wskaźnik tury } // --- Podświetlanie --- function clearHighlights() { document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected')); document.querySelectorAll('.valid-move-indicator').forEach(el => el.remove()); document.querySelectorAll('.valid-capture-indicator').forEach(el => el.remove()); } function highlightSelectedPieceAndMoves() { if (!selectedPiece) return; // Podświetl wybrane pole const selectedSquare = chessboardEl.querySelector(`.square[data-row="${selectedPiece.row}"][data-col="${selectedPiece.col}"]`); if (selectedSquare) { selectedSquare.classList.add('selected'); } // Podświetl możliwe ruchy validMoves.forEach(move => { const targetSquare = chessboardEl.querySelector(`.square[data-row="${move.row}"][data-col="${move.col}"]`); if (targetSquare) { const indicator = document.createElement('div'); if (move.capture) { indicator.classList.add('valid-capture-indicator'); } else { indicator.classList.add('valid-move-indicator'); } targetSquare.appendChild(indicator); } }); } // --- Obsługa Menu --- function showElement(element) { element.classList.remove('hidden'); } function hideElement(element) { element.classList.add('hidden'); } function startGame(difficulty) { console.log(`Starting game with difficulty: ${difficulty}`); initializeBoard(); // Zainicjuj logikę gry isPlayerTurn = true; // Gracz (biały) zaczyna hideElement(menuEl); showElement(gameAreaEl); renderBoard(); // Narysuj planszę } function showMenu() { gameActive = false; // Zatrzymaj grę po powrocie do menu hideElement(gameAreaEl); hideElement(difficultySelectionEl); hideElement(multiplayerOptionsEl); // hideElement(roomCodeDisplayEl); // Nie ma potrzeby, jest w multiplayerOptionsEl showElement(modeSelectionEl); showElement(menuEl); } btnSinglePlayer.addEventListener('click', () => { hideElement(modeSelectionEl); showElement(difficultySelectionEl); }); // Multiplayer jest wyłączony w HTML, więc ten listener nie jest potrzebny // btnMultiplayer.addEventListener('click', () => { // hideElement(modeSelectionEl); // showElement(multiplayerOptionsEl); // }); btnBackToModeFromDifficulty.addEventListener('click', () => { hideElement(difficultySelectionEl); showElement(modeSelectionEl); }); btnBackToModeFromMultiplayer.addEventListener('click', () => { hideElement(multiplayerOptionsEl); // hideElement(roomCodeDisplayEl); showElement(modeSelectionEl); }); difficultyButtons.forEach(button => { button.addEventListener('click', () => { if (button.disabled) return; const difficulty = button.dataset.difficulty; startGame(difficulty); }); }); // Przyciski multiplayer są wyłączone, listenery nie są potrzebne // btnCreateRoom.addEventListener('click', () => { ... }); // btnJoinRoom.addEventListener('click', () => { ... }); btnBackToMenu.addEventListener('click', showMenu); // --- Inicjalizacja --- showMenu(); // Pokaż menu na starcie console.log("UI Initialized. Waiting for game start.");

Szachy

Wybierz Tryb Gry

Wybierz Poziom Trudności Bota

Opcje Multiplayer (Niedostępne)