Игра "Подземелье" (HTML5 canvas + javascript). Управляемые + Обычные формы

13.08.18

Задачи пользователя - Игры

Простейшая игра на HTML5 + canvas + javascript. Управляемые + Обычные формы. Запуск во всех конфигурациях, во всех видах интерфейсов (Упр. формы Такси, упр. формы во вкладках, обычные формы). В 1С используется встроенный объект ПолеHTMLДокумента. УПРАВЛЕНИЕ ПЕРСОНАЖЕМ с клавиатуры (клавиши движения WASD). Персонаж двигается, собирает ключи, открывает двери.

Скачать файлы

Наименование Файл Версия Размер
Игра "Подземелье" (HTML5 canvas + javascript). Управляемые + Обычные формы.:
.zip 29,42Kb
20
.zip 0.1 29,42Kb 20 Скачать

Цель данной публикации

Продемонстрировать возможность интеграции HTML5 движков работы с графикой внутри 1с. Для демонстрации выбрана готовая игра на HTML5.
В прошлом я давно озадачивался проблемой отсутствия любых возможностей выводить графику в 1с.
Я нашел решение в виде технологии HTML5 canvas. Эта технология позволяет выводить 2d и псево-3d графику, анимацию, фильмы и много чего еще.
Для применения необходимы глубокие знания javascript.

УПРАВЛЕНИЕ ПЕРСОНАЖЕМ

с клавиатуры (клавиши движения WASD). Персонаж двигается, собирает ключи, открывает двери.

 

Содержимое файла архива:


- Файл в виде архива содержит в себе файл обработки, запускаемой в 1с а также файл index.html, который можно запустить в браузере (Front-end версия игры, без интеграции с 1с).
- В папке images содержатся изображения, используемые движком игры. Их можно заменить на свои, для улучшения внешнего вида.
- В папке js содержатся скрипты на javascript. Я редактирую их с помощью IDE PhpStorm и brackets.

 

Работоспособность в различных конфигурациях и версиях платформы:


- Работоспособность обработки проверена в следующих конфигурациях (устанавливал типовые демо-версии конфигураций, запускал из под пользователей с правами на интерактивный запуск внешних обработок): 1с УТ 10.3, УТ 11 (интерфейс такси и интерфейс во вкладках),УНФ, БП 3, ЗУП 3, 1с CRM (режим совместимости интерфейса с 1с 8.2, режим совместимости с платформой 8.2).
- В режиме Такси в ряде случаев, на медленных ноутбуках наблюдаются проблемы с запуском обработки. Обработка запускается, но окно игры не обновляется, пока не изменить размер окна 1с. Пока не знаю как побороть данную проблему. Есть подозрения, но их нужно тщательно проверять.
- Обработка запускается в конфигурациях на платформе не ниже 8.2 (ниже не проверял, возможно не работоспособность некоторых функций). Обычные формы, Управляемые формы, управляемый интерфейс Такси, управляемый интерфейс во вкладках.

 

Особенности реализации


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

 

Особенности интеграции 1с с кодом Javascript


- Передача команд управления коду javascript, получение расширенной информации из кода javascript (возможно создать сколь угодно сложный обмен данными с кодом javascript), получение информации о наступивших событиях из кода javascript, получение информации о состоянии встроенных объектов.
- Запуск процедур и функций встроенных в код javascript объектов прямо из кода 1с
- Отображение событий из встроенного кода javascript в виде сообщений 1с. 
Это всего лишь демонстрация, нужно развивать идею дальше.
Хорошо то, что на основе этого работающего прототипа можно реализовать сложное интегрированное с графическим движком на javascript, приложение в 1с.
- Процедуры и функции интеграции с 1с вынесены в отдельный js скрипт. Таким образом, можно запускать на исполнение файл index.html с отображением движка в браузере. Можно отдельно редактировать весь javascript проект, после чего запускать в 1с, без изменения интерфейса взаимодействия.
- Вывод сообщений об ошибках в коде javascript отключен при старте игры. Это сделано в целях играбельности. Пока не смог понять причины появления сообщений об ошибках в скриптах при вполне работоспособном коде.

 

PostScriptum


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

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

В сообществе разработчиков javascript меня бы закидали тухлыми помидорами за плохо структурированный код.

 

Хочу сказать в свою защиту то, что считаю главным достижением:


1. Я смог интегрировать HTML5 javascript приложение в исполняемую среду 1с.
В этом мне во многом помогли публикации на Инфостарт, огромное спасибо всем коллегам!
Прошу извинения, если я не упомянул вас в тексте, прошу тех, кого обидел, написать о себе в комментариях, вставлю ссылки на ваши публикации!
2. Изучал javascript программирование на примере создания браузерных игр. Это просто, быстро и легко.
3. Степень интеграции с 1с доведена до обмена данными в реальном времени.
К сожалению, есть с чем работать. На примере старых слабомощных компьютеров понял, что обмен данными медленный и код приходится ускорять.
Обмен данными необходимо развивать до создания параллельных процессов в памяти, которые по отдельности от процесса исполняемого приложения будут этим заниматься.
4. Интегрирован тайловый движок. Можно развить движок до вывода анимации, различных эффектов (параллакс эффект, псевдо-3d, и др.)
На основе данного движка можно создавать графические приложения для реальных конфигураций 1с, с обменом данными с кодом 1с, запуском команд, анимации и др.

Благодарности

1. Огромная благодарность автору публикации "HTML5 в ПолеHTMLДокумента на Управляемой форме - fireEvent в действии" //infostart.ru/public/347442/
Его публикация помогла мне воплотить задуманное!


2. Игра сделана по мотивам занятий по книге Криса Делеона "Как программировать игры на javascript" (на английском языке). Книгу можно скачать и прочитать (см. ссылки ниже). У автора книги есть отличные видеокурсы на сайте udemy.com (которые можно также найти и скачать на сайтах torrent, не буду говорить каких, запрещено в России).
Ниже есть ссылки для скачивания готового проекта игры для запуска в браузере (размещены энтузиастами на сайте GitHub).


Ссылки


- https://github.com/Majig/JS-WarriorLegend Front-End проект игры по материалам книги Криса Делеона. 
- http://mail.daleberan.com/gamedesign/Hands-On%20Intro%20to%20Game%20Programming-v5%20(1).pdf - книга от Криса Делеона, можно скачать и прочитать
- http://how-to-program-games.com/ официальный сайт автора книги (Крис Делеон) где можно все прочитать и найти ссылки на официальные курсы.
- http://chrisdeleon.com/ еще один сайт автора книги (Крис Делеон)

HTML HTML5 canvas javascript игра интеграция с 1с 1c HTML 1c canvas

См. также

Классическая игра "Змейка" на 1С (управляемые формы)

Игры Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Бесплатно (free)

Игра "Змейка" в классическом варианте на управляемых формах в 1С. Собирайте яблоки и ставьте рекорд!

09.02.2024    2687    140    emilyabochkova    12    

22

Ключворды в 1С

Игры Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Создавайте новые ключворды или разгадывайте существующие.

1 стартмани

05.02.2024    1541    1    alexpvs    0    

6

Игра "5 букв"

Игры Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Абонемент ($m)

Игра "5 Букв", сделанная на 1С. В игре загадано слово, существительное в единственном числе. Нужно отгадать загаданное слово.

1 стартмани

29.12.2023    936    2    APTEM_SLV    9    

6

Пятнашки

Игры Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

Цель - обучение хитростям нашей всеми любимой 1С.

28.11.2023    848    31    user1834118    0    

6

Кар магедон

Игры Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Россия Бесплатно (free)

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

01.11.2023    1677    38    user1834118    7    

11

Турнир по 1С. Танки на СКД

Игры Платформа 1С v8.3 Абонемент ($m)

Предлагаю свою версию турнира. Особенность этого турнира в том, что тут нет правильных или неправильных решений. Есть твое решение и решение твоих соперников. У кого решение лучше тот и победит.

1 стартмани

09.10.2023    1762    1    opx    1    

13

Плоский "Кубик Рубика"

Игры Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Вы можете собрать кубик Рубика? Я - только с помощью инструкции:). Попробуйте справиться с его плоским аналогом.

1 стартмани

29.05.2023    2016    7    Alxby    3    

13

Пасьянс Марии Стюарт (пасьянс Медичи) - попробуй изменить свою судьбу

Игры Платформа 1С v8.3 Россия Абонемент ($m)

Игра - пасьянс Марии Стюарт. Есть возможность создавать свои расклады, обмениваться раскладами и менять картинки карт.

1 стартмани

05.05.2023    2718    1    sandr13    0    

13
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. FesenkoA 57 13.08.18 11:22 Сейчас в теме
Если это демонстрация движка тогда назовите это не Игра а Демонстрация движка.
ИначеЕсли это игра тогда напишите как в нее играть, управление, смысл в чем + сделайте ее обновляемой, то есть поднимая версию - чтобы юзеры могли обновить ее не тратя очередной стармани.
Конецесли :)

также если вы опишите суть идеи, возможно кому то это понравится и будут помогать всм воплощать идею
7. pvlunegov 157 13.08.18 15:24 Сейчас в теме
(1) НЕ согласен. Это игра. простая. в виде одного уровня. Я так и написал в заглавии.
А ниже написал - это демонстрация.
Посмотрите внимательно в заглавии описаны клавишы управления.

Игра простая, в нее не наиграться.

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

Планы грандиозные, найти бы время на все это.

Самое главное - поддержка сообщества.
Без поддержки делать такой большой проект тяжело.
maxPromC; +1 Ответить
24. Touch_Of_Soul 29 13.09.23 20:00 Сейчас в теме
(7)Как я понимаю времени не нашлось(
8. pvlunegov 157 13.08.18 15:27 Сейчас в теме
(1) Есть планы на ОТДАЛЕННОЕ будущее - сделать отдельную базу для игры.
Цель - создание веб-сервера с подключением игроков.
Перспектива - ММО игра нескольких игроков в одной игре.
Например, совместное прохождение уровней.

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

Вообще я хотел сделать публикацию бесплатной, но не знаю как. Подскажите?
2. Steelvan 302 13.08.18 11:23 Сейчас в теме
Все это, конечно, здорово.

Только вы упретесь в масштабирование лицензионной политикой 1С.

Да и в среде 1С-ников это мало найдет практического применения из-за необходимости знать js.

Как на этом зарабатывать и какие задачи купцов это решает. Вот вопросы, от которых зависит, насколько это будет востребовано :)
3. pvlunegov 157 13.08.18 13:23 Сейчас в теме
Добрый день!
1. Вы все правильно сказали, необходимо знать javascript.
2. На играх в 1с не заработать. Это факт. Если не так, поправьте меня.
3. в среде 1С-ников это мало найдет практического применения.
Вы знаете, если сидеть в луже 1с и ждать у моря погоды, как делал я несколько лет, ничего не изменится.
Нужно брать себя в руки, ставить цели, постигать новые профессии, знания и применять их в среде 1с.
Я это сделал и вам того желаю.

Данная разработка просто пример применения js в 1с напрямую.
К сожалению, я не нашел толковых публикаций на данную тему.
Хотелось написать свою игру и разместить ее в 1с.
Задачу я эту себе поставил 2 года назад.

С тех пор перелопатид кучу курсов, освоил 2 профессии (php программист, javascript программист). Переезжать на новые профессии не хочу.
Нашел применение новым навыкам и знаниям в старой среде и даже новую работу.

Но детские мечты поиграть в игры в среде 1с не оставил.
Хоть мечты и детские, но от них я не отступаюсь спустя года.
1с научила настойчивости и достижения целей не смотря ни на что.

Планирую применять технологию интеграции js движков в 1с в реальных конфигурациях.

Вообще, читайте мои слова в публикации - эта игра лишь пример применения технологии интеграции в 1с (ну и способ поиграть)
CyberCerber; maxPromC; dsdred; +3 Ответить
4. pvlunegov 157 13.08.18 13:31 Сейчас в теме
Применение технологии есть и даже востребованы.
Пример - интеграция в js графики в мобильном приложении.
В эту сторону пока не копал.
Насчет масштабирования и лицензионной политики пожалуйста расскажите подробнее, не понятно.
Насчет технологиии - независимость от версии платформы, вида конфигурации (Любые формы), запуск пока лишь на компьютерах на Windows.
Лицензии не требуются - приложение интегрируется в виде обработки в любую конфигурацию, разрешение от фирмы 1с в этом случае не требуется, лишь права пользователя на запуск.
Если обработку интегрировать в конфигурацию, в этом случае вообще никаких ограничений по лицензий.

В случае запуска на веб сервере могут быть проблемы - необходимо упаковывать файлы Front-end проекта в архив и скачивать его при запуске обработки на стороне клиента с распаковкой во временную папку. Этот вариант возможен, я его продумывал.
5. efin 13.08.18 14:36 Сейчас в теме
В веб-клиенте работает? В каком браузере проверяли?
6. pvlunegov 157 13.08.18 15:17 Сейчас в теме
В веб клиенте не проверял.
Причина - если проверять в веб-клиенте то это имеет смысл для клиент-сервено ориентированных приложений.
У меня приложение чисто клиентское. Практически весь код исполняется на стороне клиента.
Встроенный браузер на стороне клиента принимает весь код js, код 1с получает и передает данные js коду.
Поэтому говорить о отладке в веб клиенте нет смысла.
Кроме того, если уж вам так хочется запуска в веб-клиенте, встает вопрос:
- Как передать через узкий канал связи огромные файлы картинок и js кода?
Сейчас в моем приложении несколько картинок и js кода, все это занимает пару килобайт (грубо), а когда проект разрастется, это будет в десятки, сотни раз больше (пара десятков - сотня мегабайт).
Как это дело передавать клиенту через веб-канал?

Тут встает вопрос о размещении файлов Front-end проекта на веб-сервере с передачей ссылки на него клиенту.
Клиент запускает приложение, автоматически скачиваются файлы и происходит сборка проекта на стороне клиента.

Все это дела я планирую на будущее, сейчас это пока рано.
9. Sapiens_bru 4 14.08.18 05:50 Сейчас в теме
Спустя десять итераций разработки вдруг окажется, что если клиентскую
1с заменить на electron - игру можно запустить вообще везде, а работать она будет на порядок быстрее.
Ещё спустя десять итераций придет понимание, что canvas неплохо бы заменить на unity и делать все то же на порядок проще.
Затем и вебсервисы 1с уйдут в историю в пользу на два прядка более быстрого самописного сервиса на пыхе+энжинкс.
Потом всё это плавно переедет на RPGmaker...

А где-то по ту сторону моря сидит профи разработчик на unity3d и source и пишет на них программу для бух.учета

PS Как тренировка новых навыков пойдет, как реальный проект в новой области - нет.
11. pvlunegov 157 14.08.18 06:55 Сейчас в теме
(9) Как тренировка новых навыков пойдет, как реальный проект в новой области - нет. --- не согласен.
Несколько лет назад все говорили что зачем нужно в 1с мобильное приложение?
Дескать применений не найти, ненужная чушь, 1с на телефоне - это нонсенс.
Я знаю частную фирму, которая ворочает миллионами благодаря мобильному приложению 1с. Потому что открываются возможности, которые УМНЫЕ люди используют в тех областях, которые другие, СИДЯЩИЕ В БОЛОТЕ, не могут вообразить.
Аналогичная ситуация с графикой в 1с.
За вс. свою карьеру я много раз встречал ситуации, когда рядовые пользователи просили программистов сделать им простейшие функции графические в 1с. Нет возможности.

А сейчас появилась. Появятся умные люди которые применят подход.
13. Sapiens_bru 4 14.08.18 13:46 Сейчас в теме
(11)
Несколько лет назад все говорили что зачем нужно в 1с мобильное приложение?

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

Ситуацию с графикой в 1С решать необходимо, с этим нельзя спорить. А вот игры в 1С не нужны. их быстрее и правильнее делать без 1С. Сама 1С платформа в качестве игрового движка - нонсенс.
10. pvlunegov 157 14.08.18 06:51 Сейчас в теме
На Unity3d умею программировать, делал игры и 3 мерные и двух мерные.
2х мерные игры на Unity 3d получаются громоздкие и большие по объему.
Пробовал приспособить Godot Engine или Cocos с получением экспортных приложений на HTML5. Получается громоздкие, частично не работающие монстрообразные приложения.
Если нужно написать простое графическое 2мерное приложение, то Unity3d не вариант.

Гораздо проще взять например Phaser и написать приложение на HTML5.
Думаю использовать именно Phaser для быстрого конструирования нужного приложения.
Получится нативный код + минифицированная библиотечка занимающая килобайты. Само приложение будет очень простое внутри с минимальным кодом.
Такое приложение после месячного курса освоит любой программист 1с и сможет поддержвать.

Я ратую за подход к интеграции 1с с графическими приложениями. Именно этого нет в 1с именно это востребовано на рынке.

К сожалению, для использования графических приложений в 1с, необходимо изцчать второй язык программирования, помимо 1с.
На эту роль прекрасно подходит javascript - всемирно известный, богатый возмодностями язык.
Переносить его в 1с нет смысла, абсолютно разная архитектура.
12. Steelvan 302 14.08.18 13:25 Сейчас в теме
14. dsdred 3251 14.08.18 21:57 Сейчас в теме
Данная разработка просто пример применения js в 1с напрямую.
К сожалению, я не нашел толковых публикаций на данную тему.
Хотелось написать свою игру и разместить ее в 1с.
Задачу я эту себе поставил 2 года назад.

С тех пор перелопатид кучу курсов, освоил 2 профессии (php программист, javascript программист). Переезжать на новые профессии не хочу.
Нашел применение новым навыкам и знаниям в старой среде и даже новую работу.

Но детские мечты поиграть в игры в среде 1с не оставил.
Хоть мечты и детские, но от них я не отступаюсь спустя года.
1с научила настойчивости и достижения целей не смотря ни на что.


Плюсанул за саморазвитие и достижение цели, так держать земляк!
16. pvlunegov 157 15.08.18 06:52 Сейчас в теме
15. PerlAmutor 129 15.08.18 06:40 Сейчас в теме
1С давно уже пора отходить от интеграции с Internet Explorer и внедрять браузерный движок типа chromium'а. Расширить язык 1С до технологии WebAssembly, разрешить использовать шейдеры (в том числе и на сервере).
CyberCerber; cefew; Reftp; YanTsys; +4 Ответить
17. a_titeev 31 15.08.18 07:26 Сейчас в теме
"И тут Остапа понесло"!
A.Sytchev; +1 Ответить
18. Wildsou1 17 16.08.18 07:41 Сейчас в теме
Обалдеть игра на 1с :) что же будет дальше с этим проектом .
19. Неопределено 90 16.08.18 08:01 Сейчас в теме
(18) Она на HTML5 и javascript. Игр на чистом 1С тут давно хватает.
20. silberRus 72 22.08.18 15:27 Сейчас в теме
ох, я бы помог тебе
но времени тоже совсем мало (
21. pvlunegov 157 22.08.18 18:08 Сейчас в теме
На данный момент занимаюсь интеграцией Javascript движка Phaser в 1с.
Создаю программный интерфейс для движка.
Суть в том, что прикладной программист 1с, не зная синтаксиса Javascript, владея начальными познаниями в ООП, сможет писать код на языке 1с. Код будет при нажатии на исполнение портироваться в код javascript и исполнятся во встроенном браузере с помощью библиотеки Phaser. Данная библиотека абсолютно бесплатна, с кучей примеров.
На ней можно очень быстро писать игры и графические приложения с анимацией и графикой. Код очень просто структурирован и одна игра занимает очень мало кода, по сравнению с нативным Javascript.
На данный момент моя разработка находится в стадии тестирования.
Портирую отдельные функции движка и тут же получаю видимый результат.
Планирую переносить по отдельному функционалу/блокам.
Вскоре могу выложить пре-альфа версию для ознакомления с портированным движком.
Скорость разработки существенно снижена, так как работаю по вечерам/ночам.
Все кто заинтересовался, пишите отвечу на вопросы.
22. пользователь 06.02.20 18:10
Сообщение было скрыто модератором.
...
23. пользователь 06.02.20 18:10
Сообщение было скрыто модератором.
...
Оставьте свое сообщение