Rohrmaker
Verlegt Rohre wie ein Klempner: Per Knopfdruck setzt ihr Rohrstücke aus Rahmenzeichen zusammen und baut so euer eigenes Röhrensystem.
Mit dem Rohrmaker könnt ihr Rohre verlegen wie ein echter Klempner — ganz ohne schmutzige Hände. Das kleine Spiel stammt von unserem User Valentin und funktioniert denkbar einfach: Jede Taste trägt ein Rohrstück, ein Klick darauf hängt es im Textfeld an. Stück für Stück entsteht so euer eigenes Röhrensystem.
Die Rohrstücke sind sogenannte Rahmenzeichen (Zeichen wie ═, ║ oder ╔), die es seit den Zeiten von MS-DOS gibt: Damals wurden damit Fenster und Tabellen auf reinen Text-Bildschirmen gezeichnet. Weil sie in Schriftarten mit fester Zeichenbreite exakt aneinanderstoßen, eignen sie sich perfekt für Rohrleitungen.
Bedienung: Klickt die Rohrtasten in der gewünschten Reihenfolge an. „S P A C E" fügt einen Abstand ein, mit der Eingabetaste im Textfeld beginnt ihr eine neue Zeile — so könnt ihr das Röhrensystem auch in die Tiefe bauen. „Alles löschen" räumt die Baustelle wieder frei, und hinter „Anleitung" steckt die Original-Gebrauchsanweisung von Valentin.
Wer nach dem Rohrverlegen noch mehr gestalten will: Im selben Fach gibt es auch ein kleines Malprogramm, mit dem ihr per Mausklick farbige Punkte auf eine Fläche setzt.
Rohrmaker v1.1
So funktioniert das Script
Das Script hat drei Aufgaben: Rohrzeichen an das Textfeld anhängen, das Feld leeren und auf Wunsch die Anleitung anzeigen. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.
document.querySelectorAll("#rm-tasten button[data-zeichen]").forEach(function (knopf) {
knopf.addEventListener("click", function () {
ausgabe.value += knopf.dataset.zeichen;
});
});Der Kern des Scripts: Statt jedem der 29 Rohrknöpfe eine eigene Funktion zu geben, trägt jeder Knopf sein Zeichen in einem data-zeichen-Attribut direkt im HTML. querySelectorAll sammelt alle Knöpfe mit diesem Attribut ein, und die Schleife forEach verpasst jedem einen Klick-Horcher (Event-Listener). Beim Klick liest knopf.dataset.zeichen das Attribut aus, und ausgabe.value += … hängt das Zeichen an den bisherigen Inhalt des Textfelds an — genau wie beim Tippen.
document.getElementById("rm-space").addEventListener("click", function () {
ausgabe.value += " ";
});Der SPACE-Knopf ist ein Sonderfall: Er fügt kein Rohr ein, sondern ein geschütztes Leerzeichen. " " ist die Unicode-Schreibweise dafür — es sieht aus wie ein normales Leerzeichen, wird aber am Zeilenende nicht umbrochen, so bleibt das Röhrensystem in Form.
document.getElementById("rm-loeschen").addEventListener("click", function () {
ausgabe.value = "";
});„Alles löschen" setzt den Inhalt des Textfelds schlicht auf einen leeren Text "" — die Baustelle ist wieder frei. Im Original zeigte der Anleitungsknopf übrigens acht alert()-Fenster nacheinander; die moderne Fassung schreibt den Text stattdessen per textContent in die Ergebnisfläche unter den Knöpfen, das ist deutlich angenehmer zu lesen.
Zum Anpassen: Ihr könnt jederzeit eigene Tasten ergänzen — einfach einen weiteren <button data-zeichen="…"> ins HTML setzen, etwa mit den einfachen Rahmenzeichen ─, │ und ┌ oder ganz anderen Symbolen. Das Script findet neue Knöpfe automatisch, es muss nichts weiter geändert werden.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.