Крестики-нолики — это популярная настольная игра, в которой два игрока пытаются заполнить линию из трех своих символов (крестиков или ноликов) горизонтально, вертикально или по диагонали. В этой статье мы рассмотрим создание игры "Крестики-нолики" с использованием языка программирования JavaScript.
Перед тем как приступить к JavaScript-коду, создадим HTML-разметку для игрового поля и ячеек.
<!DOCTYPE html>
<html>
<head>
<title>Крестики-нолики</title>
<style>
.cell {
width: 50px;
height: 50px;
border: 1px solid #000;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Крестики-нолики</h1>
<div id="board"></div>
<script>
// JavaScript-код будет здесь
</script>
</body>
</html>В разметке мы определили заголовок h1, который называется "Крестики-нолики", и div с идентификатором "board", который будет содержать игровое поле. Мы также добавили стили для ячеек игрового поля.
Теперь давайте приступим к JavaScript-коду. Наша задача - создать игровое поле и определить логику игры.
// Создаем игровое поле
var board = document.getElementById("board");
var cells = [];
var currentPlayer = "X";
var gameFinished = false;
function createBoard() {
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var cell = document.createElement("div");
cell.className = "cell";
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener("click", cellClickHandler);
board.appendChild(cell);
cells.push(cell);
}
board.appendChild(document.createElement("br"));
}
}
// Обработчик клика по ячейке
function cellClickHandler() {
if (gameFinished) return;
if (this.textContent !== "") return;
this.textContent = currentPlayer;
checkWin();
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
// Проверка на победу
function checkWin() {
var winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // горизонтальные
[0, 3, 6], [1, 4, 7], [2, 5, 8], // вертикальные
[0, 4, 8], [2, 4, 6] // диагонали
];
for (var i = 0; i < winningCombinations.length; i++) {
var combination = winningCombinations[i];
var a = combination[0];
var b = combination[1];
var c = combination[2];
if (
cells[a].textContent !== "" &&
cells[a].textContent === cells[b].textContent &&
cells[a].textContent === cells[c].textContent
) {
gameFinished = true;
cells[a].style.backgroundColor = "#0f0";
cells[b].style.backgroundColor = "#0f0";
cells[c].style.backgroundColor = "#0f0";
setTimeout(function () {
alert("Игра окончена. Победил игрок " + currentPlayer);
}, 100);
return;
}
}
var isDraw = true;
for (var i = 0; i < cells.length; i++) {
if (cells[i].textContent === "") {
isDraw = false;
break;
}
}
if (isDraw) {
gameFinished = true;
setTimeout(function () {
alert("Игра окончена. Ничья!");
}, 100);
}
}
// Запуск игры
createBoard();В этом коде мы добавили обработчик события для клика по ячейке cellClickHandler. Внутри этой функции мы проверяем, завершена ли игра или ячейка уже заполнена. Если условия выполняются, мы помещаем символ текущего игрока в ячейку, вызываем функцию checkWin() для проверки на победу и переключаем текущего игрока на следующего.
В функции checkWin() мы проверяем все возможные выигрышные комбинации. Если одна из комбинаций совпадает (три одинаковых символа подряд), игра считается завершенной. Ячейкам, образующим выигрышную комбинацию, добавляется зеленый фон. Затем выводится сообщение с информацией о победителе.
Если все ячейки заполнены и нет выигрышной комбинации, игра заканчивается ничьей.
Наконец, мы вызываем функцию createBoard() для создания игрового поля при загрузке страницы.
Вот и вся статья о создании игры "Крестики-нолики" на JavaScript. Надеюсь, она была полезной! Вы можете использовать этот код как отправную точку и дополнить его или настроить под свои потребности. Удачи в создании вашей игры "Крестики-нолики"!
Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!
Написать коментарий