<!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();
