С 2006 года существует такая игра, как Murloc RPG, под авторством un-mediocre. В 2011 году вышло продолжение Murloc RPG 2: Episode 1
Murloc RPG 2: Episode 1
Чуть позже был анонсирован набор инструментов MUDKIT. Из за проблем с авторским правом на ресурсы из World of Warcraft`а, un-mediocre прекратил разработку следующих частей.
Фанатский ремейк игры, сделанный на юнити.
Наша команда, как и множество фанатов игры, начали разрабатывать что то похожее. Наш выбор пал на JavaScript, так как мы уже работали с ним. Изначальной идеей было создать нативный кодовый редактор, как в Ren'Py, но в последствии мы так же добавили визуальный редактор, на подобии Construct 3 или PlayCanvas
Работа с персонажами в 1D RPG Constructor
Первой игрой, созданной для тестирования возможностей конструктора, стала Anni di piombo, чуть позже появилась Eternal Flame с улучшенной боевой системой.
Игра Anni di piombo/ Изначально хотели назвать Смута по Итальянски.
Сейчас конструктор находится в бета версии, однако посмотреть визуальный редактор можно здесь. Также есть видео, по работе с кодовым и визуальным редактором. На странице 1D RPG Constructor вы можете узнать больше информации о конструкторе.
Привет, Пикабу! Хочу рассказать историю о том, как обычный айтишник без особых знаний фронтенда создал довольно полезное веб-приложение, используя силу искусственного интеллекта. Спойлер: коллеги были удивлены.
Начальный экран приложения (прелоадер)
Завал задач и поиски спасения
Итак, дело было так. Очередной завал на работе, куча задач, мозг кипит. Вспомнил про технику Помодоро — это когда работаешь 25 минут, потом 5 минут отдыхаешь. Простая штука, но реально помогает не выгорать.
Полез искать нормальный таймер в интернете и... знакомая история:
Либо убого простые
Либо перегруженные фигнёй
Либо на английском
Либо платные
Либо ещё регистрацию просят
В общем, типичная ситуация: "Да я сам лучше сделаю!" Но проблема в том, что фронтенд я знаю на уровне "поменять текст на странице через консоль разработчика до перезагрузки".
Вспомнил про хайповую штуку
Тут я вспомнил про так называемый "вайб-кодинг" с нейросетями. Да, знаю, что многие к этому относятся скептически, но решил попробовать. Открыл Claude и написал примерно так:
"Старина, сделай мне HTML-страничку с таймером Помодоро. Нужно: таймер на 25 минут, задачи можно добавлять, статистика какая-нибудь и чтоб пикал когда время вышло."
И тут началось волшебство! Claude выдал мне полноценный рабочий прототип. Причём не просто "Hello World", а реально функциональную штуку😉:
Нормальным таймером
Возможностью добавлять задачи
Статистикой
Звуками
Меня понесло
Ну и дальше меня, конечно, понесло:
А можешь добавить сохранение в Local Storage?
А сделай звуки покруче
А перекрась вот это в зелёный
А добавь настройки времени
А мобильную адаптивность
Claude всё это выполнял как послушный джуниор! За час у меня был готов довольно приличный таймер.
Внешний вид приложения (начальной версии не осталось, к сожалению, показываю конечный результат)
Реакция коллег
Показал результат фронтенд-разрабам на работе со словами: "Смотрите, что я за час накатал, вообще без знаний!"
Их реакция:
😳 (удивление)
🤔 (изучают интерфейс)
😯 (ещё больше удивления)
Нефига себе, ништяк получилося! Реально работает!
Решил довести до ума
После такой реакции подумал: "А почему бы не довести это до продакшена?" И понеслось...
Настраиваемые интервалы (любое время, какое хочешь!)
10 типов звуков + можно загрузить свой
Ручное сохранение настроек
Push-уведомления в браузере
Для обычных людей:
Добавляешь задачи и следишь за прогрессом
Видишь статистику: сколько помидорок сделал
Не забываешь делать перерывы
Задачи сохраняются автоматически
Запуск таймера для добавленной задачи, длительностью 1 час
Настройки приложения
Про дизайн (не кидайтесь тапками)
Отдельно про дизайн. Да, я знаю, что он специфический. Это не потому что у меня нет вкуса (хотя может и нет 😅), а потому что я специально попросил Claude сделать что-то в стиле киберпанка 90-х.
Получилось ярко, кислотно, с неоновыми цветами и пиксельными эффектами. Возможно, не всем зайдёт, но зато запоминается!
Телеграм-версия
Потом решил пойти дальше и сделал версию для Телеграма: @pomo25_bot
Плюсы:
Данные синхронизируются через облако Телеграма
Уведомления приходят от самого Телеграма
Работает на телефоне как нативное приложение
Минусы:
Не работает в фоне (об этом ниже)
Приложение в Telegram
Проблема с фоновой работой
Единственное, что не смог победить — работу в фоне на мобилках.
Проблема в том, что:
Телеграм Web Apps работают в WebView
При сворачивании приложения WebView приостанавливается
JavaScript перестаёт выполняться
Service Workers в WebView работают криво
iOS вообще жёстко блокирует фоновые скрипты
В итоге при сворачивании таймер автоматически ставится на паузу. Для полноценной работы в фоне нужно было бы нативное приложение.
Опыт работы с нейросетями
Claude: король прототипирования
В начале Claude был просто космос:
Быстро понимает что нужно
Генерирует рабочий код
Хорошо итерируется
Не задаёт лишних вопросов
Но потом начались проблемы
Когда проект разросся, Claude начал путаться:
Исправляет одно, ломает другое
Забывает контекст больших файлов
Приходилось делать бэкапы в гите постоянно
Попробовал ChatGPT — ещё хуже! То ли ленился и отвечал "попробуйте перезагрузить страницу", то ли чинил совсем не там, где надо, вообще не понимая что происходит в коде.
Gemini спас ситуацию
Тогда попробовал новый Gemini (у него миллион токенов контекста). И охренел!
Gemini смог:
Прочитать ВЕСЬ проект целиком
Найти реальные причины багов
Переписать проблемные части
Почистить код от мусора
Реальная польза
Сейчас пользуюсь своим таймером каждый день:
Реально стал делать перерывы (раньше мог 3 часа сидеть не вставая)
Лучше планирую время на задачи
Меньше выгораю от сложных задач
Коллеги тоже подсели, просят фичи добавить, но я пока просто собираю обратную связь и анализируюю насколько это будет сложно реализовать и внедрить
Мораль истории
Современные нейросети действительно могут сильно понизить порог входа в разработку. Даже если ты не знаешь React/Vue/Angular, можно создать полезную штуку.
Но есть нюансы:
Для прототипов ИИ идеален
Для больших проектов нужно понимать что делаешь
Разные ИИ лучше для разных задач
Git обязателен при работе с ИИ
Итог
За час собрал рабочий прототип, потом пару недель в свободное время фиксил баги и боролся с нейросетями. В итоге получился реальный продукт, которым пользуются люди. Нейросети — не панацея, но инструмент мощный.
Сейчас собираю обратную связь (конструктивную, не токсичную) и планирую постепенно что-то добавлять и исправлять по мере поступления интересных идей.
Кто-то ещё экспериментировал с ИИ-разработкой? Поделитесь в комментах!
P.S. Если найдёте баги или будут идеи, пишите. Обратная связь очень ценна!
UPD: Забыл добавить — если кто захочет посмотреть, что получилось: pomo25.ru и @pomo25_bot в Телеграме!
При добавлении SoulShot функционала не добавил проверку не только на наличие оружия, но и кто атакует — игрок или NPC. Как итог теперь все атакуют с помощью SoulShot.
В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.
Решение проблемы с помощью JavaScript
Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.
// Перенос висячих слов
document.addEventListener('DOMContentLoaded', function () {
// 1. Находим все текстовые элементы, которые нужно обработать
Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.
TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).
5. Регулярное выражение для замены
text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {
Регулярное выражение ищет: · (^|\s) — начало строки или пробел (группа 1); · ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2); · \s — пробел после слова; · Флаги gi означают глобальный поиск без учёта регистра.
6. Условная замена
if (prepositions.includes(word.toLowerCase())) {
return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел
}
Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.
Результат работы
После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.
Настройка скрипта
Вы можете легко адаптировать скрипт под свои нужды: · Добавить новые селекторы в querySelectorAll() для обработки других элементов; · Расширить список слов в массиве prepositions; · Изменить длину слов в регулярном выражении с {1,2} на другое значение; · Добавить обработку других языков, изменив диапазон символов в регулярном выражении.
Этот простой скрипт значительно улучшает типографику русскоязычных веб-страниц, делая текст более читаемым и профессионально оформленным.
P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.
Разработчики, а как вы решаете вопрос переноса «висячих» слов?
Подписывайся на мой телеграм-канал, чтобы узнать ещё больше полезных фишек верстки и веб-дизайна.
«Не смейте бросать взгляд на оператор `==`, ибо в его бездне затеряны все законы логики. То, что числа и строки кажутся равными, — лишь обман, рожденный хаосом, что правит типами. Берегитесь, ибо даже `null == undefined` — это шепот древнего ужаса, пробуждающегося в вашем коде» .
2. О переменных без `const/let`
«Когда вы опускаетесь до использования необъявленных переменных, вы призываете тень хойстинга. Она ползет из глубин памяти, искажает реальность и порождает баги, коих не в силах победить даже самые опытные рыцари отладки» .
3. О рекурсии
«Рекурсия — это дверь в бесконечность. Каждый вызов функции уводит вас глубже в лабиринт стека, где время теряет смысл, а последний кадр станет вашей могилой. Не ищите выхода — он существует лишь в теории, как и надежда на `O(1)`» .
4. О `this` в JavaScript
«Сердце `this` — это черная дыра, поглощающая контекст. Пытаясь понять его, вы рискуете обнажить разум перед лицом космической случайности. Даже `bind()` лишь временная повязка на глаза, за которой скрывается истинная бездна» .
5. Об асинхронности
«Коли вы решитесь на `callback`, знайте: ваш код разорвется на части, как тело жертвы в пасти демона. Промисы же — это змеи, что шепчут вам: "Всё будет потом", но "потом" — это эпоха, где время не имеет смысла» .
