Уже более 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:// в браузере
