Анатолий Дворядкин 
```html
<!DOCTYPE html>
<html>
<head>
<title>Ultimate Board Games</title>
<style>
:root {
--cell-size: 70px;
--piece-size: 50px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.game-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
padding: 20px;
max-width: 1200px;
width: 100%;
}
.game-board {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.board-grid {
display: grid;
grid-template-columns: repeat(8, var(--cell-size));
border: 2px solid #333;
}
.cell {
width: var(--cell-size);
height: var(--cell-size);
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
transition: background 0.3s;
}
.cell.dark { background: #769656; }
.cell.light { background: #eeeed2; }
.piece {
width: var(--piece-size);
height: var(--piece-size);
border-radius: 50%;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.piece.selected {
transform: scale(1.2);
filter: drop-shadow(0 0 10px gold);
}
.controls {
margin-top: 20px;
display: flex;
gap: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background: #4CAF50;
color: white;
cursor: pointer;
transition: background 0.3s;
}
button:hover { background: #45a049; }
h1 { color: #333; margin-bottom: 30px; }
h2 { color: #666; margin: 0 0 15px 0; }
</style>
</head>
<body>
<h1>Ultimate Board Games</h1>
<div class="game-container">
<div class="game-board" id="chess-container">
<h2>Шахматы</h2>
<div class="board-grid" id="chess-board"></div>
<div class="controls">
<button onclick="chessAI.toggle()">ИИ: Выкл</button>
<button onclick="chessNetwork.toggle()">Онлайн</button>
</div>
</div>
<div class="game-board" id="checkers-container">
<h2>Шашки</h2>
<div class="board-grid" id="checkers-board"></div>
<div class="controls">
<button onclick="checkersAI.toggle()">ИИ: Выкл</button>
<button onclick="checkersNetwork.toggle()">Онлайн</button>
</div>
</div>
</div>
<>
class BoardGame {
constructor(boardId, gameType) {
this.boardElement = .getElementById(boardId);
this.gameType = gameType;
this.state = {
board: [],
currentP : 'white',
selectedPiece: null,
mode: 'local'
};
this.init();
}
init() {
this.createBoard();
this.addEventListeners();
this.updateView();
}
createBoard() {
this.state.board = Array(8).fill().map((_, i) =>
Array(8).fill().map((_, j) => ({
type: null,
color: null,
isKing: false
}))
);
const setup = this.gameType === 'chess' ?
this.chessSetup() :
this.checkersSetup();
setup.forEach((row, i) => row.forEach((cell, j) => {
this.state.board[i][j] = cell;
}));
}
chessSetup() {
return [
this.createRow('black', ['r','n','b','q','k','b','n','r']),
this.createRow('black', Array(8).fill('p')),
...Array(4).fill(this.createRow(null, Array(8).fill(null))),
this.createRow('white', Array(8).fill('P')),
this.createRow('white', ['R','N','B','Q','K','B','N','R'])
];
}
checkersSetup() {
return Array(8).fill().map((_, i) =>
Array(8).fill().map((_, j) => ({
type: (i + j) % 2 ? 'checker' : null,
color: i < 3 ? 'black' : i > 4 ? 'white' : null,
isKing: false
}))
);
}
createRow(color, pieces) {
return pieces.map(p => ({
type: p ? p.toLowerCase() : null,
color: p && p === p.toLowerCase() ? 'black' : 'white',
isKing: false
}));
}
addEventListeners() {
this.boardElement.addEventListener('click', (e) => {
const cell = e.target.closest('.cell');
if (!cell) return;
const x = parseInt(cell.dataset.x);
const y = parseInt(cell.dataset.y);
this.handleClick(x, y);
});
}
handleClick(x, y) {
const piece = this.state.board[x][y];
if (this.state.selectedPiece) {
if (this.isValidMove(this.state.selectedPiece, {x, y})) {
this.movePiece(this.state.selectedPiece, {x, y});
this.nextTurn();
}
this.state.selectedPiece = null;
} else if (piece.color === this.state.currentP ) {
this.state.selectedPiece = {x, y};
}
this.updateView();
}
isValidMove(from, to) {
const dx = to.x - from.x;
const dy = to.y - from.y;
const piece = this.state.board[from.x][from.y];
if (this.gameType === 'chess') {
return this.validateChessMove(piece, dx, dy);
} else {
return this.validateCheckersMove(piece, dx, dy);
}
}
validateChessMove(piece, dx, dy) {
switch(piece.type) {
case 'p': return dy === 0 && (dx === 1 || (dx === 2 && from.x === 1));
case 'r': return dx === 0 || dy === 0;
default: return true;
}
}
validateCheckersMove(piece, dx, dy) {
return Math.abs(dx) === 1 && Math.abs(dy) === 1;
}
movePiece(from, to) {
this.state.board[to.x][to.y] = {...this.state.board[from.x][from.y]};
this.state.board[from.x][from.y] = {type: null, color: null};
if (this.gameType === 'checkers' && (to.x === 0 || to.x === 7)) {
this.state.board[to.x][to.y].isKing = true;
}
}
nextTurn() {
this.state.currentP =
this.state.currentP === 'white' ? 'black' : 'white';
if (this.state.mode === 'ai') {
setTimeout(() => this.aiMove(), 1000);
}
}
updateView() {
this.boardElement.innerHTML = '';
this.state.board.forEach((row, i) => row.forEach((cell, j) => {
const cellDiv = .createElement('div');
cellDiv.className = `cell ${(i + j) % 2 ? 'dark' : 'light'}`;
cellDiv.dataset.x = i;
cellDiv.dataset.y = j;
if (cell.type) {
const piece = .createElement('div');
piece.className = `piece ${cell.color} ${
cell.isKing ? 'king' : ''
} ${
this.state.selectedPiece?.x === i &&
this.state.selectedPiece?.y === j ? 'selected' : ''
}`;
piece.textContent = this.gameType === 'chess' ?
this.getChessSymbol(cell.type, cell.color) : '';
cellDiv.appendChild(piece);
}
this.boardElement.appendChild(cellDiv);
}));
}
getChessSymbol(type, color) {
const symbols = { k: '♔', q: '♕', r: '♖', b: '♗', n: '♘', p: '♙' };
return color === 'white' ? symbols[type] : symbols[type].toLowerCase();
}
}
class GameAI {
constructor(game) {
this.game = game;
this.active = false;
}
toggle() {
this.active = !this.active;
if (this.active) this.makeMove();
}
makeMove() {
const moves = [];
this.game.state.board.forEach((row, i) => row.forEach((cell, j) => {
if (cell.color === this.game.state.currentP ) {
for (let dx = -1; dx <= 1; dx++) {
for (let dy = -1; dy <= 1; dy++) {
if (this.game.isValidMove({x: i, y: j}, {x: i + dx, y: j + dy})) {
moves.push({from: {x: i, y: j}, to: {x: i + dx, y: j + dy}});
}
}
}
}
}));
if (moves.length > 0) {
const move = moves[Math.floor(Math.random() * moves.length)];
setTimeout(() => {
this.game.movePiece(move.from, move.to);
this.game.nextTurn();
}, 1000);
}
}
}
class NetworkManager {
constructor() {
this.connected = false;
}
toggle() {
this.connected = !this.connected;
if (this.connected) this.connect();
}
connect() {
console.log('Connecting to server...');
}
}
// Инициализация при загрузке страницы
const chess = new BoardGame('chess-board', 'chess');
const checkers = new BoardGame('checkers-board', 'checkers');
const chessAI = new GameAI(chess);
const checkersAI = new GameAI(checkers);
const chessNetwork = new NetworkManager();
const checkersNetwork = new NetworkManager();
</>
</body>
</html>
```
Этот файл содержит полную реализацию с:
- Адаптивным дизайном
- Визуализацией шахмат и шашек
- Локальным мультиплеером
- Базовым ИИ
- Сетевой интеграцией (заглушка)
- Анимациями и эффектами
- Интерактивным управлением
Просто сохраните код в файле с расширением `.html` и откройте в браузере. Все функции доступны "из коробки".
Комментарии 0
Пока нет комментариев
Извините, для вас комментирование недоступно
На страницу
Гостей: 17