Крестики-нолики — популярная игра, в которой используется сетка 3×3. Цель игры — стать первым игроком, который разместит три символа в прямой горизонтальный, вертикальный или диагональный ряд.
Вы можете создать игру «Крестики-нолики», которая запускается в веб-браузере с использованием HTML, CSS и JavaScript. Вы можете использовать HTML, чтобы добавить содержимое, содержащее сетку 3×3, и CSS, чтобы добавить стиль к дизайну игры.
Затем вы можете использовать JavaScript для функциональности игры. Это включает в себя размещение символов, смену игроков и определение победителя.
Как создать пользовательский интерфейс для игры в крестики-нолики
Вы можете прочитать и скачать полный исходный код этой игры с его Репозиторий GitHub.
Крестики-нолики — одна из многих игр, которые вы можете сделать, когда учитесь программировать. Хорошо практиковать новый язык или среду, например движок разработки игр PICO-8.
Чтобы создать игру «Крестики-нолики», которая запускается в веб-браузере, вам потребуется добавить HTML для содержимого страницы. Затем вы можете стилизовать это с помощью CSS.
- Создайте новый файл с именем «index.html».
- Внутри «index.html» добавьте базовую структуру HTML-файла:
HTML>
<HTMLязык="en-США">
<голова>
<заголовок>Крестики-ноликизаголовок>
голова>
<тело>
тело>
HTML> - Внутри HTML-тега body добавьте таблицу, содержащую три строки, по три ячейки в каждой строке:
<дивсорт="контейнер">
<стол>
<тр>
<тдидентификатор="1">тд>
<тдидентификатор="2">тд>
<тдидентификатор="3">тд>
тр>
<тр>
<тдидентификатор="4">тд>
<тдидентификатор="5">тд>
<тдидентификатор="6">тд>
тр>
<тр>
<тдидентификатор="7">тд>
<тдидентификатор="8">тд>
<тдидентификатор="9">тд>
тр>
стол>
див> - В той же папке, что и ваш HTML-файл, создайте новый файл с именем «styles.css».
- Внутри файла CSS добавьте стиль к сетке 3 на 3:
стол {
обрушение границы: крах;
допуск: 0 авто;
}тд {
ширина: 100пикс.;
высота: 100пикс.;
выравнивание текста: центр;
вертикальное выравнивание: середина;
граница: 1пикс.твердыйчерный;
} - Свяжите файл CSS с вашим файлом HTML, добавив его в тег head:
<связьотн.="таблица стилей"тип="текст/CSS"href="стили.css">
Как по очереди добавлять символы на игровое поле
В игре будет два игрока, у каждого из которых есть символ «X» или «O». Вы можете добавить символ «X» или «O», щелкнув одну из ячеек сетки. Это будет продолжаться до тех пор, пока один из вас не создаст прямой горизонтальный, вертикальный или диагональный ряд.
Вы можете добавить эту функциональность с помощью JavaScript.
- В той же папке, что и файлы HTML и CSS, создайте файл JavaScript с именем «script.js».
- Свяжите файл JavaScript с вашим HTML-файлом, добавив скрипт в конец тега body:
<тело>
Ваш код здесь
<сценарийисточник="скрипт.js">сценарий>
тело> - Внутри файла JavaScript добавьте строку, представляющую символ игрока. Это может быть либо «Х», либо «О». По умолчанию первый игрок ставит «X»:
позволять символ игрока = "ИКС"; - Добавьте еще одну переменную, чтобы отслеживать, закончилась ли игра:
позволять играЗавершена = ЛОЖЬ - Каждая ячейка в таблице HTML имеет идентификатор от 1 до 9. Для каждой ячейки в таблице добавьте прослушиватель событий, который будет запускаться всякий раз, когда пользователь щелкает ячейку:
для (позволять я = 1; я <= 9; я++) {
документ.getElementById (i.toString()).addEventListener(
"щелкнуть",
функция() {
}
);
} - Внутри прослушивателя событий измените внутренний HTML, чтобы отобразить текущий символ. Обязательно используйте условное выражение JavaScript чтобы сначала убедиться, что ячейка пуста, и что игра еще не закончилась:
если (этот.innerHTML "" && !gameEnded) {
этот.innerHTML = символ игрока;
} - Добавьте класс к элементу HTML, чтобы стилизовать символ, который будет отображаться в сетке. Имя классов CSS будет либо «X», либо «O», в зависимости от символа:
этот.classList.add(playerSymbol.toLowerCase()); - В файле «styles.css» добавьте эти два новых класса для символов «X» и «O». Символы «X» и «O» будут отображаться разными цветами:
.Икс {
цвет: синий;
размер шрифта: 80пикс.;
}.о {
цвет: красный;
размер шрифта: 80пикс.;
} - В файле JavaScript после изменения innerHTML для отображения символа поменяйте местами символ. Например, если игрок только что поставил «X», измените следующий символ на «O»:
если (playerSymbol "ИКС")
символ игрока = "О"
еще
символ игрока = "ИКС" - Чтобы запустить игру, откройте файл «index.html» в веб-браузере, чтобы отобразить сетку 3 на 3:
- Начните размещать символы на сетке, нажимая на ячейки. В игре будут чередоваться символы «X» и «O»:
Как определить победителя
На данный момент игра продолжится, даже если игрок поставил три последовательных символа. Вам нужно будет добавить конечное условие, чтобы проверять это после каждого хода.
- Внутри вашего файла JavaScript добавьте новую переменную для хранения всех возможных «выигрышных» позиций для сетки 3 на 3. Например, «[1,2,3]» — это верхняя строка, а «[1,4,7]» — диагональная строка.
позволять выигрышПос = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Добавьте новую функцию с именем checkWin():
функцияпроверитьВыигрыш() {
} - Внутри функции прокрутите каждую из возможных выигрышных позиций:
для (позволять я = 0; я < winPos.length; я++) {} - Внутри цикла for проверьте, все ли ячейки содержат символ игрока:
если (
документ.getElementById (winPos[i][0]).innerHTML playerSymbol &&
документ.getElementById (winPos[i][1]).innerHTML playerSymbol &&
документ.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Если условие оценивается как истинное, то все символы находятся на прямой линии. Внутри оператора if отобразите сообщение для пользователя. Вы также можете изменить стиль элемента HTML, добавив класс CSS с именем «win»:
документ.getElementById (winPos[i][0]).классСписок.добавить("победить");
документ.getElementById (winPos[i][1]).классСписок.добавить("победить");
документ.getElementById (winPos[i][2]).классСписок.добавить("победить");
играЗавершена = истинный;установить время ожидания (функция() {
оповещение (playerSymbol + "выигрывает!");
}, 500); - Добавьте этот CSS-класс «win» в файл «styles.css». Когда игрок выигрывает, он меняет цвет фона выигрышных ячеек на желтый:
.победить {
фоновый цвет: желтый;
} - Вызовите функцию checkWin() каждый раз, когда у игрока есть ход, внутри обработчика событий, добавленного на предыдущих шагах:
для (позволять я = 1; я <= 9; я++) {
// Всякий раз, когда игрок нажимает на ячейку
документ.getElementById (i.toString()).addEventListener(
"щелкнуть",
функция() {
если (этот.innerHTML "" && !gameEnded) {
// Отобразить в ячейке «X» или «O» и присвоить ей стиль
этот.innerHTML = символ игрока;
этот.classList.add(playerSymbol.toLowerCase());
// Проверяем, выиграл ли игрок
проверитьВыигрыш();
// Поменять символ на другой на следующий ход
если (playerSymbol "ИКС")
символ игрока = "О"
еще
символ игрока = "ИКС"
}
}
);
}
Как сбросить игровое поле
Как только игрок выиграл игру, вы можете сбросить игровое поле. Вы также можете сбросить игровое поле в случае ничьей.
- В файле HTML после таблицы добавьте кнопку сброса:
<кнопкаидентификатор="перезагрузить">Перезагрузитькнопка> - Добавьте стиль к кнопке сброса:
.контейнер {
отображать: сгибаться;
flex-направление: столбец;
}#перезагрузить {
допуск: 48пикс. 40%;
набивка: 20пикс.;
} - В файле JavaScript добавьте обработчик событий, который будет запускаться всякий раз, когда пользователь нажимает кнопку сброса:
документ.getElementById("перезагрузить").addEventListener(
"щелкнуть",
функция() {}
); - Для каждой ячейки сетки получите элемент HTML с помощью функции getElementById(). Сбросьте innerHTML, чтобы удалить символы «O» и «X», и удалите все остальные стили CSS:
для (позволять я = 1; я <= 9; я++) {
документ.getElementById (i.toString()).innerHTML = "";
документ.getElementById (i.toString()).classList.remove("Икс");
документ.getElementById (i.toString()).classList.remove("о");
документ.getElementById (i.toString()).classList.remove("победить");
играЗавершена = ЛОЖЬ;
} - Запустите игру, открыв файл index.html в веб-браузере.
- Начните размещать символы «X» и «O» на сетке. Попробуйте сделать так, чтобы один из символов выиграл.
- Нажмите кнопку сброса, чтобы сбросить игровое поле.
Изучаем JavaScript, создавая игры
Вы можете продолжать совершенствовать свои навыки программирования, создавая больше проектов на JavaScript. Легко создавать простые игры и инструменты в веб-среде, используя кросс-платформенные открытые технологии, такие как JavaScript и HTML.
Нет лучшего способа улучшить свое программирование, чем практиковаться в написании программ!
