Pull to refresh

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

Reading time 3 min
Views 22K
Уже более 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:// в браузере
Tags:
Hubs:
+23
Comments 18
Comments Comments 18

Articles