🐇 💠 😊 JS-DOS API：ブラウザーでDOSを起動 🤚🏾 ➖ 😳

5年以上にわたり、emscriptenプロジェクトが存在しました。プロジェクトが存在する間、多くの作業が行われました。洗練された読者を驚かせるのはずっと難しくなっています。ブラウザーでは、DOOM、Dune 2、TTD、C＆Cなどを既に見てきました。ただし、DOSプログラムをブラウザで実行することは依然として困難です。C/ C ++を理解し、スクリプトを正しく記述する必要があります。 Dosboxの実験の結果、em-dosboxプロジェクトが作成され、ほとんどのDOSプログラムがブラウザで利用可能になりました。最後に、ブラウザーでDOSプログラムを実行するためのオープンAPIを作成するだけです。

聖地は決して空ではありません。概念はシンプルで、必要なDOSプログラムを実行するには：

プログラムを含むZIPアーカイブ（実行可能ファイル+必要なリソース）
JavaScriptの最小限の知識
静的なHTMLを提供するサーバー

路地猫

素晴らしい暖かさで思い出す素晴らしい1983年のゲーム。このゲームには多くの素晴らしいアイデアが実装されており、おそらくこれがミニゲームを備えた最初のゲームです。もう一度子供時代の世界に飛び込んでみてください。だから、実行してみてください。

まず、dosbox画面のサイズをページスタイルで設定し、 dosbox-containerクラスのサイズを設定する必要があります。これは、dosbox画面のスタイルを設定するためのユーティリティクラスです。

.dosbox-container { width: 640px; height: 400px; }

初期化後にdosbox画面が配置されるDOM要素を作成しましょう。 id属性を介して参照できる任意のDOM要素を使用できます。

 <div id="dosbox"></div>

初期化プロセス中に、js-dosは、ゲームのロードプロセスを表示する子DOM要素と、dosbox画面を表示するキャンバス要素を作成します。

注：どのブラウザーでもFPSが大幅に沈下するため、dosboxの画面を影や半透明のグラデーションでスタイリングすることはお勧めしません。

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 -dosboxインスタンスを作成するDOM要素の一意の識別子
onload -dosboxが正常に起動した後に呼び出されるコールバック関数
onrun-プログラムがdosbox内で正常に起動された後に呼び出されるコールバック関数

行06は、実際のゲーム起動コードを示しています。

 06. dosbox.run("http://js-dos.com/cdn/alley_cat.zip", "./CAT.EXE");

最初の引数は、ゲームのzipアーカイブへのURLです。このアーカイブはダウンロードされ、dosbox仮想ファイルシステムに解凍されます。
2番目の引数は、実行するプログラムの実行可能ファイルです。パスは、アーカイブファイルシステムのルートに相対的です。

ページは完全にプランク。

ソースコード

 <!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などを実行できます。

PS：ファイルを使用してソースコードを実行できます：//ブラウザのプロトコル

JS-DOS API：ブラウザーでDOSを起動

路地猫

More articles: