Крестики-нолики – популярная настольная игра. Если вы хотите научиться создавать игры с использованием языка JavaScript, то разработка игры «Крестики-Нолики» с ботом может быть отличным началом. В этой статье мы рассмотрим, как создать простую версию игры «Крестики-Нолики» на JavaScript с встроенным ботом в качестве противника. Мы научимся создавать игровое поле, обрабатывать ходы игроков и бота, а также проверять победу или ничью.
В этой версии игры добавлен простой бот, который случайным образом выбирает свободную ячейку и делает ход за «O». Ходы бота осуществляются с небольшой задержкой (500 миллисекунд) для создания иллюзии игры против реального соперника. Если игрок победил или наступила ничья, выводится соответствующее сообщение.
Я представлю вам код игры змейка на JS с подробными комментариями, вы можете скопировать его и поэкспериментировать.
HTML
<h1>Крестики-нолики</h1>
<div class="board"></div>
CSS
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body {
background: linear-gradient(45deg, #08041d, #200852);
background-attachment: fixed;
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
}
h1 {
margin-top: 50px;
margin-bottom: 50px;
color: #fff;
}
.board {
display: flex;
flex-wrap: wrap;
width: 300px;
border: 3px solid #3db1ff;
box-shadow: 0 0 100px 1px #3db1ff;
}
.board .cell {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 3px solid #3db1ff;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
cursor: pointer;
}
JavaScript
// Создаем игровое поле
const board = document.querySelector(".board");
const cells = [];
let currentPlayer = "X";
let gameOver = false;
// Создаем ячейки на игровом поле
for (let i = 0; i < 9; i++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cells.push(cell);
board.appendChild(cell);
// Обработчик клика по ячейке
cell.addEventListener("click", () => {
if (cell.textContent === "" && currentPlayer === "X" && !gameOver) {
cell.textContent = currentPlayer;
cell.style.cursor = "not-allowed";
if (checkWin(currentPlayer)) {
alert("Игрок " + currentPlayer + " победил!");
gameOver = true;
} else if (checkDraw()) {
alert("Ничья!");
gameOver = true;
} else {
currentPlayer = "O";
setTimeout(makeBotMove, 500);
}
}
});
}
// Ход бота
function makeBotMove() {
const emptyCells = cells.filter((cell) => cell.textContent === "");
if (emptyCells.length > 0 && currentPlayer === "O") {
const randomIndex = Math.floor(Math.random() * emptyCells.length);
const botCell = emptyCells[randomIndex];
botCell.textContent = currentPlayer;
botCell.style.cursor = "not-allowed";
if (checkWin(currentPlayer)) {
alert("Игрок " + currentPlayer + " победил!");
gameOver = true;
} else if (checkDraw()) {
alert("Ничья!");
gameOver = true;
} else {
currentPlayer = "X";
}
}
}
// Проверка победы
function checkWin(player) {
const winCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8], // горизонтальные линии
[0, 3, 6],
[1, 4, 7],
[2, 5, 8], // вертикальные линии
[0, 4, 8],
[2, 4, 6], // диагональные линии
];
return winCombinations.some((combination) => {
return combination.every((index) => cells[index].textContent === player);
});
}
// Проверка ничьей
function checkDraw() {
return cells.every((cell) => cell.textContent !== "");
}
Идеи для улучшения игры
- Анимации: Добавьте анимации при установке крестика или нолика, чтобы сделать игру более интерактивной и зрелищной.
- Счетчик побед: Выводите на экран счетчик побед для каждого игрока, чтобы игроки могли отслеживать свои результаты.
- Уровни сложности для бота: Реализуйте несколько уровней сложности для бота. Например, начальный уровень может делать случайные ходы, а более высокий уровень может использовать стратегию для победы или блокировки игрока.
- Адаптивный дизайн: Сделайте игру адаптивной, чтобы она выглядела и работала хорошо на разных устройствах, таких как мобильные телефоны и планшеты.
- История ходов: Добавьте функцию, которая сохраняет и отображает историю ходов игры, чтобы игроки могли просмотреть, как развивалась игра.
- Многопользовательский режим: Реализуйте возможность игры с другими игроками онлайн через интернет.
- Персонализация: Позвольте игрокам выбирать символы (например, крестик и нолик) или настраивать внешний вид игрового поля.
- Улучшенный UI: Создайте более привлекательный пользовательский интерфейс с использованием графических элементов, цветовой схемы и анимаций.
- Звуковые эффекты: Добавьте звуковые эффекты при установке символов или при объявлении победы.
[…] нашем сайте есть статья про то, как создать игру «Крестики-Нолики» на […]