ПОЛЕ ШАШКИ - Blockmas

Blockmas

benjaminsen

Blockmas

Inspect

81K

594

Playit

alex1230

Blockmas

ПОЛЕ ШАШКИ

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Шашки</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="board" id="board"></div> <script src="script.js"></script> </body> </html> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .board { display: grid; grid-template-columns: repeat(8, 50px); grid-template-rows: repeat(8, 50px); border: 2px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .cell { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } /* Чёрные клетки */ .cell.black { background-color: #8B4513; } /* Белые клетки */ .cell.white { background-color: #DEB887; } .piece { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } /* Белые шашки */ .piece.white { background-color: white; border: 2px solid #ccc; } /* Чёрные шашки */ .piece.black { background-color: black; border: 2px solid #333; } /* Дамки */ .piece.king { border: 3px solid gold; position: relative; } .piece.king::after { content: "К"; color: gold; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .board { display: grid; grid-template-columns: repeat(8, 50px); grid-template-rows: repeat(8, 50px); border: 2px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .cell { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } /* Чёрные клетки */ .cell.black { background-color: #8B4513; } /* Белые клетки */ .cell.white { background-color: #DEB887; } .piece { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } /* Белые шашки */ .piece.white { background-color: white; border: 2px solid #ccc; } /* Чёрные шашки */ .piece.black { background-color: black; border: 2px solid #333; } /* Дамки */ .piece.king { border: 3px solid gold; position: relative; } .piece.king::after { content: "К"; color: gold; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } const board = document.getElementById("board"); const rows = 8; const cols = 8; let selectedPiece = null; let turn = "white"; function initializeBoard() { for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { // Создаём клетку const cell = document.createElement("div"); cell.className = `cell ${(row + col) % 2 === 0 ? "white" : "black"}`; cell.dataset.row = row; cell.dataset.col = col; // Расставляем шашки в первых трёх и последних трёх рядах if ((row < 3 || row > 4) && (row + col) % 2 !== 0) { const piece = document.createElement("div"); piece.className = `piece ${row < 3 ? "black" : "white"}`; piece.dataset.color = row < 3 ? "black" : "white"; cell.appendChild(piece); } // Добавляем обработчик клика cell.addEventListener("click", onCellClick); board.appendChild(cell); } } } // Обработка кликов по клеткам function onCellClick(e) { const cell = e.target.closest(".cell"); if (!cell) return; const piece = cell.querySelector(".piece"); // Если выбрали шашку своего цвета if (piece && piece.dataset.color === turn) { selectedPiece = piece; highlightPossibleMoves(piece); } // Если есть выбранная шашка и кликнули на пустую клетку else if (selectedPiece && !piece) { const startRow = parseInt(selectedPiece.parentElement.dataset.row); const startCol = parseInt(selectedPiece.parentElement.dataset.col); const targetRow = parseInt(cell.dataset.row); const targetCol = parseInt(cell.dataset.col); if (isValidMove(startRow, startCol, targetRow, targetCol)) { movePiece(selectedPiece, cell); selectedPiece = null; turn = turn === "white" ? "black" : "white"; // Переход хода checkGameState(); } } } // Проверка корректности хода function isValidMove(startRow, startCol, endRow, endCol) { // Простая проверка: ход на одну клетку по диагонали const rowDiff = Math.abs(endRow - startRow); const colDiff = Math.abs(endCol - startCol); return rowDiff === 1 && colDiff === 1; } // Перемещение шашки function movePiece(piece, targetCell) { targetCell.appendChild(piece); // Превращение в дамку при достижении края доски if ((piece.dataset.color === "white" && parseInt(targetCell.dataset.row) === 0) || (piece.dataset.color === "black" && parseInt(targetCell.dataset.row) === 7)) { piece.classList.add("king"); piece.dataset.type = "king"; } } // Подсветка возможных ходов (упрощённо) function highlightPossibleMoves(piece) { // Здесь можно добавить подсветку клеток, куда может пойти шашка } // Проверка состояния игры function checkGameState() { // Подсчёт шашек и проверка наличия ходов // Объявление победителя при отсутствии шашек или ходов у одного из игроков } // Запуск игры initializeBoard();

Be the first to comment