{"id":12648,"date":"2019-04-25T06:39:47","date_gmt":"2019-04-25T04:39:47","guid":{"rendered":"https:\/\/www.herr-rau.de\/wordpress\/?p=12648"},"modified":"2023-05-04T18:42:42","modified_gmt":"2023-05-04T16:42:42","slug":"raetselkoffer-programmieren","status":"publish","type":"post","link":"https:\/\/www.herr-rau.de\/wordpress\/2019\/04\/raetselkoffer-programmieren.htm","title":{"rendered":"R\u00e4tselkoffer programmieren"},"content":{"rendered":"
(4 Kommentare.<\/a>)<\/small> <\/div>\n

Ich habe hier schon schon einmal<\/a> das Spiel „Keep Talking and Nobody Explodes“ vorgestellt. Ein Spieler oder eine Spielerin sitzt dabei am Rechner vor einem virtuellen Bombenkoffer, den es zu entsch\u00e4rfen gilt, und zwar alle drei (oder mehr) Module am Koffer. Eines davon ist das Drahtdurchschneiden, das man aus Filmen kennt: Es gibt eine Reihe von farbigen Dr\u00e4hten, die man in bestimmter Reihenfolge durchschneiden muss. Nur welche Reihenfolge?<\/p>\n\n\n\n

Die anderen Spieler und Spielerinnen, und nur die, haben alle das hochkomplizierte Bombenentsch\u00e4rf-Handbuch vor sich liegen, sehen aber nicht den Bombenkoffer. Also muss man miteinander reden – es ist ein Dialogspiel: Wie viele Dr\u00e4hte? Welche Farben haben sie? Welche anderen Merkmale gibt es an dem Modul oder am ganzen Koffer? Davon h\u00e4ngt dann die L\u00f6sung ab.<\/p>\n\n\n\n

So etwas habe ich in grob vereinfachter Form f\u00fcr meine Informatikklasse programmiert. Allerdings habe ich das ganze „R\u00e4tselkoffer“ genannt – das gibt mehr Spielraum f\u00fcr die verschiedenen Module und ist nicht ganz so gewaltt\u00e4tig. <\/p>\n\n\n\n

Das Drahtdurchschneide-Grafikmodul sieht zum Beispiel so aus (eigentlich nur der gelb hinterlegte Bereich):<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Das sind einfach sieben recht schmale und hohe Kn\u00f6pfe oben und ein paar Ausgabefelder unten. F\u00fcr die Kn\u00f6pfe gibt es Methoden, um eine beliebige Grafik als Hintergrund zu setzen, und vorgefertigt sind Grafiken mit Dr\u00e4hten in verschiedenen Farben, durchgeschnitten oder ganz.<\/p>\n\n\n\n

Eine andere Modul-Grafik (ein Sch\u00fclerwunsch) sieht so aus: Drei quadratische Kn\u00f6pfe oben, ein breiter, niedrigerer Knopf darunter. Die Kn\u00f6pfe oben kann man zum Beispiel mit solchen Bildern f\u00fcllen:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Was man mit den Kn\u00f6pfen beziehungsweise dem ganzen grafischen Block macht, bleibt den Sch\u00fclern und Sch\u00fclerinnen \u00fcberlassen. Tats\u00e4chlich besteht jedes R\u00e4tselmodul aus zwei Objekten, die in den Klassen ModulGUI<\/code> und Modul<\/code> beziehungsweise Unterklassen davon beschrieben werden: ModulGUI<\/code> ist lediglich die Grafik des aktuellen Elements; die Unterklassen dazu stelle ich zur Verf\u00fcgung. (Denn Grafikprogrammierung in Java ist einfach zu fisselig, wenn man sie noch nie gemacht hat, auch wenn die Elemente ja nur aus verschieden gro\u00dfen Buttons und Ein- und Ausgabefl\u00e4chen bestehen.) Zu jedem ModulGUI<\/code>-Objekt geh\u00f6rt ein Modul<\/code>-Objekt, das die Spiellogik und Steuerung \u00fcbernimmt. Und eben dieses (beziehungsweise die Unterklassen dazu) wird von den Sch\u00fclern und Sch\u00fclerinnen programmiert: Im Beispiel ist das die Klasse Demo<\/code>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Die Demo-Klasse legt erstens ein WireGUI-Objekt an, um diesem Nachrichten zu schicken, wie welcher Knopf aussehen soll. Und zweitens macht sie sich zur Unterklasse von Modul, damit das WireGUI-Objekt seinerseits Nachrichten – dar\u00fcber, welche Kn\u00f6pfe gedr\u00fcckt werden – an das Demo-Objekt, also die Steuerung, schicken kann.<\/p>\n\n\n\n

So sieht eine zu programmierende Klasse dann aus:<\/p>\n\n\n\n

public class Demo extends Modul \n{\n    WireGUI gui;\n\n    public Demo() {\n        gui = new WireGUI();\n        gui.setSteuerung(this);\n        gui.setButtonImage(1, \"drahtRot.png\");\n    }\n\n    @Override\n    public WireGUI getGUI() { \n        return gui; \n    }\n    \n    @Override\n    public void empfangeKnopfdruck(int knopfnr) {\n        if (knopfnr==1) { gui.setButtonImage(1, \"drahtRotCut.png\"); }\n    }\n}<\/code><\/pre>\n\n\n\n
So sieht das alles in BlueJ aus:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
An der linken Seite sieht man einige m\u00f6gliche Grafik-Unterklassen. An der unteren Seite sind die Steuerung-Unterklassen, also die von den Sch\u00fclern und Sch\u00fclerinnen zu programmierenden. Das obere Drittel ist technischer Kram, ausgebreitet auf verschiedene Klasse zur leichteren Wartung.<\/p>\n\n\n\n
K\u00f6nnte man in sie hineinblicken, wirkten sie vielleicht ein wenig umst\u00e4ndlich, und das liegt daran, dass die Grafikbibliothek JavaFX und BlueJ nicht optimal zusammenarbeiten. Wenn ich Objekte in der Objektleiste unten haben und ansprechen k\u00f6nnen m\u00f6chte, muss ich tricksen. (Der JavaFX-Thread l\u00e4sst sich nicht gerne von au\u00dfen unterbrechen, will hei\u00dfen: durch manuelle Methodenaufrufe von BlueJ aus.) Und so gibt es mehre M\u00f6glichkeiten, etwas zu sehen zu kriegen:<\/p>\n\n\n\n
    \n
  • in der Main-Klasse die statische Methode launch(String[] args)<\/code> aufrufen, die den JavaFX-Thread startet<\/li>\n\n\n\n
  • ein Main-Objekt anlegen oder eine andere statische Methode darin aufrufen, dann wird die JavaFX-Grafik gekapselt in einem JavaSwing-JFrame und ist damit f\u00fcr Objekte in der Objektbank zug\u00e4nglich (tats\u00e4chlich gibt es noch einen Sch\u00f6nheitsfehler dabei, anderes Thema)<\/li>\n\n\n\n
  • ein Objekt einer Modul-Unterklasse anlegen, das sich eine ModulGUI-erzeugt, das letztlich die JFrame-Methode der Main-Klasse aufruft (Vorteil: man kann die Methode der Klasse manuell aufrufen und testen, wenn sie den JavaFX-Thread beeinflussen, muss man aber Umst\u00e4nde machen)<\/li>\n\n\n\n
  • ein Objekt einer ModulGUI-Unterklasse anlegen, das sich eine Dummy-Steuerung gibt, die letztlich die JFrame-Methode der Main-Klasse aufruft (Vorteil: wie oben) – Ziel dieser letzten beiden Konstruktionen: Die Sch\u00fcler und Sch\u00fclerinnen sollen einfach wie gewohnt Objekte ihrer Klassen erzeugen k\u00f6nnen, deren Oberklassen sich dann darum k\u00fcmmern, dass Grafik hergestellt wird<\/li>\n<\/ul>\n\n\n\n
    JavaFX bietet einige grafische Elemente, mit denen man so ein R\u00e4tselmodul aufpeppen kann. Man kann sie auch alle leicht vergr\u00f6\u00dfern, verkleinen, drehen, sich bewegen lassen:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Das Projekt befindet sich noch in einem Rohstadium. Ich wei\u00df noch nicht, wie ich die einzelnen Module am besten zusammenf\u00fcgen soll. Soll das Spiel aus sein, wenn man ein Modul vergeigt? Oder wird das dann einfach beendet und gesperrt und man kriegt Punktabzug? Soll es einen globalen Timer geben? Vorl\u00e4ufig habe ich ein Modul als Startseite, \u00fcber das man auf andere, zuf\u00e4llig ausgew\u00e4hlte Module gelangt, von denen aus kann man zur\u00fcck, wenn man das will:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Einsatz in der Schule: Mir gef\u00e4llt die Idee, dass jedes Programmierteam ein Modul erarbeitet, die danach zu einem Spiel zusammengetragen werden. Viel m\u00fcssen die Sch\u00fcler und Sch\u00fclerinnen eigentlich nicht k\u00f6nnen: Ein Objekt erzeugen und in einem Attribut speichern, Methoden des Objekts aufrufen, eine Unterklasse anlegen, eine Methode implementieren  void empfangeKnopfdruck(int knopfnummer)<\/code> – und vermutlich bedingte Anweisungen, um das sinnvoll machen zu k\u00f6nnen. Trotzdem war ich zu fr\u00fch dran mit dem Ausprobieren mit meiner Klasse; das erfordert halt doch mehr Abstraktionsverm\u00f6gen und Programmiererfahrung, als man meint. Inzwischen hat die Klasse einfache Zustandsautomaten programmiert und ist mit if<\/code>  und if else<\/code> vertrauter; vielleicht komme ich noch einmal darauf zur\u00fcck. Die JavaFX-Grafikklassen erstelle ich \u00fcbrigens mit dem Java-Editor, sie erfordern dann nur wenig Anpassung, um sie zu ModulGUI-Unterklassen machen zu k\u00f6nnen. Der Auftrag dazu f\u00fcr die Sch\u00fcler und Sch\u00fclerinnen: Erstelle eine Skizze, wie die (quadratische) Grafikoberfl\u00e4che f\u00fcr dein Modul aussehen soll, welche Kn\u00f6pfe oder Felder du darin gerne h\u00e4ttest, und welche Methoden dir das Objekt zur Verf\u00fcgung stellen soll, damit du die Oberfl\u00e4che auf die gew\u00fcnschte Weise ver\u00e4ndern kannst.
     <\/p>\n\n\n\n
    (Hilfsmethoden, die die Klasse Modul zur Verf\u00fcgung stellt: Abspielen von mp3-Dateien, Erzeugen von T\u00f6nen, Verz\u00f6gertes Ausf\u00fchren einer Methode, Countdown.)<\/p>\n\n\n\n
    – In den Sommerferien komme ich hoffentlich endlich mal dazu, meine ganzen Programmierprojekte f\u00fcr die 10. Jahrgangsstufe ordentlich bei github oder so einzustellen und in einem Mebiskurs zu pr\u00e4sentieren.<\/p>\n","protected":false},"excerpt":{"rendered":"
    (4 Kommentare.) Ich habe hier schon schon einmal das Spiel „Keep Talking and Nobody Explodes“ vorgestellt. Ein Spieler oder eine Spielerin sitzt dabei am Rechner vor einem virtuellen Bombenkoffer, den es zu entsch\u00e4rfen gilt, und zwar alle drei (oder mehr) Module am Koffer. Eines davon ist das Drahtdurchschneiden, das man aus Filmen kennt: Es gibt […]<\/p>\n","protected":false},"author":2,"featured_media":12651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[25],"tags":[227],"class_list":["post-12648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informatik","tag-informatik"],"jetpack_featured_media_url":"https:\/\/www.herr-rau.de\/wordpress\/archiv\/raetselkoffer2.png","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/12648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/comments?post=12648"}],"version-history":[{"count":3,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/12648\/revisions"}],"predecessor-version":[{"id":55677,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/12648\/revisions\/55677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media\/12651"}],"wp:attachment":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media?parent=12648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/categories?post=12648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/tags?post=12648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}