Informatik ➟ Programmierung ➟ JavaScript mit JSpider

Die JSpider-Bibliothek

JSpider ist eine JavaScript-Bibliothek zur Grafik- und GUI-Programmierung auf Basis von ECMAScript 6, speziell entwickelt für den Unterrichtseinsatz mit JavaScript als Lernsprache.

JSpider beinhaltet zusätzliche Funktionen, Erweiterungen und vereinfachte Schnittstellen vorhandener Funktionen und Datenstrukturen (etwa die Methoden .load() und .save() für Maps zum Laden/Speichern einer Map im LocalStorage des Browsers).

Kernstück der JSpider-Bibliothek ist jedoch ein konsequent objektorientiert ausgerichteter Ansatz zur Grafik- und GUI-Programmierung, der die vielfältigen Möglichkeiten des HTML-Canvas nutzt und der Zielgruppe (Jugendliche) durch eine altersgemäße Schnittstelle den Zugang erleichtert.

Ein Beispiel

Aus Platz- und Verständnisgründen und zur besseren Vergleichbarkeit leistet dieses kleine Programm das Gleiche wie das Beispiel zum frog-Modul.

Das Beispiel zeigt nicht die Leistungsfähigkeit der JSpider-Bibliothek, allerdings den Grundaufbau eines Spider-Programms und die konsequente Objektorientierung: Zunächst wird eine "Welt" erzeugt (ein HTML-Canvas), danach ein Spider-Objekt, das diese Welt als Lebensraum hat und dort aktiv sein kann.

Spider-Demo
let blatt = new World();
let stift = new Spider(blatt);
stift.fillcolor = "#f0db4f";
stift.linecolor = "forestgreen";
stift.spinWeb(6,100);
stift.turn(60);
stift.jump(100);
stift.fillcolor = "forestgreen";
stift.dot(5);
blatt.animate();

Damit das Programm im Browser ausgeführt werden kann, muss es in ein HTML-Dokument eingebettet werden (oder als separate Datei gespeichert und dann über den Skript-Namen eingebunden werden). Ein minimales Gerüst – ergänzt etwa um den obigen Code ein vollständiges und als HTML-Dokument "lauf­fähiges" Programm – könnte so aussehen:

<html>
<body>
<script src="jspider.js"> </script>
<script>
[... JavaScript-Code...]
</script>
</body>
</html>

Was geht?

Color-Code Screenshot

Eine ganze Menge! – Die Abbildung zeigt einen Screenshot des Programms Color-Code, eine Umsetzung des bekannten Spiels Mastermind mit JavaScript unter Verwendung der JSpider-Bibliothek. In aufgeräumter, gut lesbarer Form umfasst der Code etwa 400 Zeilen.

Die Farbkugeln (Spider-Objekte) rechts neben dem Brett (ebenfalls ein Spider-Objekte) werden mittels Drag & Drop an die gewünschte Position auf dem Spielbrett gezogen und dann der Auswertungsknopf gedrückt. Der Computer setzt als Rückmeldung die entsprechenden Markierungsstifte.
Um einen realistischen Eindruck zu bekommen, sollte man auf jeden Fall selbst einmal Color-Code spielen. Wer etwas "Nervenkitzel" braucht, der spielt die Variante mit Punktwertung: Man beginnt mit 10.000 Punkten. Jede Sekunde des Nachdenkens und jeder Fehlversuch reduziert die Punktzahl.

Download

JSpider-Bibliothek (Version 1.4.2): jspider.js
JSpider-Schnittstellendokumentation (PDF): JSpider-API