Темы



JS-DOS API: запускаем DOS в браузере01.12.2015 10:03

e96af52486714c05a7d1c327848e7bf2.pngУже более 5 лет существует проект emscripten. За время существования проекта была проделана огромная работа. Удивить искушенного читателя стало гораздо сложнее. Мы уже видели DOOM, Dune 2, TTD, С&C и много чего ещё в браузере. Однако, запустить DOS программу в браузере по прежнему сложно: нужно не плохо разбираться в C/C++ и emscripten. Эксперименты с Dosbox вылились в проект em-dosbox, большинство DOS программ стали доступны для браузера. Что бы поставить точку, осталось лишь создать открытое API для запуска DOS программ в браузере.
Свято место пусто не бывает. Концепция проста, для запуска DOS программы понадобится:

  • ZIP архив с программой (исполняемый файл + необходимые ресурсы)
  • Минимальное знание JavaScript
  • Сервер отдающий статический html


Alley Cat


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

В первую очередь нужно задать размер экрана dosbox, в стилях страницы задаем размеры классу dosbox-container. Это служебный класс для стилизации экрана dosbox.

.dosbox-container { width: 640px; height: 400px; }

Создадим DOM элемент в котором после инициализации будет размещён экран dosbox. Можно использовать любой DOM элемент на который можно сослаться через атрибут id.


В процессе инициализации js-dos создаст дочерние DOM элементы для отображения процесса загрузки игры и элемент canvas для отображения экрана dosbox.

Примечание: не рекомендую стилизовать экран dosbox тенями или полупрозрачными градиентами из за значительного проседание FPS в любом браузере.

Осталось лишь подключить и настроить движок js-dos.

01.    <script type="text/javascript" src="http://js-dos.com/cdn/js-dos-api.js"></script>
02.    <script type="text/javascript">
03.      var dosbox = new Dosbox({
04.        id: "dosbox",
05.        onload: function (dosbox) {
06.          dosbox.run("http://js-dos.com/cdn/alley_cat.zip", "./CAT.EXE");
07.        },
08.        onrun: function (dosbox, app) {
09.          console.log("App '" + app + "' is runned");
10.        }
11.      });
12.   </script>


Первой строкой подключаем движок js-dos, скрипт можно скачать и использовать локально. Далее приведен код создания экземпляра dosbox (строка 03).

  • id — уникальный идентификатор DOM элемента в котором нужно создать экземпляр dosbox
  • onload — функция обратного вызова которая будет вызвана после успешного запуска dosbox
  • onrun — функция обратного вызова которая будет вызвана после успешного запуска программы внутри dosbox


В строке 06 приведен фактический код запуска игры.

06.   dosbox.run("http://js-dos.com/cdn/alley_cat.zip", "./CAT.EXE");


  • Первый аргумент — url до zip архива с игрой. Этот архив будет закачан и распакован в виртуальную файловую систему dosbox
  • Второй аргумент — исполняемый файл программы для запуска. Путь указывается относительно корня файловой системы архива


Страничка целиком plunk.

Исходный код 


  
    
    
    js-dos api
    
  
  
    

    

    
    
    <script type="text/javascript" src="http://js-dos.com/cdn/js-dos-api.js"></script>
    <script type="text/javascript">
      var dosbox = new Dosbox({
        id: "dosbox",
        onload: function (dosbox) {
          dosbox.run("http://js-dos.com/cdn/alley_cat.zip", "./CAT.EXE");
        },
        onrun: function (dosbox, app) {
          console.log("App '" + app + "' is runned");
        }
      });
    </script>


Теперь вы можете запустить Alley Cat или что угодно ещё в браузере.

P.S.: Исходный код можно запустить по протоколу file:// в браузере

© Habrahabr.ru