Чтобы помочь игроку, на каждом открытом квадрате отображается число, указывающее на количество соседних квадратов, содержащих мины. Используя эти числа и логический вывод, игрок может определить расположение мин и отметить их флажками. Игра считается выигранной, когда все квадраты, не содержащие мины, открываются, но теряются при подрыве мины.
«Сапер» стал популярным благодаря своему простому и не сложному игровому процессу, и он был включен во многие версии операционной системы Microsoft Windows. С тех пор игра была адаптирована для различных платформ и остается популярной и по сей день.
К концу этого урока у вас будет полностью функционирующая игра, в которую вы сможете играть и делиться ею с другими. Это руководство предназначено для начинающих с базовыми знаниями HTML, CSS и JavaScript. Мы предоставим пошаговые инструкции и включим скриншоты и фрагменты кода, чтобы помочь вам лучше понять процесс. Кроме того, для написания и сохранения кода вам понадобится редактор кода — например, Visual Studio Code или Sublime Text.
Все файлы к уроку (код) вы найдете в конце статьи.
Исходный код
Шаг 1 (HTML-код)
Для начала вам нужно создать базовый HTML-файл. В этот документ мы включим основную структуру нашей игры «Сапер».
После создания файлов просто вставьте следующие коды в свой документ. Обязательно сохраните HTML-документ с расширением .html, чтобы его можно было правильно просматривать в веб-браузере.
- Документ начинается с объявления, которое сообщает браузеру, какой тип документа он читает (в данном случае документ HTML5).
- Тег «html» содержит два атрибута: «lang», который устанавливает русский язык документа, и «head», содержащий метаданные о документе — такие, как заголовок, набор символов и область просмотра.
- Тег «title» внутри тега «head» устанавливает название страницы как «Игра Сапёр». Метатег устанавливает набор символов в UTF-8 и область просмотра в ширину используемого устройства.
- Теги ссылок используются для импорта внешних таблиц стилей. Первая ссылка импортирует шрифт «Roboto Mono» из Google Fonts. Вторая ссылка импортирует пользовательскую таблицу стилей с именем «style.css», которая используется для стилизации HTML-элементов в документе.
- Тег заголовка «h1» создает баннер в верхней части страницы, содержащий название игры и легенду, поясняющую, как пометить мину.
- Основной тег «body» содержит игровое поле и его компоненты. Игровое поле содержится в теге «div» с классом «container». Игровое поле состоит из двух основных разделов: верхний раздел содержит табло, селектор уровней и таймер, а нижний раздел в настоящее время пуст.
- Тег «div» с классом «flag-box» содержит счетчик шахт, селектор уровня, кнопку сброса и таймер. Счетчик мин и таймер отображаются в виде чисел, которые обновляются по ходу игры. Кнопка сброса — это смайлик, который позволяет игроку начать новую игру.
- Тег «div» с классом «grid» будет содержать реальную игровую сетку, заполненную квадратами, которые могут содержать или не содержать мины.
- Наконец, тег «script» в конце документа импортируют файл JS с именем «script.js», который содержит игровую логику и функциональные возможности.
Это базовая структура нашей игры «Сапер» с использованием HTML, и теперь мы можем перейти к ее стилизации с помощью CSS.
Шаг 2 (код CSS)
Когда базовая HTML-структура игры «Minesweeper» создана, следующим шагом будет добавление стилей к игре с помощью CSS. CSS позволяет нам контролировать внешний вид веб-сайта, включая такие вещи, как макет, цвет и типографика.
Далее вам необходимо создать файл CSS. В этом документе мы будем использовать некоторые основные правила CSS для создания игрового поля «Сапер».
- Селектор «*» применяет свойства margin и padding к каждому элементу на странице, обнуляя их отступы и границу, а не просто поле с его содержимым.
- Селекторы «html» и «body» устанавливают для страницы шрифт Roboto Mono, внешние отступы и границы в 30 пикселей и градиентный фон страницы (background: linear-gradient) в синих оттенках.
- Селекторы «.title» и «.container» определяют стили для контейнеров и текстовых описаний.
- Селектор «.top» устанавливает стили для элемента таблицы результатов, включая раскрывающийся список выбора и кнопку сброса.
- Селектор «grid» устанавливает стили для сетки, с которой взаимодействует пользователь, чтобы играть в игру. Он определяет стили для каждой ячейки сетки, включая ее размер, границу и содержимое. Он также устанавливает стили для отключенного состояния сетки и для условий выигрыша или проигрыша.’
Этот код придаст вашей игре «Сапёр» улучшенное представление. Создайте файл CSS с именем styles.css и вставьте данные строки кода в свой документ CSS. Помните, что вы должны создать файл с расширением .css.
Шаг 3 (код JavaScript)
Наконец, нам нужно создать функцию JavaScript, которая определяет игру Minesweeper, реализованную с использованием jQuery.
- Код инициализирует игру, создавая сетку ячеек и случайным образом размещая мины внутри сетки.
- Код начинается с определения функции «document.addEventListener», которая кэширует некоторые часто используемые элементы DOM, включая игровое поле, таймер, счетчик шахт и селектор уровней. Он также настраивает игру, определяя различные уровни сложности и количество мин для каждого уровня.
- Затем функция «function createBoard()» устанавливает параметры игрового поля, включая количество строк и столбцов, количество ячеек в сетке и количество мин.
- Функция «for (let i = 0; i < width * width; i++)» добавляет цифры в квадраты.
- Функция «function addFlag(square)» добавляет флаг при щелчке правой кнопкой мыши
- Функция «function click(square)» открывает свободные от мин квадратики.
- «function checkSquare(square, currentId)» проверяет соседние квадраты после щелчка по выбранному квадрату и создает эффект раскрытия.
- Функция «let startTime = function()» выполняет роль таймера.
- «function gameOver(square)» инициализирует конец игры при нажатии на квадрат с миной.
- «function checkForWin()» инициализирует финал при победе игрока.
- Функция «emojiBtn.addEventListener(‘click’, function(e)» перезапустит игру при нажатии на кнопку с эмодзи.
Создайте документ JavaScript с именем script.js, вставьте код в ваш файл JS и убедитесь, что он правильно связан с вашим HTML-документом, чтобы сценарии выполнялись на странице. Помните, что вы должны создать файл с расширением .js.
Окончательный результат:
Заключение
Поздравляем, вы только что успешно создали собственную игру «Сапёр»! В этом руководстве мы провели вас через процесс настройки проекта, оформления игрового поля, добавления игровой логики с помощью JavaScript, тестирования и доработки игры, а также ее развертывания в сети.
Создание такой игры, как Minesweeper, требует глубокого понимания HTML, CSS и JavaScript, и мы надеемся, что это руководство помогло вам лучше понять технологии веб-разработки. Мы призываем вас продолжать изучать и экспериментировать с этими технологиями, чтобы создавать более интересные и интерактивные веб-проекты.
Помните, что важно тщательно протестировать и доработать вашу игру, прежде чем размещать ее в сети. Это гарантирует, что ваша игра будет работать именно так, как было задумано, и доставит удовольствие игрокам.
Мы надеемся, что вы получили удовольствие от создания своей собственной игры «Сапер» и по ходу дела узнали что-то новое. Благодарим вас за то, что следовали этому руководству, и желаем вам удачи в ваших будущих проектах веб-разработки! При желании вы можете скачать файлы урока по ссылке ниже.
