Для запуска DOS программы понадобится:
ZIP архив с программой (исполняемый файл + необходимые ресурсы)
Сервер отдающий статический html
В первую очередь нужно задать размер экрана 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
Второй аргумент — исполняемый файл программы для запуска. Путь указывается относительно корня файловой системы архива



Комментировать с помощью: