JS-DOS API: запускаємо DOS у браузері

Вже більше 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:// в браузері

Джерело: Хабрахабр
  • avatar
  • 0

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.