Si el módulo CRT de Pascal estaba en JavaScript

Un intento de implementar el conocido módulo CRT utilizado en Pascal en JavaScript. Lo que salió de eso y lo que no, te lo diré.

Entrada


Mi conocimiento de la programación comenzó en el octavo grado, cuando aprendí por primera vez en una lección de informática qué es Pascal y qué oportunidades ofrece. Luego se instaló Turbo Pascal en las computadoras de la escuela, aunque el profesor de ciencias de la computación había querido poner PascalABC.NET allí. Por supuesto, todo comenzó con las conclusiones banales de la línea en la consola, mi actividad estaba dirigida principalmente a una excelente preparación para el OGE. No se estudiaron módulos, porque nadie requirió esto en el examen.

Pero incluso cuando podía "subordinar" la ventana de la consola a mí mismo, mostrar todo lo que quería allí, hacer cálculos, aceptar comentarios del usuario, ¡me sorprendió lo genial que es!

Pero el tiempo pasa, la vida cambia: el examen aprobado, el examen aprobado, la admisión exitosa a la universidad. Todo este tiempo he estado estudiando nuevos idiomas con gran interés, como resultado de lo cual puedo escribir sitios web de forma segura, ya sea al frente o al reverso. Por alguna razón, la programación web me interesa más.

Cómo llegó a CRT


De vuelta en la escuela, estudi√© uno de los interesantes m√≥dulos de Pascal llamado CRT. De hecho, no hay nada complicado, el conjunto de comandos es, de hecho, peque√Īo, pero le permitieron hacer cosas nuevas en la ventana de la consola: mover el cursor en una pantalla de 80x25 (tama√Īo de pantalla de DOS), cambiar el fondo y el color del texto, reproducir sonido de una frecuencia determinada y duraci√≥n Era posible crear juegos ASCII completos, que pr√°cticamente no ocupaban espacio en el disco duro debido a su peque√Īo tama√Īo.

Y ahora, despu√©s de varios a√Īos, decid√≠, basado en el inter√©s, escribir un peque√Īo archivo js, ‚Äč‚Äčcuando est√© conectado, con el que puede trabajar con la ventana del navegador como con la ventana de la consola. Dir√© de inmediato que es muy dif√≠cil, si es posible, restaurar todos los comandos del m√≥dulo a su integridad y seguridad. A√ļn as√≠, JavaScript no es Pascal, debido a esto, hay algunas caracter√≠sticas aqu√≠.

La idea misma


El proyecto tiene una estructura muy simple de tres archivos:

  • crt.js : archivo con funciones que se conectar√°n al archivo html
  • index.html - archivo - la base que debe abrirse en el navegador
  • user.js : un archivo vac√≠o en el que el programador debe escribir su c√≥digo

Primero, nombraré los equipos que están implementados actualmente, y luego mostraré cómo funcionan.

Los comandos implementados:

  • gotoxy (x, y) : mueve el cursor a las coordenadas
  • write (str) : muestra una cadena en la pantalla
  • clrscr () : borra la pantalla con un fondo preseleccionado y mueve el cursor a las coordenadas 1,1
  • textcolor (int) : cambia el color del texto
  • textbackground (int) : cambia el color de fondo
  • sonido (fr, 1000) : reproduce sonido con una frecuencia de fr y una duraci√≥n de 1 segundo

Vamos a mostrar un ejemplo del "módulo":

Código:

imagen

Resultado:

imagen

Puede parecerle que las letras est√°n separadas entre s√≠. Si lo es. El hecho es que aqu√≠ el contenido de la p√°gina est√° dividido en partes por divs. Recordemos el tama√Īo de la ventana de DOS (80x25). Entonces, ¬Ņcu√°ntos divs hay? As√≠ es, 2000. Cada uno de ellos es del mismo tama√Īo. En general, cuando inicia una p√°gina, la siguiente funci√≥n se realiza autom√°ticamente:

imagen

Publiqué específicamente este trabajo en JS. Quería que el archivo html estuviera limpio y claro.

imagen

Sí, debido a este esquema, hay un efecto, cuando inicio la página en una PC débil, creo que solo se cargará durante 4-5 segundos, porque el ciclo es bastante complicado. No veo el punto de comentar en cada línea, se explican las principales acciones en la foto. Cada vez que generamos un div con cierta identificación y parámetros y lo agregamos al cuerpo. Cada div contiene solo un carácter , como lo fue por analogía en DOS (una celda - un carácter).

Trabajar con coordenadas y colores se basa en estas variables:

imagen

Los comandos gotoxy (x, y), textcolor (int), textbackground (int) simplemente cambian el contenido de las variables xnow, ynow, color, bgcolor.

Con flores hay puntos interesantes. En DOS, como sabemos, era posible elegir un color de un conjunto en el que solo hab√≠a 16 colores. En Pascal, puede acceder al color usando el n√ļmero (0-15). Adem√°s, en DOS, el fondo se seleccion√≥ solo de los primeros ocho colores y el texto de los 16. Mientras que en Windows en PascalABC.NET, cuando el m√≥dulo est√° conectado, el fondo se puede cambiar de los 16 colores. Quiz√°s no todos entendieron lo que quer√≠a transmitir ahora, pero expliquemos con un ejemplo:

imagen

Todos los colores que se usan en la consola se enumeran aquí. Si intentamos cambiar el fondo en DOS a verde claro (10), el fondo se volverá verde (2), mientras que la fuente se convertirá en el color que requerimos. Por alguna razón, la capacidad de cambiar el fondo en DOS (Free Pascal) está limitada a ocho colores.

Y ahora sobre el comando clrscr, que borró la pantalla con un color específico. En JS, lo implementé así:

imagen

No hay nada complicado aquí. Recorremos todos los divs, donde en cada contenido lo hacemos vacío (ya que en DOS los caracteres se borran) y cambiamos el fondo al color seleccionado de antemano por el comando textbackground. Y, por supuesto, no olvide devolver el cursor a la posición 1.1 (la esquina superior izquierda de la ventana).

Lo m√°s interesante es la salida de la cadena con el comando de escritura . S√≠, recuerdo que todav√≠a hay escritura, pero pens√© que un comando ser√≠a suficiente, ya que en esta situaci√≥n no estaremos interesados ‚Äč‚Äčen mover el cursor a una nueva l√≠nea.

Implementación

imagen

Aquí era necesario proteger el navegador de errores, en caso de que la línea de usuario fuera más allá de los bordes de la ventana (¡y no hay divisiones allí!). Por lo tanto, se decidió hacer un bucle con ruptura de protección.

Cada letra debe ocupar la celda totalmente asignada, por lo que el tama√Īo de la fuente se rige por el tama√Īo del div. Adem√°s, no olvide que el fondo detr√°s de las letras debe cambiar al establecido por el comando textbackground.

Y finalmente, la √ļltima funci√≥n es el sonido. Aqu√≠, desafortunadamente, tuve que cambiar el esquema de trabajo del equipo, ya que es dif√≠cil implementar la cadena de sonido, retraso y sonido. Por cierto, a√ļn no he podido implementar el retraso, no hay ideas, ya que setTimeout no es adecuado aqu√≠.

Recordamos que para emitir, por ejemplo, sonido con una frecuencia de 200 Hz y una duración de 1 segundo, debe escribir el código:

sound(200); delay(1000); nosound; 

En JS, tuve que hacer esto:

imagen

Pero entonces funciona! Implementación

imagen

Nunca he usado una función tan específica en mi actividad. Tenía que echar un vistazo a la documentación. Si alguien revisa el trabajo, tenga cuidado, después de escuchar con fuerza, los oídos pueden doler.

Es cierto que, al usar esta función, Chrome, por razones obvias, comienza a jurar:

imagen

Traté de resolver el problema con setTimeout, sin embargo, esto no siempre funciona.

Pero si hace clic r√°pidamente en la p√°gina durante la carga, el sonido se reproduce, pero esta es una historia completamente diferente.

Conclusión


Incluso despu√©s del dise√Īo activo de los sitios, quiero intentar escribir algo inusual, incluso si no tiene un beneficio pr√°ctico. Pascal con su m√≥dulo CRT realmente tuvo un efecto en m√≠ en ese momento, lo que me anim√≥ a seguir aprendiendo lenguajes de programaci√≥n. ¬ŅO tal vez deber√≠as escribir algo en estilo ASCII?

Por si acaso, lo publiqué en GitHub

Source: https://habr.com/ru/post/438690/


All Articles