Создаём игру «Пятнашки» в C++/SFML

  Дмитрий Бушуев  | 

  Обновл. 15 Фев 2020  | 

 3221

В этом уроке мы рассмотрим создание игры «Пятнашки» в С++ с помощью графической библиотеки SFML.

Введение

Пятнашки — это механическая игра-головоломка, которая была изобретена в 1878 году почтмейстером из Канасоты (деревня в штате Нью-Йорк, США) Ноем Чепменом. И хотя официальной датой создания игры значится именно 1878 год, первый вариант своей головоломки Ной продемонстрировал в кругу друзей ещё за 4 года до этого.

Уже в 1880 году игра приобрела колоссальную популярность, а спустя всего лишь несколько месяцев в неё уже вовсю играли жители таких стран, как: Эстония, Норвегия, Швеция, Австрия, Латвия, Германия, Англия, Австралия, Дания, Мексика, Италия, Нидерланды и Новая Зеландия.

Её раскупали миллионными партиями, часто люди забывали про еду и сон. Из-за этого, на некоторых предприятиях был введен запрет на «Пятнашки». Впоследствии у этого явления даже появилось название «Пятнашечное» сумасшествие.

Стоит отметить, что на данный момент головоломка «Пятнашки» занимает третье место в мире по популярности после Пазлов и Кубика Рубика.

Описание игры и её правила


В классическом варианте исполнения игра «Пятнашки» представляет собой квадратное поле размером 4х4 клетки с 15 квадратными подвижными элементами, на которые нанесены числа от 1 до 15, и одной свободной ячейкой. Цель игры состоит в том, чтобы, перемещая элементы в горизонтальном или вертикальном направлениях, выстроить числа в правильной последовательности (1, 2, 3, 4 и т.д.).


Приступаем к разработке

Я уже неоднократно об этом говорил (а повторение, как известно, — мать учения), что практически любое SFML-приложение можно начать с нижеследующего минимального каркаса:

Далее нам нужно создать переменную текстуры и загрузить для неё файл PNG-изображения, которое содержит графическое представление элементов игры (квадраты с нанесенными на них числами от 1 до 15):

Примечание: Файл с PNG-изображением для текстуры вы можете найти в конце статьи в архиве с исходным кодом (папка «images») данного примера. 

Как уже отмечалось выше, «Пятнашки» состоят из  15 подвижных элементов с числами (далее — «блоки») и 1 пустой ячейки, расположенных в 4 строках и 4 столбцах игрового поля. В нашем случае размер одного такого блока определим в 64х64 пикселя.

Так как всего будет 16 блоков, то для их графического представления нам потребуется массив из 17 спрайтов. Как вы знаете, в С++ нумерация элементов массива начинается с 0, но т.к. числа на наших блоках начинаются с 1, то для простоты используем массив не из 16 спрайтов, а из 17. Отсчёт первого элемента при этом будем ввести с индекса 1, а не с 0.

Осталось определиться с игровым полем. Для его математического описания вполне логично воспользоваться целочисленным двумерным массивом, состоящим из 4 строк и 4 столбцов, но в дальнейшем, когда нужно будет определять, есть ли рядом с текущим элементом пустой блок (для того, чтобы поменять их местами), нам придётся помимо основного кода написать ещё и дополнительный код проверок на выход за границы массива игрового поля (в большей степени это относится к элементам игрового поля, представляющим граничные блоки).

Это приведет к усложнению нашей программы, ухудшит её читабельность и повысит риск сделать ошибку в коде. Выходом из данной ситуации является добавление с каждого края к нашему массиву (ниже на рисунке он обозначен оранжевым цветом) по одному дополнительному нулевому столбцу/дополнительной нулевой строке (на рисунке они выделены голубым цветом). Отсчёт первого элемента данного двумерного массива так же будем начинать с индекса 1, а не с 0 (на рисунке индексы выделены зелёным цветом). Таким образом, модель игрового поля принимает следующий вид:

В коде:

Теперь заполняем «логические ячейки» игрового поля, попутно создавая спрайты соответствующих чисел для его блоков:

Осталось установить наши спрайты на позиции соответствующих блоков игрового поля и произвести их отрисовку:

Теперь можно попробовать запустить программу. В результате у нас должна получиться следующая статичная заготовка:

Примечание: Если у вас ничего не отображается, то попробуйте прописать полный путь до файла текстуры. Например, вместо:

укажите:

При этом у вас на компьютере должна быть папка C:\images, в которой должен находиться файл 15.png.

Обработка нажатия кнопки мыши


Когда пользователь нажимает левой кнопкой мыши (ЛКМ) на каком-либо блоке игрового поля с целью переставить его на пустое место, то мы должны отловить данное событие, затем проверить, есть ли рядом с этим блоком пустая клетка и, если действительно такая клетка присутствует, то задать направление перестановки (через переменные dx и dy).

Ниже представлен код обработчика события щелчка ЛКМ и проверки на присутствие рядом пустой клетки:

Также добавим механизм перестановки двух блоков. Алгоритм данной операции предельно простой — это обмен значениями двух переменных с использованием третьей переменной, в которой сохраняется промежуточный результат:

Снова компилируем, запускаем нашу программу и видим уже следующее:


Добавляем анимацию перемещения

Остались последние штрихи — сделать более плавным перестановку выбранного блока на пустое место. Для этого добавим дополнительный цикл for, в котором мы будем двигать выбранный блок с помощью функции sprite[temp.].move(speed*dx, speed*dy);.

На каждой итерации цикла блок будет перемещаться на speed*dx пикселей по горизонтали и на speed*dy пикселей по вертикали:

Для того, чтобы увидеть результат, нужно добавить в самое начало нашей программы ещё одну строчку кода, которая установит ограничение максимальной частоты кадров равное 60:

В очередной раз, скомпилировав и запустив программу, мы уже сможем наблюдать финальный результат наших трудов:


Заключение


Вот мы и подошли к концу ещё одного урока по C++/SFML. На мой взгляд, он является одним из самых простых примеров быстрого создания относительно несложного игрового приложения. Надеюсь, что каждый, кто дочитал эту статью до конца, сможет найти в ней что-то новое и интересное для себя. Ну а я как всегда говорю Вам: «До встречи в следующем уроке!» 🙂

*Статья написана по мотивам одноименного видеоролика за авторством FamTrinli.

Исходный код игры «Пятнашки» в C++/SFML.

Оценить статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (9 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш E-mail не будет опубликован. Обязательные поля помечены *