редактор

Брошюра

Как скачать

Ссылки

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

• Жить
• Скачать
  • скачать bacione.html
  • откройте файловый менеджер
  • нажмите bacione.html, чтобы запустить его в браузере Chrome.
  • нажмите «Бег», чтобы сыграть в игру «Лыжи».
• Games.pdf - руководство по Ski и Marslander
• YouTube – демонстрация продукта
• Reddit - обсуждения Reddit
• Github - обсуждения на github

Басионе?

Bacione означает «большой ПОЦЕЛУЙ», как в «Keep It Satisfyingly Simple».

Цель

Программирование небольших javascript-игр на телефоне в автономном режиме

Миссия

Создайте самую удобную в своем классе интегрированную среду разработки (IDE)

Дизайн

Целью дизайна этого редактора является предоставление приятного опыта тем, у кого нет компьютера или кто просто предпочитает телефон или планшет для программирования небольших игр на JavaScript. Дополнительные ограничения, которые устраняются, — это работа в автономном режиме и отсутствие внешней клавиатуры (набор текста на экране большим пальцем или стилусом). Хотя существует множество редакторов и приложений для клавиатуры, которые подходят для этого варианта использования, все они неоптимальны. Двумя основными проблемами являются сокращение количества кликов для: 1) доступа к специальным символам и 2) рефакторинга. Чтобы решить вопрос №1, необходимо поддержать возможность использования дополнительных клавиш или установить приложение для клавиатуры. Для решения №2 необходимо сделать так, чтобы рефакторинг требовал меньше кликов. После решения этих двух проблем большая часть экрана занята, оставляя мало места для области кода. Для решения этой проблемы в редакторе имеется встроенная клавиатура и эффективные инструменты рефакторинга.

Функции

• Меньше кликов по сравнению с другими редакторами для телефона.
• Общие клавиши - в один клик.
• Контекстно-зависимая логика сокращает количество кликов.
• Меньше работы по рефакторингу кода.
• Полностью программируемая клавиатура.
• Создавайте свои собственные значки и функции клавиатуры.
• Предназначен для телефонов и планшетов.
• Никакой настройки не требуется.
• Один файл.
• Легко поделиться.
• Офлайн.
• Обычный ванильный JavaScript.
• Никаких зависимостей.
• Бесплатно (лицензия GPL)
• Нет рекламы
• Запускайте из файлового менеджера Android в браузере Chrome.
• Легко модифицируемый редактор.
• Редактировать редактор в редакторе.
• Редактор занимает всего 7 килобайт.
• Поддерживает смахивание и повторение длительного нажатия.

Ограничения

• Поддержка портретного режима : этот редактор поддерживает только портретный режим.
• Совместимость : Редактор работает только с браузером Chrome на планшете или телефоне. Однако экспортированные игры, в которых удаляется редактор, таких ограничений не имеют.
• Многофайловый: Редактор не предназначен для больших игр или многофайловых проектов. Это связано с тем, что открытие HTML-файла из файлового менеджера на Android в браузере Chrome не поддерживает несколько файлов — все должно содержаться в одном монолитном HTML-файле. Это также означает, что нельзя использовать внешние изображения или аудиофайлы. Вместо этого можно использовать элементы, созданные программно; например, игра Marslander использует векторную графику и генератор шума, а в некоторых других играх используются смайлы.

Если этот редактор не соответствует вашим потребностям, вы можете попробовать Neovim с Termux и Apache. Вы можете найти мою конфигурацию для этих инструментов здесь.

Проблемы

• Несовпадение курсора : сильное смахивание вверх в конце файла в окне редактора может привести к смещению курсора относительно текста. Предлагаемый обходной путь — немного отступить от конца.

Примечания

Любая ссылка на изменение ниже относится к функции «Редактировать редактор», которую можно найти в кнопке «Разное», обозначенной ромбовидным символом.

• Edit-the-Editor : редактор можно редактировать внутри редактора. Однако он неактивен, поэтому вам необходимо нажать «Сохранить» и открыть вновь созданный HTML-файл с отметкой времени. Если новый сломался, откройте предыдущий. Эта функция предназначена для поддержки простых изменений. Сложные изменения следует выполнять в более надежной среде, такой как Neovim.
• «Выполнить» : кнопка «Выполнить» запускает или останавливает игру, в которой находится курсор. Для простоты игровая рамка имеет квадратную форму и отображается над клавиатурой. Это позволяет легко переключаться между редактированием и запуском ( 2 клика туда и обратно ). Если это кажется ограничивающим фактором и вам нужен игровой фрейм большего размера, вы можете изменить редактор или код размера холста в библиотеке или даже не использовать библиотеку. Также вы можете экспортировать все, что находится в редакторе, с помощью кнопки «Экспорт-Игра». Возможно, вы даже захотите изменить принцип работы функции Exportgame(). Недостатком использования экспорта является то, что вам придется затем запустить этот HTML-файл из файлового менеджера Android ( 7 кликов туда и обратно ).
• Размер клавиатуры : размер клавиатуры равен оставшейся площади после учета квадратного игрового кадра. Это означает, что на телефоне ширина клавиатуры равна примерно ширине экрана, а на планшете — примерно в половину ширины экрана.
• Расположение клавиатуры : на планшете клавиатура расположена в правом нижнем углу. Если вы используете для набора текста большой палец левой руки вместо большого пальца правой руки, вы можете изменить его.
• Пользовательские функции клавиатуры . Этот редактор особенно полезен, поскольку он оснащен пользовательской клавиатурой, на которой все основные функции доступны одним щелчком мыши. Для этого 22 из 32 специальных символов, важных для программирования, доступны одним щелчком мыши, а остальные 10 доступны с помощью клавиши Shift. Обратите внимание, что клавиша пробела необычно маленькая и расположена в правом нижнем углу. Кроме того, клавиши возврата и возврата находятся во втором ряду, поскольку они часто координируются с другими клавишами. Например, чтобы вырезать текст, вы нажимаете «копировать», а затем «возврат», а чтобы отменить выделение, вы нажимаете клавишу «Return». Если вам не нравится этот макет, вы можете его изменить .
• Выбор . Основным преимуществом этого редактора является эффективный выбор. Выбор основан на контексте; в зависимости от того, где находится курсор, он выделит слово, строку, абзац или блок кода. Чтобы увидеть, как работает выбор, вы можете посмотреть видео на YouTube. Выбор осуществляется кнопкой Копировать, то есть происходит одновременно два события. В основном это сделано для уменьшения количества кнопок. Вырез состоит из двух шагов: нажмите «Копировать» (выбирает и копирует), а затем нажмите «Backspace» (удаляет выделение). Нажатие кнопки Enter после копирования переместит курсор в конец выделения. Если Cut (Copy/Backspace) содержит строку, курсор переместится на одну строку вперед. Это связано с тем, что часто при вырезании строки пользователь намерен вставить ее после следующей строки. Это помогает сократить количество кликов при рефакторинге кода. Выделение (Копировать) также можно использовать для навигации, например, чтобы переместить курсор в конец блока, поместите курсор перед символом открывающего блока, нажмите «Копировать», нажмите «Ввод». Однако не делайте этого, если в буфере вставки есть что-то, что вы собираетесь использовать. Нажатие кнопки «Копировать несколько раз» расширит выделение в соответствии с правилами выделения, а клавиши со стрелками будут расширять (или отменять) выделение по одному символу за раз.
• Копирование и вставка . Для копирования и вставки кода в редакторе необходимо использовать внутренние кнопки копирования и вставки. Чтобы скопировать код из внешних источников, используйте системные методы копирования и вставки, такие как длительное нажатие и последующий выбор копирования и вставки.
• Форматирование : на телефоне площадь редактора очень высока, и вы не можете позволить себе много пустого пространства, особенно горизонтального. Для отступа вы можете использовать клавишу пробела (клавиши Tab нет), а клавиша Enter сохранит прежний отступ. Старайтесь использовать отступы только для ветвей и циклов и вместо отступов в теле функции используйте вертикальные пробелы до и после. См. пример игры Marslander.
• Кнопка «Комментарий» : кнопка «Комментарий» очень полезна для отладки. Когда вы нажимаете кнопку «Комментарий», он комментирует код и помещает копию в буфер вставки. Следующий шаг — вставить это, а затем отредактировать. Если вам не нравятся результаты нового кода, его легко удалить и раскомментировать оригинал.
• Навигация : навигация в основном осуществляется путем прикосновения к экрану, поэтому нет клавиш «Домой», «Конец» или вертикальных клавиш со стрелками. Вместо этого имеется стрелка влево-вправо, помогающая точно позиционировать курсор после касания приблизительного местоположения. Клавиша масштабирования, увеличивающая размер текста, также может помочь расположить курсор в правильном месте.
• Рекомендуемый размер : поскольку навигация по коду на телефоне может быть довольно сложной задачей, рекомендуется создавать игры достаточно маленького размера, чтобы их можно было прокручивать одним жестом.
• Полноэкранный режим : активация полноэкранного режима предоставит вам больше возможностей для навигации и редактирования кода. Вы можете переключиться в полноэкранный режим, проведя пальцем вверх по кнопке масштабирования.
• Закрытие представлений : Кнопок закрытия нет. Чтобы закрыть представление, щелкните в любом месте или выберите параметр. Представления: «Справка», «Разное», «Различия» и «Ошибки».
• Генерация эмодзи : при первом открытии просмотра «Разное» загрузка значков займет некоторое время.
• Пикеры : Color-Picker и Icon-Picker помещают код в Paste, поэтому не волнуйтесь, если кажется, что ничего не произошло. Нажмите кнопку «Вставить», чтобы увидеть код.
• Обнаружение ошибок : в этом редакторе нет обнаружения ошибок в реальном времени (по мере ввода). Ошибки обнаруживаются при нажатии кнопки «Выполнить». Будет отображено сообщение об ошибке, и когда ошибка будет устранена (щелкнув в любом месте этого представления), курсор автоматически переместится в код, в котором произошла ошибка. Иногда сообщение об ошибке не делает его очевидным, если вы просто забыли скобку или другой блочный символ, которому требуется соответствующая пара. Чтобы помочь в этом, дополнительный процесс будет просто подсчитывать все символы блока, чтобы гарантировать четность, и отображать дополнительное сообщение в окне просмотра ошибок.
• Функция Diff: Функция Diff наивна и не дает точных результатов. Он предназначен для предоставления лишь приблизительного представления о ходе работы с момента открытия или последнего сохранения файла.
• Механизм сохранения: функция сохранения в редакторе ограничена ограничениями HTML. В качестве обходного пути каждый раз при сохранении создается новый файл с отметкой времени. Если вы сохраняете файлы в папке «Загрузки», важно, чтобы в ней не было файлов, предназначенных для других целей, так как это может затруднить быстрое повторное открытие вашей работы. Кроме того, периодически удаляйте старые HTML-файлы редактора, оставляя только самую последнюю версию.
• Темы : Редактор предлагает как светлые, так и темные темы для индивидуальной настройки просмотра. Вы можете переключаться между темами, проводя вверх по кнопке «Разное». Вы также можете изменить или добавить что-то еще.