Editor

Broschüre

Anleitung zum Herunterladen

Links

Der Editor funktioniert nur mit Chrome-Browser, Tablet oder Telefon . Für exportierte Spiele, bei denen zunächst der Editor entfernt wird, gibt es jedoch keine Einschränkung.

• Live
• Herunterladen
  • Laden Sie bacione.html herunter
  • Öffnen Sie Ihren Dateimanager
  • Klicken Sie auf bacione.html, um es in Ihrem Chrome-Browser auszuführen
  • Klicken Sie auf „Ausführen“, um das Skispiel zu spielen
• Games.pdf - Tutorial für Ski und Marslander
• YouTube – Produktdemo
• Reddit – Reddit-Diskussionen
• Github – Github-Diskussionen

Bacione?

Bacione bedeutet „großer KUSS“, wie in „Keep It Satisfyingly Simple“.

Zweck

Kleine Javascript-Spiele offline auf einem Telefon programmieren

Mission

Erstellen Sie die Daumen-freundlichste IDE ihrer Klasse

Design

Das Designziel dieses Editors besteht darin, ein angenehmes Erlebnis für diejenigen zu bieten, die keinen Computer haben oder einfach ein Telefon oder Tablet zum Programmieren kleiner JavaScript-Spiele bevorzugen. Weitere angesprochene Einschränkungen sind der Offline-Betrieb und das Fehlen einer externen Tastatur (Tippen auf dem Bildschirm mit dem Daumen oder Stift). Zwar gibt es viele Editoren und Tastatur-Apps, die für diesen Anwendungsfall geeignet sind, sie sind jedoch alle nicht optimal. Die beiden Hauptprobleme sind die Reduzierung der Klicks für: 1) den Zugriff auf Sonderzeichen und 2) die Umgestaltung. Um Nr. 1 zu lösen, ist es notwendig, eine Zusatztastenfunktion zu unterstützen oder eine Tastatur-App zu installieren. Um Nr. 2 zu lösen, muss dafür gesorgt werden, dass das Refactoring weniger Klicks erfordert. Nach der Lösung dieser beiden Probleme wird ein großer Teil des Bildschirms eingenommen, so dass nur noch wenig Platz für den Codebereich bleibt. Um dieses Problem zu lösen, verfügt der Editor über eine integrierte Tastatur und effiziente Refactoring-Tools.

Merkmale

• Weniger Klicks im Vergleich zu anderen Telefon-Editoren.
• Gemeinsame Tasten sind mit einem Klick erreichbar.
• Kontextbewusste Logik reduziert Klicks.
• Weniger Aufwand für die Umgestaltung Ihres Codes.
• Voll programmierbare Tastatur.
• Erstellen Sie Ihre eigenen Tastatursymbole und -funktionen.
• Entwickelt für Telefone und Tablets.
• Keine Einrichtung erforderlich.
• Eine Datei.
• Einfach zu teilen.
• Offline.
• Einfaches Vanilla-JavaScript.
• Keine Abhängigkeiten.
• Kostenlos (GPL-Lizenz)
• Keine Werbung
• Vom Android-Dateimanager im Chrome-Browser ausführen.
• Einfach zu modifizierender Editor.
• Bearbeiten Sie den Editor im Editor.
• Der Editor ist nur 7 Kilobyte groß.
• Unterstützt Swipe und Longpress-Repeat.

Einschränkungen

• Unterstützung des Porträtmodus : Dieser Editor unterstützt nur den Porträtmodus.
• Kompatibilität : Der Editor funktioniert nur mit dem Chrome-Browser auf einem Tablet oder Telefon. Bei exportierten Spielen, bei denen der Editor entfernt wird, gibt es jedoch keine derartigen Einschränkungen.
• Multi-Dateien: Der Editor ist nicht für große Spiele oder Projekte mit mehreren Dateien konzipiert. Dies liegt daran, dass das Öffnen einer HTML-Datei über den Dateimanager auf Android im Chrome-Browser nicht mehrere Dateien unterstützt – alles muss in einer einzigen, monolithischen HTML-Datei enthalten sein. Dies bedeutet auch, dass externe Bilder oder Audiodateien nicht verwendet werden können. Stattdessen können programmgesteuert erstellte Elemente verwendet werden. Beispielsweise verwendet das Spiel Marslander Vektorgrafiken und einen Rauschgenerator, und mehrere andere Spiele verwenden Emojis.

Wenn dieser Editor Ihre Anforderungen nicht unterstützt, können Sie Neovim mit Termux und Apache ausprobieren. Meine Konfiguration für diese Tools finden Sie hier.

Probleme

• Fehlausrichtung des Cursors : Wenn Sie am Ende der Datei im Editorfenster stark nach oben wischen, kann dies dazu führen, dass der Cursor nicht mehr am Text ausgerichtet ist. Eine empfohlene Problemumgehung besteht darin, vom Ende etwas Abstand zu nehmen.

Notizen

Alle Verweise auf Änderungen unten beziehen sich auf die Funktion „Bearbeiten im Editor“ , die in der Schaltfläche „Verschiedenes“ zu finden ist und durch das Rautensymbol dargestellt wird.

• Edit-the-Editor : Der Editor kann innerhalb des Editors bearbeitet werden. Da es sich jedoch nicht um eine Live-Datei handelt, müssen Sie auf „Speichern“ klicken und die neu erstellte HTML-Datei mit Zeitstempel öffnen. Wenn das neue kaputt ist, öffnen Sie Ihr vorheriges. Diese Funktion soll einfache Änderungen unterstützen. Komplexe Änderungen sollten in einer robusteren Umgebung wie Neovim durchgeführt werden.
• Ausführen : Mit der Schaltfläche „Ausführen“ wird das Spiel ausgeführt oder gestoppt, in dem sich der Cursor befindet. Der Einfachheit halber ist der Spielrahmen quadratisch und wird über der Tastatur angezeigt. Dies erleichtert das Hin- und Herwechseln zwischen Bearbeiten und Ausführen ( 2-Klick-Roundtrip ). Wenn dies einschränkend erscheint und Sie einen größeren Spielrahmen wünschen, können Sie den Editor oder den Canvas-Größencode in der Bibliothek ändern oder die Bibliothek gar nicht erst verwenden. Sie können auch alles, was sich in der Editoransicht befindet, mit der Schaltfläche „Spiel exportieren“ exportieren. Möglicherweise möchten Sie sogar die Funktionsweise der Funktion exportgame() ändern . Der Nachteil bei der Verwendung von Export besteht darin, dass Sie diese HTML-Datei anschließend über den Android-Dateimanager ausführen müssen ( 7-Klick-Roundtrip ).
• Tastaturgröße : Die Größe der Tastatur ist die verbleibende Fläche nach Berücksichtigung eines quadratischen Spielrahmens. Das bedeutet, dass die Tastaturbreite bei einem Telefon etwa der Breite des Bildschirms und bei einem Tablet etwa der Hälfte der Bildschirmbreite entspricht.
• Tastaturposition : Bei einem Tablet befindet sich die Tastatur in der unteren rechten Ecke. Wenn Sie zum Tippen Ihren linken Daumen anstelle Ihres rechten Daumens verwenden, können Sie dies ändern .
• Benutzerdefinierte Tastaturfunktion : Dieser Editor ist besonders nützlich, da er über eine benutzerdefinierte Tastatur verfügt, über die alle Hauptfunktionen mit einem Klick zugänglich sind. Um dies zu unterstützen, sind 22 der 32 für die Programmierung wichtigen Sonderzeichen mit einem Klick zugänglich, während die restlichen 10 über die Umschalttaste zugänglich sind. Beachten Sie, dass die Leertaste ungewöhnlich klein ist und sich in der unteren rechten Ecke befindet. Darüber hinaus befinden sich die Rücktaste und die Eingabetaste in der zweiten Reihe, da sie häufig mit anderen Tasten koordiniert werden. Um beispielsweise Text auszuschneiden, drücken Sie „Kopieren“ und dann die Rücktaste, und um die Auswahl aufzuheben, drücken Sie die Eingabetaste. Wenn Ihnen dieses Layout nicht gefällt, können Sie es ändern .
• Auswahl : Ein großer Vorteil dieses Editors ist die effiziente Auswahl. Die Auswahl erfolgt kontextbasiert; Je nachdem, wo sich der Cursor befindet, wird ein Wort, eine Zeile, ein Absatz oder ein Codeblock ausgewählt. Um zu sehen, wie die Auswahl funktioniert, können Sie sich das YouTube-Video ansehen. Die Auswahl erfolgt mit der Schaltfläche „Kopieren“, d. h. es passieren zwei Dinge gleichzeitig. Dies dient hauptsächlich dazu, die Anzahl der Tasten zu reduzieren. Ausschneiden besteht aus zwei Schritten: Klicken Sie auf „Kopieren“ (wählt und kopiert) und dann auf „Rücktaste“ (löscht die Auswahl). Wenn Sie nach dem Kopieren auf die Eingabetaste klicken, wird der Cursor an das Ende der Auswahl bewegt. Wenn Ausschneiden (Kopieren/Rücktaste) eine Zeile enthält, wird der Cursor um eine Zeile vorgerückt. Dies liegt daran, dass der Benutzer beim Ausschneiden einer Zeile häufig die Absicht hat, sie nach der nächsten Zeile einzufügen. Dies trägt dazu bei, die Anzahl der Klicks beim Refactoring von Code zu reduzieren. Auswahl (Kopieren) kann auch zur Navigation verwendet werden, z. B. um den Cursor an das Ende eines Blocks zu bewegen, den Cursor vor das Zeichen des Anfangsblocks zu platzieren, auf „Kopieren“ zu klicken und auf „Eingabe“ zu klicken. Tun Sie dies jedoch nicht, wenn sich im Einfügepuffer etwas befindet, das Sie verwenden möchten. Wenn Sie auf „Mehrmals kopieren“ klicken, wird die Auswahl gemäß den Auswahlregeln erweitert, und mit den Pfeiltasten wird eine Auswahl jeweils um ein Zeichen erweitert (oder wieder aufgehoben).
• Kopieren und Einfügen : Sie müssen die internen Schaltflächen zum Kopieren und Einfügen im Editor verwenden, um Code innerhalb des Editors zu kopieren und einzufügen. Um Code aus externen Quellen zu kopieren, verwenden Sie Systemtechniken zum Kopieren und Einfügen, z. B. langes Drücken und anschließendes Auswählen von Kopieren und Einfügen.
• Formatierung : Auf einem Telefon ist der Platz des Redakteurs knapp, und Sie können sich nicht viel Leerraum leisten, insbesondere nicht den horizontalen Leerraum. Zum Einrücken können Sie die Leertaste verwenden (es gibt keine Tabulatortaste), und die Eingabetaste behält die vorherige Einrückung bei. Versuchen Sie, Einrückungen nur für Verzweigungen und Schleifen zu verwenden und anstatt einen Funktionskörper einzurücken, verwenden Sie davor und danach vertikale Leerzeichen. Ein Beispiel finden Sie im Spiel Marslander.
• Kommentarschaltfläche : Die Kommentarschaltfläche ist beim Debuggen sehr nützlich. Wenn Sie auf die Schaltfläche „Kommentar“ klicken, wird der Code kommentiert und eine Kopie im Einfügepuffer abgelegt. Der nächste Schritt besteht darin, das einzufügen und dann zu bearbeiten. Wenn Ihnen die Ergebnisse des neuen Codes nicht gefallen, können Sie ihn einfach löschen und das Original auskommentieren.
• Navigation : Die Navigation erfolgt hauptsächlich durch Berühren des Bildschirms, daher gibt es keine Home-, End- oder vertikalen Pfeiltasten. Stattdessen wird ein Links-Rechts-Pfeil bereitgestellt, der dabei hilft, den Cursor nach dem Berühren der ungefähren Position genau zu positionieren. Auch die Zoom-Taste, die die Textgröße vergrößert, kann dabei helfen, den Cursor an der richtigen Stelle zu positionieren.
• Empfohlene Größe : Da das Navigieren im Code auf einem Telefon eine große Herausforderung sein kann, empfiehlt es sich, Spiele zu erstellen, die klein genug sind, um mit einer einzigen Geste scrollen zu können.
• Vollbild : Durch die Aktivierung des Vollbildmodus erhalten Sie mehr Spielraum zum Navigieren und Bearbeiten Ihres Codes. Sie können den Vollbildmodus umschalten, indem Sie auf der Zoom-Schaltfläche nach oben wischen.
• Schließansichten : Es gibt keine Schaltflächen zum Schließen. Um eine Ansicht zu schließen, klicken Sie auf eine beliebige Stelle oder wählen Sie eine Option aus. Die Ansichten sind: Hilfe, Verschiedenes, Diff und Fehler.
• Emoji-Generierung : Beim ersten Öffnen der Verschiedenes-Ansicht dauert es einen Moment, bis die Symbole geladen sind.
• Picker : Color-Picker und Icon-Picker fügen einen Code in Einfügen ein. Seien Sie also nicht beunruhigt, wenn es so aussieht, als wäre nichts passiert. Klicken Sie auf die Schaltfläche „Einfügen“, um den Code anzuzeigen.
• Fehlererkennung : Dieser Editor verfügt über keine Echtzeit-Fehlererkennung (während der Eingabe). Fehler werden entdeckt, wenn Sie auf „Ausführen“ klicken. Es wird eine Fehlermeldung angezeigt und wenn der Fehler verworfen wird (durch Klicken auf eine beliebige Stelle in dieser Ansicht), wird der Cursor automatisch in dem Code positioniert, an dem der Fehler aufgetreten ist. Manchmal macht die Fehlermeldung es nicht deutlich, wenn Sie lediglich ein Paren oder ein anderes Blockzeichen vergessen haben, für das ein passendes Paar erforderlich ist. Um dabei zu helfen, zählt ein Zusatzprozess naiv alle Blockzeichen, um eine gleichmäßige Zählung sicherzustellen, und zeigt eine zusätzliche Meldung in der Fehleransicht an.
• Diff-Funktion: Die Diff-Funktion ist naiv und liefert keine genauen Ergebnisse. Es soll lediglich einen ungefähren Hinweis auf den Fortschritt seit dem Öffnen oder letzten Speichern der Datei geben.
• Speichermechanismus: Die Speicherfunktion im Editor ist durch HTML-Einschränkungen eingeschränkt. Um dieses Problem zu umgehen, wird bei jedem Speichern eine neue Datei mit Zeitstempel generiert. Wenn Sie in Ihrem Download-Ordner speichern, ist es wichtig, ihn von Dateien für andere Zwecke freizuhalten, da dies das schnelle erneute Öffnen Ihrer Arbeit erschweren kann. Löschen Sie außerdem regelmäßig ältere Editor-HTML-Dateien und behalten Sie nur die neueste Version.
• Themen : Der Editor bietet sowohl helle als auch dunkle Themen für ein anpassbares Seherlebnis. Sie können zwischen den Themen wechseln, indem Sie auf der Schaltfläche „Verschiedenes“ nach oben wischen. Sie können auch Änderungen vornehmen oder weitere hinzufügen.