Статья: Как создать адаптивную игру "Крестики-Нолики" с настраиваемым количеством ячеек для победы
В данной статье мы рассмотрим, как создать веб-игру "Крестики-Нолики" с возможностью настройки размера поля и количества подряд идущих ячеек, которые необходимы для победы. Мы также добавим базовую стратегию для игры против компьютера, который может "обучаться" на предыдущих играх и делать более разумные ходы.
Основные особенности игры:
- Изменяемый размер поля: Пользователь может выбрать размер игрового поля от 3x3 до 100x100 клеток.
- Настроечное количество ячеек для победы: Игрок может установить количество подряд идущих клеток, которое приведет к победе, в пределах от 3 до 100.
- Игра против компьютера: Вторым игроком в игре является компьютер или игрок "0", который использует простую стратегию выбора ходов, улучшая их по мере игры.
1. Структура проекта
Проект состоит из HTML, CSS и JavaScript. HTML отвечает за структуру игры, CSS - за стиль и внешний вид, а JavaScript - за логику игры и взаимодействие с пользователем.
HTML
HTML создает основу игры, включая элементы управления для настройки размера поля и длины победной линии, а также место для отображения самого игрового поля. Важно отметить, что в HTML есть два элемента ввода:
- Размер поля: Определяет количество строк и столбцов.
- Длина победной линии: Позволяет пользователю задать количество подряд идущих ячеек, необходимых для победы.
<label for="size">Board Size:</label>
<input type="number" id="size" min="3" max="100" value="3">
<label for="winLength">Win Length:</label>
<input type="number" id="winLength" min="3" max="100" value="3">
<button onclick="startGame()">Start Game</button>
CSS
CSS отвечает за внешний вид игры, создавая сетку для игрового поля, стилизуя клетки и кнопки управления. Для каждой клетки игры мы создаем стиль, который делает её доступной для взаимодействия, и обновляем вид клеток в зависимости от состояния игры.
.board {
display: grid;
margin: 20px auto;
gap: 0;
grid-template-columns: repeat(${boardSize}, 50px);
grid-template-rows: repeat(${boardSize}, 50px);
justify-items: center;
align-items: center;
}
.cell {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
background-color: #f9f9f9;
border: 1px solid #000;
cursor: pointer;
box-sizing: border-box;
}
JavaScript
JavaScript реализует всю логику игры. Он обрабатывает ход игрока и компьютера, отслеживает историю ходов, а также проверяет условия победы.
1. Инициализация игры
При запуске игры создаются основные элементы: игровое поле и кнопки управления. Размер поля и количество ячеек для победы устанавливаются через интерфейс.
function startGame() {
boardSize = parseInt(document.getElementById('size').value);
winLength = parseInt(document.getElementById('winLength').value);
board = Array(boardSize).fill().map(() => Array(boardSize).fill(""));
currentPlayer = "X";
movesHistory = [];
winningMoves = [];
renderBoard();
}
2. Отображение игрового поля
Для отображения поля используется HTML-сетка. Каждая клетка представляет собой div элемент, который можно кликнуть для выполнения хода. Мы обновляем поле после каждого хода.
function renderBoard() {
const gameContainer = document.getElementById('game');
gameContainer.innerHTML = '';
const grid = document.createElement('div');
grid.className = 'board';
grid.style.gridTemplateColumns = `repeat(${boardSize}, 50px)`;
grid.style.gridTemplateRows = `repeat(${boardSize}, 50px)`;
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = i;
cell.dataset.col = j;
cell.textContent = board[i][j];
cell.onclick = () => playerMove(i, j);
grid.appendChild(cell);
}
}
gameContainer.appendChild(grid);
}
3. Логика ходов
Игрок и компьютер поочередно делают ходы. Когда игрок кликает на клетку, проверяется, не занята ли она, и затем ход записывается в игровое поле. После этого ход делает компьютер. Чтобы игра была интересной, компьютер использует простую стратегию выбора ходов и улучшает её по мере игры.
function playerMove(row, col) {
if (board[row][col] !== "") return;
board[row][col] = currentPlayer;
movesHistory.push({ player: currentPlayer, row, col });
if (checkWinner(currentPlayer)) {
alert(`${currentPlayer} wins!`);
startGame();
return;
}
currentPlayer = "O";
renderBoard();
setTimeout(computerMove, 500);
}
4. Проверка победы
Для проверки победы используется функция checkWinner, которая анализирует строки, столбцы и диагонали на наличие необходимого количества подряд идущих ячеек. Значение winLength позволяет настроить длину победной линии.
function checkWinner(player) {
// Проверка строк, столбцов и диагоналей на наличие победной линии
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j <= boardSize - winLength; j++) {
if (board[i].slice(j, j + winLength).every(cell => cell === player)) {
return true;
}
}
}
for (let j = 0; j < boardSize; j++) {
for (let i = 0; i <= boardSize - winLength; i++) {
if (board.slice(i, i + winLength).every(row => row[j] === player)) {
return true;
}
}
}
for (let i = 0; i <= boardSize - winLength; i++) {
for (let j = 0; j <= boardSize - winLength; j++) {
if (Array.from({ length: winLength }, (_, k) => board[i + k][j + k]).every(cell => cell === player)) {
return true;
}
if (Array.from({ length: winLength }, (_, k) => board[i + k][j + winLength - 1 - k]).every(cell => cell === player)) {
return true;
}
}
}
return false;
}
5. Заключение
В результате, мы получаем гибкую и увлекательную игру "Крестики-Нолики", где пользователь может изменять размер поля и количество подряд идущих ячеек, необходимых для победы. Компьютер также имеет возможность обучаться, улучшая свою стратегию по мере игры.
Это простая, но мощная основа для создания более сложных игр с улучшенными алгоритмами и возможностями настройки.
Сама игра доступна по ссылке: https://sergsergius.ru/tic-tac-toe-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd/