Создание настольной игры. Часть 01: функционал.⁠⁠

Здравствуйте, товарищи.

Хочу рассказать и подробно показать, как создать простую кросс-платформенную (Linux, macOS, Windows, Android, iOS, Web) настольную игру.

ПРЕДИСЛОВИЕ.

Мысль сделать это именно здесь родилась после чтения публикаций GooDCrafter о создании игры TerraPath. Где-то на 15-й его публикации я задал себе вопрос: "А чем я хуже?"

Мои публикации преследуют следующие цели:

1. обучение вас созданию игр;

2. получение обратной связи по обучению.

Данная серия публикаций расскажет и покажет создание игры "Память: Цвета" (Memory: Colors). Wikipedia даёт следующее определение ( https://en.wikipedia.org/wiki/Concentration_(game) ) этой игре: Концентрация, она же Память или просто Пары, является карточной игрой, в которой все карты лежат рубашкой кверху. На каждом ходу игрок переворачивает две карты. Цель игры в том, чтобы убрать со стола совпадающие пары карт.

Вот так выглядит веб-версия игры, которую мы создадим с нуля: https://ogstudio.github.io/game-memory-colors/0.3/mjin-playe...

ЧАСТЬ 1:  ФУНКЦИОНАЛ.

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

Игровые экраны.

Игра содержит три экрана:

1. Начало (Start)

2. Игра (Game)

3. Завершение (Finish)

Давайте пройдёмся по всем экранам и составим список из единиц функционала. Будем обозначать одну единицу функционала как Ф-<число>.

Экран начала (Start screen).

Это простой экран приветствия.

Ф-01. Заголовок

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

Ф-02. Описание

Через пару секунд начинает появляеться описание, по одной букве за раз:

Ф-03. Анимация выхода с экрана начала

После клика или тапа заголовок и описание начинают лететь в сторону пользователя:

Ф-04. Выход с экрана начала

После того, как заголовок и описание улетели, перемещаем пользователя на следующий экран.

Экран игры (Game screen).

На этом экране мы собственно играем.

Ф-05. Игровое поле

Как видно, игровое поле состоит из 16 кругов в виде сетки 4x4. Все круги с одинаковым узором, что означает их положение "рубашкой кверху".

Ф-06. Выбор элемента

После выбора элемента можно увидеть узор круга:

Ф-07. Сопоставление двух элементов

После выбора второго круга мы получаем

1. либо промах:

2. либо совпадение:

Ф-08. Анимация промаха

Как вы заметили, в случае промаха фон мигает красным цветом.

Ф-09. Анимация совпадения

В случае совпадения:

1. фон меняет цвет;

2. круги улетают в сторону пользователя.

Ф-10. Окончание игры

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

Экран завершения (Finish screen).

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

Ф-11. Победа

Сначала мы отображаем на экране лишь слово "VICTORY" (ПОБЕДА):

Ф-12. Домашняя страница

Через пару секунд выводим адрес домашней страницы:

ПОСЛЕСЛОВИЕ.

Мы рассмотрели довольно много функционала, который заметен с первого взгляда.

Далее в ходе разработки мы обнаружим дополнительный функционал, который не был заметен сразу.

На этом заканчиваю первую часть. Задавайте вопросы. Комментируйте.

До скорой встречи!

PS1: Домашняя страница у нас болеет после недавней смены хостинга, поэтому заранее прошу прощения. Мы её вылечим в ближайшее время.

PS2: Хранилище с игрой: https://bitbucket.org/ogstudio-games/memory-colors