Некоторое время назад я захотел поиграться с JavaScript и сделал небольшое текстовое приключение (или интерактивную историю). Я решил попробовать переделать его во что-то более структурированное и правильно выглядящее.

Сводка

Это будет что-то вроде моего первоначального сообщения о коммите, так как в настоящее время я занят другими вещами, но мне также нужно выполнить побочную деятельность. Medium продолжает присылать мне статистику, показывающую, что история создания этой игры получает новые просмотры каждую неделю, и это меня немного беспокоит. Не знаю, верна ли статистика, но я понимаю, что если она и есть, то, скорее всего, это происходит из-за названия рассказа. Я предполагаю, что люди ищут учебник и могут в какой-то момент наткнуться на него (хотя на самом деле это не учебник, а я говорю о том, как я подошел к этому). Таким образом, я хочу попробовать создать что-то более подходящее, чтобы потом обновить этот пост ссылкой на новую версию (предыдущую удалять не планирую и, скорее всего, оставлю как есть).

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

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

Технический стек и структура

Я хочу использовать Vite, React, React Router и простой CSS (с более красивыми структурами). Прогресс и текущее состояние можно увидеть здесь (а репозиторий — здесь).

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

Скорее всего, я буду использовать useState для создания аналогичной системы, но на этот раз с React. На этот раз я не хочу искать какое-либо руководство или решение и предпочитаю придумывать что-то самостоятельно. Пока я вижу это как те же блоки текста и кнопки с событиями onClick для установки состояния, поэтому страница обновляется в зависимости от него (например, начальное состояние равно 0, вы видите первый текст с кнопкой 1, устанавливающей состояние как 1 и кнопку 2 установив состояние как 2, если состояние равно 1, вы увидите другой соответствующий текст с другими кнопками и т. д.). Всегда есть лучший подход ко всему, но я просто хочу плыть по течению, основываясь на том, что первое приходит на ум, и посмотреть, куда это меня приведет.

Мне может понадобиться создать компоненты и передать им свойства, чтобы упростить повторяющуюся работу (поскольку многие блоки/кнопки могут быть одинаковыми, просто с другим текстом, передаваемым через свойства). Мне также нужно решить, будут ли тексты импортированы из отдельного файла с гигантским объектом с параметрами около 100 или это будет сделано непосредственно в основном файле без экспорта.

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

Стиль

Помимо главной страницы игры, будет еще несколько других страниц, таких как «Меню» и «О программе». Можно выглядеть примерно так:

Мне также нужно еще несколько стилей и украшений, что, возможно, является основной причиной, по которой я хотел переделать этот проект.

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

Далее идут изображения, и это сложная часть. Я очень хочу их использовать, но мало того, что я не художник, так еще и нет времени рисовать даже самые простые (похожие на смайлики). Итак, я собираюсь попробовать сгенерированные AI. Я не имею никакого мнения о работе ИИ (будь то изображения, тексты, код или что-то еще) и отношусь к этому так: «он есть, я проверю, если он работает, он работает, если нет, я что-то проверю». еще".

Я пробовал несколько до сих пор, и некоторые могут работать. Например, вот так:

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

Заключение

Это идея, стоящая за всем этим до сих пор. Просто хочу как следует взглянуть на проект, который был создан для развлечения, но по какой-то причине продолжает просматриваться (ну, если статистика Medium верна). Я также стараюсь заниматься чем-то одним, а не десятком проектов. В общем, только время покажет, будет ли эта история завершена или нет, но, возможно, публикация этой истории возьмет на себя какое-то обязательство.

Есть шанс, что в будущих историях появятся дополнительные обновления (можно проверить здесь), а пока спасибо за чтение.