Уже более 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:// в браузере
ссылка на оригинал статьи http://habrahabr.ru/post/271363/
Добавить комментарий