Como convertir una aplicación de MS-DOS en una aplicación web.

Seguro que todos los que tenemos cierta edad tenemos programas desarrollados para MS-DOS que siempre hemos querido recuperar pero nunca hemos tenido tiempo de volver a programarlos en algo más moderno. En mi caso eran varios videojuegos que había desarrollado cuando era adolescente.

Para ello vamos a usar dos herramientas: DOSBox, JS-DOS (en este caso la versión 6.22).

Preparando la aplicación

Lo primero de todo es montarse DOSBox en tu ordenador e instalar la aplicación que queramos usar en la web. Vamos a llamarla programa.exe. Una vez instalada la iniciamos y la configuramos tal y como queramos que se ejecute desde la web. Si necesitamos incluir algún fichero para que lo abra la aplicación ahora es el momento.

Una vez terminado el paso necesitamos comprimir todos los ficheros necesarios para que funcione la aplicación en un fichero zip. Lo ideal sería que el ejecutable programa.exe quede directamente en la raíz del zip para que al descomprimirlo no quede dentro de ninguna carpeta.

Todo este proceso no es necesario que lo hagamos desde DOSBox, para instalar la aplicación hay que “montar’ una carpeta del ordenador como si fuera una unidad de disco de DOSBox, puedes comprimir allí los ficheros.

Ejecutandola en una web

Vamos a suponer que el fichero se llama programa.zip. Ahora vamos a preparar la web.

Necesitaremos un canvas en el que se ejecutará el emulador de MS-DOS, para referenciarlo vamos a usar el id “jsdos”. Para fijar de el tamaño del canvas usaremos CSS.

Debajo se puede ver el código completo:

<!doctype html>

<head>
    <meta charset="utf-8">
    <title>Programa.exe</title>
    <script src="js-dos.js"></script>
    <style>
        #jsdos, .dosbox-container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <canvas id="jsdos"></canvas>   
    <script>
    Dos(document.getElementById("jsdos"), {
        autolock: true
    }).ready(function (fs, main) {
        fs.extract("programa.zip").then(function () {
            main(["-c", "programa.exe"]).then(function (ci) {              
                window.ci = ci;
            });
        });
    });
    </script>
</body>

</html>

Su funcionamiento es sencillo y se puede entender sin demasiadas explicaciones, algunos puntos que se necesitan aclarar:

fs.extract(“programa.zip”) descomprime el fichero zip en el directorio raiz C:

main([“-c”, “programa.exe”]) el primer comando va a C: y el segundo ejecuta programa.exe

window.ci = ci; Permite acceder a la API de DosCommandInterface desde cualquier parte de la web.

autolock: true Sirve para capturar el ratón automáticamente cuando se hace click sobre el canvas. Si tu aplicación no usa el ratón para nada puedes prescindir de ponerlo.

Algunas funciones interesantes

  • Entra y salir de modo pantalla completa ci.fullscreen(), ci.exitFullscreen()
  • Realiza una captura de pantalla ci.screenshot()
  • Simular pulsacioenes de teclas ci.simulateKeyPress(keyCode), ci.simulateKeyEvent(keyCode, pressed)
  • Ejecutar comandos ci.shell([cmd1, cmd2, …])

Problemas

Aquí recopilo un listado de cosas que me han dado problemas:

  • Resoluciones raras de pantalla. Forzar la aplicación en formatos que distorsionan mucho el formato 4:3 habitual de los monitores de esa época
  • El sonido no siempre va tan bien como sería deseable
  • El ratón, muchas aplicaciones de MS-DOS usan falsos ratones, imágenes que superponen donde debería estar el ratón. Algunos dan problemas.
  • El uso desde el móvil no está resuelto, aunque no es algo fácil de solucionar. El punto bueno es que te dan la herramientas básicas para que trates de resolverlo.

Ideas interesantes

Algunas ideas interesantes que se me ocurrieron pero no he tenido oportunidad o tiempo de intentaras.

  • Aunque JS-DOS ofrece alguna formas de ejecutar múltiples comandos hay soluciones como los ficheros de procesamiento por lotes .bat
  • Se pueden asociar comandos de MS-DOS, pulsaciones de teclas o del ratón a acciones en la web esto puede dar lugar a interesantes formas de interactuar con la aplicación (incluso de hacerla más accesible)
  • Un gamepad virtual sobre el canvas donde se ejecuta la aplicación. Para usar juegos desde el móvil es imprescindible
  • Usando Apache Cordoba o PhoneGap se podría convertir la web en una aplicación móvil. Aunque no sé si tiene utilidad más allá de entretenerse un rato probando
  • Lo mismo que el punto anterior pero en el escritorio con electron