Хватит теории – пора практиковаться! Мы разберем создание полноценной браузерной игры, затрагивая ключевые концепции frontend-разработки. Идеально для новичков, жаждущих применить свои знания в реальном проекте.
Откроем файл style.css. Начнем с установки основных стилей для игрового поля:
Здесь мы:
Устанавливаем основной шрифт всей страницы. В данном случае это Arial.
Настраиваем стили так, чтобы центрировать все содержимое по вертикали.
Растягиваем страницу на всю высоту экрана.
Убираем внешние отступы.
Добавляем фоновый градиент.
Устанавливаем основной цвет текста.
Сохраните style.css и обновите страницу в браузере. Вы должны увидеть четко оформленное интерактивное игровое поле.
Адаптивный дизайн
Для корректного отображения на всех устройствах добавьте элементы адаптивного дизайна. Используйте @-правило@media в CSS:
@media (max-width: 600px) корректирует размер ячеек и сетки на экранах меньше 600 пикселей, делая игру удобной на мобильных устройствах.
.cell { выбирает все элементы с классом "cell".
width: 60px; и height: 60px; устанавливают ширину и высоту каждой ячейки в 60 пикселей. Это уменьшает размер ячеек для маленьких экранов.
grid-template-columns: repeat(3, 60px); задает три колонки в сетке, каждая шириной 60 пикселей.
grid-template-rows: repeat(3, 60px); задает три строки в сетке, каждая высотой 60 пикселей.
Разработка игровой логики
На этом этапе мы создадим логику игры:
Обработаем ходы игроков.
Определим условия победы.
Настроим сброс игры после ее завершения.
Инициализация состояния игры
Откройте файл script.js. Сначала нужно создать переменные для отслеживания состояния игры. Это включает псевдоним текущего игрока, состояние игрового поля и статус игры (выиграна или продолжается).
Эти строки кода задают базовые переменные:
currentPlayer будет чередоваться между игроками 'X' и 'O'.
На этом этапе мы поднимем нашу игру на новый уровень, реализовав взаимодействие с игроками.
В файле script.js добавим слушателя событий к каждой ячейке игрового поля. Сначала выберем все элементы ячеек.
Теперь добавим слушателя событий к каждой ячейке. Этот слушатель будет вызывать функцию cellClicked при клике на ячейку.
Обработка кликов по ячейкам
Создадим функцию cellClicked для обработки логики при клике на ячейку. Она проверит индекс ячейки, обновит состояние игры и обновит интерфейс.
В этой функции мы:
Получаем ID ячейки, по которой кликнул игрок.
Проверяем, не занята ли уже ячейка и активна ли игра.
Вызываем handlePlayerTurn для обновления состояния игры и updateUI для отображения изменений на доске.
Обновление пользовательского интерфейса
После каждого хода нужно обновлять игровую доску, чтобы показать ходы игроков. Напишем функцию updateUI. Эта функция обновляет каждую ячейку соответствующим значением из массива gameBoard, отображая X и O на доске.
Тестирование
Откройте игру в веб-браузере и кликайте по разным ячейкам. Проверьте, правильно ли обновляется состояние игры и отражает ли интерфейс ходы игроков.
Также убедитесь, что игра не позволяет перезаписывать уже занятую ячейку.
Реализация условия победы
На этом этапе мы напишем код для проверки условий победы после каждого хода. Также добавим отображение сообщений о победе игрока или ничьей.
Выигрышные комбинации
Сначала определим возможные выигрышные комбинации . Представим их как массив массивов. Каждый внутренний массив будет представлять выигрышную линию (ряд, столбец или диагональ).
Проверка на победу или ничью
Теперь нужна функция для проверки после каждого хода: победил ли текущий игрок или игра завершилась вничью. Будем вызывать эту функцию после каждого хода в функции handlePlayerTurn.
В этой функции мы:
Проверяем каждое условие победы на наличие выигрышной комбинации у текущего игрока.
Объявляем победителя, если найдена выигрышная комбинация.
Проверяем на ничью, если не осталось свободных ячеек и нет победителя.
Объявление победителя и обработка ничьей
Теперь напишем функции для отображения сообщений о победе игрока или ничьей.
Сначала добавим новый div в HTML для отображения игровых сообщений.
Добавим также стили в CSS-файл.
Теперь займемся JavaScript-функциями.
Эти функции обновят интерфейс, чтобы информировать игроков о результате игры.
Добавление функции сброса игры
Полноценная игра «Крестики-нолики» должна позволять игрокам начать заново после завершения партии. Это может быть после победы, ничьей или просто по желанию игроков.
Cоздадим функцию для сброса игры. Она очистит доску и сбросит все необходимые переменные и позволит игрокам начать новую игру без перезагрузки страницы.
Добавление кнопки сброса
В HTML файле добавьте кнопку сброса:
Затем в script.js добавьте слушатель событий для этой кнопки:
Этот код выбирает кнопку сброса и присоединяет к ней слушатель событий. При нажатии кнопки вызывается функция resetGame.
Также добавим CSS-стили для новой кнопки:
Готово.
Полный код
HTML
CSS
JavaScript
***
Если ты задумываешься о том, чтобы освоить веб-разработку, курс Frontend Basic – это то, что тебе нужно:
Изучишь HTML, CSS и JavaScript с нуля.
Создашь свой первый интернет-магазин, применяя полученные знания.
Освоишь работу с Git и GitHub – важные инструменты для разработчиков.
Получишь навыки адаптивной верстки, чтобы сайты выглядели отлично на всех устройствах.
Сформируешь портфолио, которое поможет в поиске работ.
Комментарии