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

  • Tutorial
Уже более 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.

<div id="dosbox"></div>

В процессе инициализации 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.

Исходный код
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>js-dos api</title>
    <style type="text/css">
      .dosbox-container { width: 640px; height: 400px; }
      .dosbox-container > .dosbox-overlay { background: url(http://js-dos.com/cdn/alley_cat.png); }
      .dosbox-start { font-size: 35px !important; }
    </style>
  </head>
  <body>
    <div id="dosbox"></div>
    <br/>
    <button onclick="dosbox.requestFullScreen();">Make fullscreen</button>
    
    <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>
  </body>
</html>


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

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

Подробнее
Реклама
Комментарии 18
  • 0
    Почему-то скачанный архив игры локально не запускается, отображается приветственное окошко «Welcome to DOSBox v0.74» если писать без «file://», а если с «file://», то зависает на «Initializing dosbox».
    • 0
      Политика безопасности браузеров не позволяет делать XHR запросы по протоколу file://. Если вы посмотрите логи то скорее всего там написано:

      XMLHttpRequest cannot load file
      XMLHttpRequest cannot load file:///home/caiiiycuk/tmp/dosbox/alley_cat.zip. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

      Если же написано что-то другое, то отправте логи личным сообщением.

      • 0
        Можно использовать data: протокол:
        «data:application/zip;base64,<base64_encoded_binary>»

        Для конвертации в Base64 можете использовать, например, это. Либо скачать/написать утилиту для конвертации.
    • 0
      А есть нормальный способ запускать игрушки под DOS4GW?
      Всякие там NFS первые и т.д.
    • 0
      Если кому интересно, игра моего детства: The Mice Men (Судя по беглому осмотру сурцов, для эмуляции они тоже используют emscripten).
      Незамысловатая, но весьма интересная пошаговая стратегия, цель — провести всех своих персонажей до противоположного конца поля быстрее, чем это сделает противник. С одним нюансом: перемещать можно только столбцы на поле целиком.
      • 0
        А мозаик под этой штукой будет? Эмулятор приложений должен уметь запускать браузер.
        • 0
          в песочнице сеть не доступна
          • 0
            В emscripten есть поддержка сокетов и они работают не плохо, например, в TTD работает игра по сети без особых глюков. Не очень понял что за песочница? Если вы про dosbox, то наверное его можно настроить соответствующим образом.
            • 0
              хм, не знал. Помню, что в этой виртуальной машине сетевых интерфейсов, кроме lo, не было по причине того, что браузер не позволяет в сеть посылать что попало и куда попало.

              P.S.: Песочница имелась в виду в этом контексте:
              Your web browser essentially runs web pages you visit in a sandbox. They’re restricted to running in your browser and accessing a limited set of resources.
              • 0
                Действительно браузер не позволит отправлять данные куда попало. Но если запустить прокси на сервере, а браузеру который будет запущен в эмуляторе прописать этот прокси, тогда все взлетит. Давайте попробуем? Mosaic поддерживает прокси?
          • 0
            Простите, что такое мозаик?
            • 0
              древний браузер NSCA Mosaic, только я что-то не припомню, чтобы его под DOS выпускали. Но под эту платформу точно lynx и arachne были.
          • 0
            Командная строка виснет, хоть command.com, хоть ndos.com. Mount.com вешает. Subst.com вешает. Тут хоть что–нибудь вообще работает?
            • 0
              Есть проблемы с infinite loop и с чтением stdin т.к. эти операции блокриующие, то мы никогда не получаем управление обратно в браузер. Эти проблемы были решены в последних версиях em-dosbox. Попробуйте напрямую запустить (https://github.com/dreamlayers/em-dosbox), у меня нет времени обновить js-dos до последней версии em-dosbox.
              • 0
                Выяснил, что там какой–то лимит на две запущенных программы. Первая — mount, вторая — это собственно запущенная программа, но если вместо программы там будет ещё один mount или subst, после него всё равно всё остановится.
                Сделал у себя пока такое: http://online.pascal.net.ru/1
                Если Crt подключать, проблема с чтением stdin не возникает. Я думал, kstack.com её решит, ведь он, как и модуль Crt, вроде как содержит собственный обработчик клавиатуры, но, видимо, нет.
                • 0
                  Увы, но для меня пока «напрямую запустить em-dosbox» — не понятная операция по сравнению с запуском JS-DOS.
                  • 0
                    Хмм, мне понравилась твоя задумка, попробую обновить js-dos на последнюю версию em-dosbox.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.