Пошаговое создание игры «Same Game». Урок №1

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

    | 

  Обновл. 12 Авг 2019  | 

 808

 ǀ   4 

В этой серии обучающих уроков мы, используя MFC (англ. «Microsoft Foundation Classes»), с нуля создадим свой вариант всем известной игры-паззла SameGame. Мы добавим несколько дополнительных фич к этой игре, помимо простого удаления блоков, а также реализуем подсистему отмены/повтора действия и диалоговые окна конфигурации. Рассмотрим примеры не только «голого» исходного кода, а поэтапную разработку вместе со скриншотами.

Правила игры SameGame

Правила SameGame предельно простые. Ваша задача — удалить все цветные блоки с игрового поля. Для того чтобы удалить блок, игрок должен кликнуть по любом блоке, который стоит рядом (вертикально или горизонтально) с другим блоком того же цвета. Таким образом, уничтожится целая цепочка блоков одного цвета. Блоки, которые при этом находились сверху, упадут вниз, заполняя освободившееся пространство. При удалении всего столбца, стоящие справа столбцы сдвигаются влево, занимая пустое место. Игра заканчивается тогда, когда у игрока не остаётся больше возможных ходов. Цель игры состоит в том, чтобы как можно быстрее очистить доску от цветных блоков.

Стоит заметить, что некоторые реализации игры SameGame также могут дополняться использованием алгоритмов для подсчёта очков игрока. Реализацию подобного функционала можно рассмотреть в качестве дополнительного урока.

Перед началом работы


Вам потребуются базовые знания в таких разделах языка C++ как функции, рекурсия, классы и наследование классов. В качестве среды разработки была выбрана бесплатная версия Microsoft Visual Studio 2017 Community Edition в операционной системе Windows 7 (детальнее о выборе IDE). Если версии вашей операционной системы или среды разработки не совпадают с версиями, указанными выше, то некоторые детали или внешний вид отдельных компонентов могут отличаться от тех, которые вы будете видеть на скриншотах данного туториала. Также не советуем использовать Express-версии пакета Visual Studiо, т.к. в них не входит компонент MFC.

Чему вы научитесь?

В первую очередь, вы научитесь основным принципам создания своей собственной игры, узнаете о библиотеке MFC и о некоторых базовых методах её использования, а также познакомитесь с построением своего приложения с использование архитектуры «Document/View».

Почему именно MFC?


MFC — это лёгкая в использовании библиотека, особенно для такой простой игры как наша. С её помощью не составит труда создать приложение с так называемым «Windows look-and-feel» внешним видом. Стиль «Windows look-and-feel» имитирует особенности конкретной системы, на которой он используется: классический Windows XP, Windows 7 или Windows 10. «Look» определяет внешний вид компонентов, а «Feel» — их поведение.

Создание проекта

Создавать нашу игру мы будем в Microsoft Visual Studio 2017. Все инструкции и описания ниже могут быть с лёгкостью адаптированы и для других версий Visual Studio. Итак, для начала запустите Visual Studio и создайте новый проект. Тип проекта "Visual C++" > "MFC/ATL" > "Приложение MFC":

Имя задайте SameGame. Если вы задали другое имя, отличное от SameGame, то имена ваших классов будут немного отличаться от тех, которые будут в этом уроке.

На следующем шаге вы увидите окно с большим набором различных опций, влияющих на итоговый исходный код, который будет автоматически сгенерирован по завершению работы мастера настройки. На следующем скриншоте показано, какие параметры необходимо выбрать, чтобы получить то, что нам нужно.

Выбирая опцию «Один документ» мы указываем нашему будущему приложению на необходимость использования архитектуры «Document/View». Следующий интересующий нас параметр — «Использование MFC», который содержит две опции. Выбор опции «Использовать MFC в общей библиотеке» подразумевает, что на компьютере конечного пользователя, который будет запускать наше приложение, уже имеются все необходимые для этого MFC-библиотеки. Если же мы выберем «Использовать MFC в статической библиотеке», то нужные MFC-библиотеки войдут в нашу программу на этапе компиляции, что, в результате, приведёт к увеличению итогового размера нашей программы, но эта программа будет работать на любой машине с Windows.

Затем в следующих окнах оставляйте всё как есть, пока не доберётесь к следующему окну:

Опция «Утолщенная граница фрейма» позволяет пользователю изменить размер окна нашей программы. Но поскольку наша игра имеет фиксированный размер, то флажок с этой опции нужно будет снять. «Развернуть окно» нам также не понадобится, как и «Начальная строка состояния».

Далее мы переходим на страницу «Дополнительные функции»:

Отключите опции «Печать и предварительный просмотр», «Элементы управления ActiveX». Если есть возможность, то укажите 0 в опции «Число файлов в текущем списке файлов», поскольку мы не будем подгружать в нашу программу каких-либо дополнительных файлов.

Далее рассмотрим последнюю страницу мастера настройки MFC-приложений, на которой можно увидеть список созданных классов:

В результате будут автоматически сгенерированы 4 класса, которые станут основными классами в нашей игре.

К классу CSameGameView мы вернёмся немного позже. А пока рассмотрим класс CSameGameApp, который является классом-обёрткой для всего нашего приложения и функции main() в том числе. Базовым для него всегда будет класс CWinApp.

Следующим рассмотрим класс CSameGameDoc, в котором будут храниться все данные нашего приложения. Для него базовым будет класс CDocument.

И, наконец, класс CMainFrame, базовым для которого будет CFrameWnd. Он также является классом-обёрткой для окна нашей программы. Класс основного фрейма содержит меню и представление клиентской области. Клиентская область — это место, где отрисовывается наша игра.

Теперь возвратимся к пропущенному ранее классу CSameGameView — базовый класс, который представляет собой раскрывающийся список с набором общедоступных представлений, каждое из которых имеет свои особенности в использовании и применении. Тип представления по умолчанию — CView, который является общим представлением, где всё отображение и взаимодействие с пользователем должны выполняться вручную. Это как раз то, что нам нужно.

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

   CEditView — это общее представление, которое состоит из простого текстового поля.

   CFormView позволяет разработчику вставлять в него другие основные элементы управления, т.е. поля редактирования, поля со списком, кнопки и т.д.

   CHtmlEditView имеет HTML-редактор, встроенный в представление.

   CHtmlView вставляет элемент управления — браузер Internet Explorer.

   CListView имеет область, похожую на окно Проводника со списками и значками.

   CRichEditView похож на редактор WordPad — позволяет не только вводить текст, но и форматировать его, изменять цвет и тому подобное.

   CScrollView — это общее представление, похожее на CView, но допускающее прокрутку.

   Наконец, CTreeView вставляет элемент управления древовидной структурой.

Завершение работы мастера приложений MFC приведёт к созданию и запуску приложения MFC. Поскольку мы ещё не написали никакого кода, то увидим окно, в котором ничего нет, но всё равно это полностью функционирующее приложение. Ниже приведен скриншот того, как должно выглядеть ваше базовое приложение (чтобы скомпилировать программу, нужно перейти в меню "Отладка" > "Запуск без отладки"):

Обратите внимание, здесь есть стандартное меню («Файл», «Правка» и «Справка») и пустая клиентская область. Прежде, чем мы перейдём к непосредственному написанию кода, мы немного поговорим об архитектуре «Document/View», которая используется в приложениях MFC, и о том, как мы собираемся применять её в нашей игре.


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

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

Комментариев: 4

  1. Аватар Елена:

    Спасибо! ❤️

    1. Юрий Юрий:

      Пожалуйста 🙂

  2. Аватар Sergey:

    Отлично. Спасибо.

    1. Юрий Юрий:

      Пожалуйста 🙂

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

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