Разработка: прототип игры Wordle в ProtoPie

Наш арт-директор Женя Гребенщиков решил попробовать сделать прототип игры Wordle в ProtoPie. Рассказываем, что получилось.

Когда начал создавать прототип, понял, что раньше никто не использовал в ProtoPie что-то похожее на базы данных. Самое важное, когда пришла какая-то идея, — подумать о концепции и возможностях. Точно ли получится сделать такую игру в ProtoPie? Обычно я мысленно перебираю весь функционал и абстрактно придумываю те или иные решения, которые буду использовать.

Итак, программа загадывает слово, значит, должна быть база данных этих слов. Как сделать базу данных слов в ProtoPie? Я уже делал много таких штук, и обычно довольно сложно объяснить на пальцах, как оно работает. Постараюсь как можно подробнее все описать.

За основу взял простую базу данных со списком слов. Но чтобы выбрать случайное слово, надо каждому слову присвоить айдишник. Поэтому формат базы сделал idWord и выглядеть она будет примерно так:

Начинаем тестировать: берем рандомное число, например 12. Ищем через indexof(text,” 12”), на какой позиции оно находится. Например, это 67-й символ. Смотрим в базу и видим там «12БАРЖА». Переносим слово из базы в переменную.

Для начала функцией right стираем все, что было до нужного слова. Наша «база данных» — это, по сути, очень длинная строка, которая начинается с символа «1» и заканчивается последней буквой последнего слова. Поэтому мы можем использовать функции работы со строками. С помощью функции right мы сможем «обрезать» строку до нужного слова, а функцией left — после этого слова. Тем самым мы достанем из базы нужное нам слово.

Теперь нам надо понять, сколько символов надо оставить «справа» функцией right. Предыдущая функция indexOf дала нам информацию, что номер нужного слова находится с 67-го символа. Чтобы достать слово, надо убрать эти 67 символов и еще 2 символа номера 12 («12БАРЖА»). Так как номер у нас может быть и однозначный, и двух-трех-четырехзначный, то используем функцию length для определения количества символов в этом числе. В текущем виде нам надо убрать 69 символов. Следовательно, чтобы понять, сколько оставить, надо от значения длины всей базы данных отнять 69.

Для решения задачи можно использовать код:

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

Кстати, выбранное слово из базы надо будет потом удалить, чтобы оно не повторялось в следующих играх. Делаем это функцией replace. Плюс делаем проверку: если рандом выдаст число, которого в базе нет, повторяем рандом.

С базой разобрались — теперь у нас есть первое рандомное слово для игры. Например, «ВИРУС». В игре пользователь вводит свое слово, и нужно показать, какие буквы совпали и какие — не на том месте. Также нужно добавить проверку, есть ли слово в базе.

Пользователь вводит слово «РЕБУС». Буква «Р» есть, но в другом месте. Буква «У» и буква «С» на своих местах.

Как сделать такую проверку? Нужно провести пять проверок для каждой буквы введенного слова. Самый простой способ — помещать каждую букву в отдельное поле ввода, чтобы было проще производить с ней какие-либо манипуляции. Однако надо это сделать так, чтобы игрок не заметил, что это пять полей ввода, и ему казалось, что поле ввода одно. Делитесь идеями, как это можно реализовать, в комментариях.

Алгоритм поиска совпадений должен работать так:

Теперь просим игрока ввести второе слово. Он вводит «ПАРУС» — показываем, что буквы «РУС» на своих местах.

Игрок вводит слово «ВИРУС» — все буквы на своих местах. Ура!

Концептуально проблем не обнаружилось — переходим к созданию игры. Процесс я разбил на шаги для наглядности.

Шаг 1. Создал базу данных. Для того чтобы подготовить базу данных, я взял гугл-табличку. Это довольно простой и удобный инструмент для работы с небольшими базами данных. Надеюсь, когда-нибудь ProtoPie добавит нативную синхронизацию с такими таблицами.

Во второй столбик перенес список слов из интернета. Первый оставил пустым, чтобы позже написать там айдишники слов. Получилось 6266 слов — для тестов слов оказалось слишком много. Поэтому сделал копию страницы и оставил примерно по 20 слов на каждую букву. Получилось 279 слов — теперь сойдет.

Потом, используя функционал гугл-таблиц, сначала все слова сделал большими буквами =UPPER() (потому что поиск букв регистрозависимый). Далее я перемешал слова в рандомном порядке таким образом: добавил в третью колонку случайное число =RAND() и отсортировал табличку по возрастанию этих случайных чисел.

Затем в первую колонку записал номера по порядку от 1 до 279. Чтобы перенести базу в ProtoPie, я скопировал первые два столбика в «Блокнот» и функцией «Заменить» заменил табуляцию между числом и словом на пустоту. В итоге получил нужный мне формат базы данных — idWord:

Шаг 2. В ProtoPie создал текстовый слой bd, куда вставил нашу базу данных. Также создал числовую переменную для случайного числа rnd_num, текстовую переменную для случайного слова rnd_word и переменную lang, чтобы в будущем сделать игру на разных языках.

Шаг 3. Создал промежуточную версию прототипа. Для начала решил сделать простой прототип, который по нажатию кнопки выдает случайное слово из базы данных. Процесс занимает пять шагов:

1. Добавляем на слой текст-кнопку, вешаем триггер Tap и присваиваем переменной rnd_num случайное целое число от 1 до 279, так как моя тестовая база данных содержит 279 слов: Assign rnd_num randomInt(1,279).

2. Детектим изменение переменной rnd_num и сразу вешаем проверку на будущее: если число не найдено: Condition indexOf(`bd`. text, rnd_num) =-1, тогда повторяем предыдущее действие: Assign rnd_num randomInt(1,279).

3. Функция indexOf(`bd`. text, rnd_num) показывает номер символа, после которого идет искомое число.

4. Если же число найдено в базе данных: Condition indexOf(`bd`. text, rnd_num) ≥ 0, то записываем в переменную rnd_word случайное слово тем способом, концепцию которого я описывал в начале статьи:

Все эти формулы выглядят довольно сложно, поэтому постарался все подробно изложить. Однако если у вас остались вопросы — с радостью отвечу на них в комментариях.

5. Присваиваем переменной rnd_word конструкцию, выведенную выше. Вот что получилось:

Шаг 4. Сделал игровое поле. Слово загадывать мы умеем, теперь надо сделать игровое поле:

1. Клавиатура будет всегда открыта, поэтому сразу отделяю часть экрана под нее — это 294 px для iPhone X.

2. По правилам оригинальной игры у игрока есть шесть попыток угадать слово, поэтому нужно сделать шесть текстовых полей для предыдущих попыток и одно активное для текущей попытки. Эти поля должны выглядеть одинаково, примерно вот так:

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

Сначала я решил разбить слово по буквам, используя функции left и right:

Но тут сталкиваемся с проблемой, что введенное слово не всегда состоит из пяти букв. Вот что я имею в виду: пользователь вводит слово «ВИРУС» по буквам. Ввел «ВИ» — получилось слово из двух букв, следовательно, используя функции выше, первая буква («В») найдется верно, вторая («И») тоже, но так как в слове нет третьей, четвертой и пятой букв, то все функции будут выводить вторую букву вместо третьей, четвертой и пятой. Вот как эта проблема выглядит в прототипе.

Существует множество способов решить эту проблему. Да и в целом эту задачу можно сделать по-другому… Я решил сделать из пяти полей компонент, в который буду слать вводимое слово. В компоненте получаю вводимый текст и разбиваю его на буквы, проверяя длину текста. Получается шесть проверок: когда нет символов и когда один, два, три, четыре или пять символов.

Добавляю красивые анимации для ввода букв и подсветку текущей буквы. Пока проверку на совпадения делать не буду: для начала надо проверить, как работает ввод слов.

4. На главной сцене дублирую пять раз компонент и строю «игровое поле»:

На этом шаге прототип выглядит так:

Шаг 5. Добавил две проверки, которые улучшат UX. В первой проверке убрал букву «Ё». В моей базе данных нет слов на букву «Ё», и там, где она должна быть, используется буква «Е». Поэтому просто функцией replace заменим в поле ввода «Ё» на «Е».

Вторая проверка — для пробела: это большая кнопка, которую случайно можно нажать. Мы просто ее отключим: используем ту же функцию replace и меняем пробел (« ») на ничего («»). Можно еще сделать аналогично с цифрами, но пока влом: )

Шаг 6. Теперь надо сделать так называемый вин кондишен.

1. Для начала сделал примитивную проверку: если введенное слово равно загаданному слову — победа! Для этого просто сравниваем две переменные.

2. Теперь можно добавить проверку букв:

Заметка 1. Тестируя приложение, я подумал, что базу данных лучше сделать «вверх ногами», чтобы проще было добавлять новые слова, открывая текстовый блок и дописывая значение. Например, «2130ЗЕБРА». Тогда не нужно будет скролить в самый низ. Вот почему:

Заметка 2. Узнал много новых слов. Пришла в голову идея добавить функцию «Посмотреть значение слова».

Заметка 3. Во время тестов словил вот такой баг:

Баг в третьем и пятом слове. Суть в том, что вначале слова проверяется буква «А» и подсвечивается желтым, потому что она не на верном месте. Следом проверяется последняя «А». Она на своем месте, и поэтому она зеленая. Пользователь думает что в слове две буквы «А», но это всего лишь баг.

Исправил я его таким образом: после закрашивания буквы зеленым заменял проверенную букву на цифру 0. Таким образом, при второй проверке, когда происходит закрашивание желтых клеток, система ее уже не проверяет.

Заметка 4. «Причесал» UI, добавил анимацию при неправильном вводе слова в компоненте:

Заметка 5. «Поиграл» с цветами и формами, придав игре более приятный вид.

Сейчас игра выглядит так:

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

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

Пишите о ваших идеях, как можно улучшить или дополнить игру! И делитесь своими успехами в игре: будем рады посмотреть скриншоты вашей статистики: )