Ein Versuch, das in CRascal verwendete bekannte CRT-Modul in JavaScript zu implementieren. Was dabei herauskam und was nicht, werde ich Ihnen sagen.
Eintrag
Meine Bekanntschaft mit dem Programmieren begann in der 8. Klasse, als ich in einer Informatikstunde zum ersten Mal erfuhr, was Pascal ist und welche Möglichkeiten es bietet. Dann wurde Turbo Pascal auf Schulcomputern installiert, obwohl der Informatiklehrer schon lange PascalABC.NET dort platzieren wollte. Natürlich begann alles mit den banalen Schlussfolgerungen der Zeile in der Konsole. Meine Tätigkeit zielte hauptsächlich auf eine hervorragende Vorbereitung auf die OGE ab. Es wurden keine Module studiert, da dies bei der Prüfung niemand benötigte.
Aber selbst wenn ich das Konsolenfenster mir selbst „unterordnen“, dort alles anzeigen konnte, Berechnungen durchführen, Eingaben des Benutzers akzeptieren konnte, war ich überrascht, wie cool es ist!
Aber die Zeit vergeht, das Leben verändert sich: die Prüfung bestanden, die Prüfung bestanden, die erfolgreiche Zulassung zur Universität. Während dieser ganzen Zeit habe ich mit großem Interesse neue Sprachen gelernt, wodurch ich sicher Websites schreiben kann, egal ob vorne oder hinten. Aus irgendeinem Grund interessiert mich Webprogrammierung am meisten.
Wie es zu CRT kam
In der Schule habe ich eines der interessanten Pascal-Module namens CRT studiert. Tatsächlich ist daran nichts Kompliziertes, der Befehlssatz ist zwar klein, aber Sie konnten im Konsolenfenster neue Dinge tun: Bewegen Sie den Cursor auf einem 80x25-Bildschirm (DOS-Bildschirmgröße), ändern Sie den Hintergrund und die Textfarbe, spielen Sie den Ton einer bestimmten Frequenz ab und Dauer. Es war möglich, vollwertige ASCII-Spiele darauf zu erstellen, die aufgrund ihrer geringen Größe praktisch keinen Speicherplatz auf der Festplatte beanspruchten.
Und jetzt, nach einigen Jahren, habe ich mich aus Interesse entschlossen, eine kleine js-Datei zu schreiben, wenn eine Verbindung besteht, mit der Sie mit dem Browserfenster wie mit dem Konsolenfenster arbeiten können. Ich werde gleich sagen, dass es sehr schwierig ist, wenn überhaupt möglich, alle Modulbefehle auf ihre Integrität und Sicherheit zurückzusetzen. Trotzdem ist JavaScript nicht Pascal. Aus diesem Grund gibt es hier einige Funktionen.
Die Idee selbst
Das Projekt hat eine sehr einfache Struktur aus drei Dateien:
- crt.js - Datei mit Funktionen, die mit der HTML-Datei verbunden werden sollen
- index.html - Datei - die Basis, die im Browser geöffnet werden soll
- user.js - eine leere Datei, in die der Programmierer seinen Code schreiben muss
Zuerst werde ich die Teams implementieren, die derzeit implementiert sind, und dann werde ich zeigen, wie sie funktionieren.
Die implementierten Befehle:
- gotoxy (x, y) - Bewegen Sie den Cursor auf die Koordinaten
- write (str) - Zeigt eine Zeichenfolge auf dem Bildschirm an
- clrscr () - Löscht den Bildschirm mit einem vorgewählten Hintergrund und bewegt den Cursor auf die Koordinaten 1,1
- textcolor (int) - Ändert die Farbe des Textes
- textbackground (int) - Ändert die Hintergrundfarbe
- Ton (fr, 1000) - Spielen Sie Ton mit einer Frequenz von fr und einer Dauer von 1 Sekunde ab
Lassen Sie uns ein Beispiel für das „Modul“ zeigen:
Code:
Ergebnis:
Es mag Ihnen scheinen, dass die Buchstaben voneinander getrennt sind. Ja, das ist es. Tatsache ist, dass hier der Inhalt der Seite durch divs in Teile unterteilt ist. Erinnern wir uns an die Größe des DOS-Fensters (80x25). Wie viele Divs gibt es? Das stimmt, 2000. Jeder von ihnen ist gleich groß. Im Allgemeinen wird beim Starten einer Seite die folgende Funktion automatisch ausgeführt:
Ich habe diese Arbeit speziell auf JS gepostet. Ich wollte, dass die HTML-Datei sauber und klar ist.
Ja, aufgrund dieses Schemas gibt es einen Effekt, wenn ich die Seite auf einem schwachen PC starte. Ich denke, dass nur 4-5 Sekunden lang geladen wird, da der Zyklus ziemlich kompliziert ist. Ich sehe keinen Sinn darin, jede Zeile zu kommentieren. Die Hauptaktionen auf dem Foto werden erklärt. Jedes Mal generieren wir ein Div mit bestimmten IDs und Parametern und fügen es dem Body hinzu. Jedes div enthält
nur ein Zeichen , wie es in DOS analog war (eine Zelle - ein Zeichen).
Das Arbeiten mit Koordinaten und Farben basiert auf folgenden Variablen:
Die
Befehle gotoxy (x, y), textcolor (int), textbackground (int) ändern einfach den Inhalt der Variablen xnow, ynow, color, bgcolor.
Bei Blumen gibt es interessante Punkte. Wie wir wissen, war es unter DOS möglich, eine Farbe aus einem Satz auszuwählen, in dem es nur 16 Farben gab. In Pascal können Sie über die Nummer (0-15) auf die Farbe zugreifen. Darüber hinaus wurde unter DOS der Hintergrund nur aus den ersten acht Farben und der Text aus allen 16 ausgewählt. Unter Windows in PascalABC.NET kann der Hintergrund aus allen 16 Farben geändert werden, wenn das Modul verbunden ist. Vielleicht haben nicht alle verstanden, was ich jetzt vermitteln wollte, aber lassen Sie uns anhand eines Beispiels erklären:
Alle Farben, die in der Konsole verwendet werden, werden hier aufgelistet. Wenn wir versuchen, den Hintergrund unter DOS in hellgrün (10) zu ändern, wird der Hintergrund grün (2), während die Schriftart die gewünschte Farbe annimmt. Aus irgendeinem Grund ist die Möglichkeit, den Hintergrund unter DOS (Free Pascal) zu ändern, auf acht Farben beschränkt.
Und nun zum Befehl clrscr, mit dem der Bildschirm mit einer bestimmten Farbe gelöscht wurde. In JS habe ich es folgendermaßen implementiert:
Hier ist nichts kompliziert. Wir durchlaufen alle Divs, wobei wir sie in jedem Inhalt leer machen (da in DOS Zeichen gelöscht werden) und den Hintergrund auf die Farbe ändern, die zuvor mit dem Befehl textbackground ausgewählt wurde. Und vergessen Sie natürlich nicht, den Cursor auf Position 1.1 (obere linke Ecke des Fensters) zurückzusetzen.
Das Interessanteste ist die Ausgabe des Strings mit dem Befehl
write . Ja, ich erinnere mich, dass noch geschrieben wird, aber ich dachte, dass ein Befehl ausreichen würde, da wir in dieser Situation nicht daran interessiert sind, den Cursor in eine neue Zeile zu bewegen.
Implementierung:
Hier war es notwendig, den Browser vor Fehlern zu schützen, falls die Benutzerzeile über das Fenster hinausgehen sollte (und es dort keine Divs gibt!). Daher wurde beschlossen, eine Schleife mit Schutzunterbrechung zu erstellen.
Jeder Buchstabe sollte die vollständig zugewiesene Zelle belegen, sodass die Schriftgröße von der Größe des Div abhängt. Vergessen Sie außerdem nicht, dass sich der Hintergrund hinter den Buchstaben zu dem ändern sollte, der mit dem Befehl textbackground festgelegt wurde.
Und schließlich ist die letzte Funktion Ton. Hier musste ich leider das Arbeitsschema des Teams ändern, da es schwierig ist, die Sound - Delay - Nosound - Kette zu implementieren. Übrigens konnte ich Delay noch nicht implementieren, es gibt keine Ideen, da setTimeout hier nicht geeignet ist.
Wir erinnern uns, dass Sie den Code schreiben müssen, um beispielsweise Ton mit einer Frequenz von 200 Hz und einer Dauer von 1 Sekunde auszugeben:
sound(200); delay(1000); nosound;
In JS musste ich Folgendes tun:
Aber dann funktioniert es! Implementierung:
Ich habe in meiner Tätigkeit noch nie eine so spezifische Funktion verwendet. Sie musste in die Dokumentation schauen. Wenn jemand die Arbeit überprüft, seien Sie vorsichtig, nachdem ein lautes Zuhören Ohren verletzen kann.
Wenn Sie diese Funktion verwenden, beginnt Chrome aus offensichtlichen Gründen zu schwören:
Ich habe versucht, das Problem mit setTimeout zu lösen, dies funktioniert jedoch nicht immer.
Wenn Sie beim Laden schnell auf die Seite klicken, wird der Ton wiedergegeben, aber das ist eine ganz andere Geschichte.
Fazit
Auch nach dem aktiven Layout von Websites möchte ich versuchen, etwas Ungewöhnliches zu schreiben, auch wenn es keinen praktischen Nutzen hat. Pascal mit seinem CRT-Modul hat mich damals wirklich beeindruckt, was mich ermutigte, Programmiersprachen weiter zu lernen. Oder sollten Sie etwas im ASCII-Stil schreiben?
Nur für den Fall, poste es auf GitHub