Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:gng:start [2022/06/21 21:02] – [Beispiel: Einfacher Timer] Martin Pabst
+++ api:documentation:gng:start [2023/05/11 14:16] – [Grundformen] Martin Pabst
@@ Zeile 1: / Zeile 1: @@
 ====== Graphics'n Games-API des Cornelsen-Verlages ======
-<WRAP center round info 80%>
+<WRAP center round info 70%>
-Die Autoren der [[https://informatikschulbuch.de/|Informatik-Bücher des Cornelsen-Verlages für bayerische Gymnasien]] haben eine API geschrieben, die es auf einfache Weise ermöglicht, kleine Spiele zu Programmieren. Diese API heißt "Graphics and Games". Sie wurde von den Buchautoren in den Programmiersprachen Java, Python und Swift implementiert. Damit die Beispiele der Cornelsen-Bücher auch in der Online-IDE lauffähig sind, habe ich die Java-Version der Graphics and Games-API nach Typescript portiert. \\
+Die Autoren der [[https://informatikschulbuch.de/|Informatik-Bücher des Cornelsen-Verlages für bayerische Gymnasien]] haben eine API geschrieben, die es auf einfache Weise ermöglicht, kleine Spiele zu programmieren. Diese API heißt "Graphics and Games". Sie wurde von den Buchautoren in den Programmiersprachen Java, Python und Swift implementiert. Damit die Beispiele der Cornelsen-Bücher auch in der Online-IDE lauffähig sind, habe ich die Java-Version der Graphics and Games-API nach Typescript portiert. \\
   * Die Vorlagen für die Buchaufgaben finden Sie [[https://informatikschulbuch.de/jahrgangsstufe-9-uebersicht/objektorientierte-modellierung-und-programmierung/|hier auf der Website der Buchautoren]].
   * Hier die [[http://gng4java.informatikschulbuch.de/package-summary.html|Dokumentation der Java-Variante der Graphics and Games-API als JavaDoc]].
@@ Zeile 52: / Zeile 52: @@
 <HTML>
-<div class="java-online" style="height: 350px; width: 70%" data-java-online="{'withBottomPanel': false, 'id': 'gng1', 'libraries':['gng']}">
+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng1', 'libraries':['gng']}">
 <script type="text/plain" title="Test1.java">
@@ Zeile 70: / Zeile 70: @@
   * Das **Rechteck** ist 100 Pixel breit, 100 Pixel hoch und achsenparallel. Seine Linke obere Ecke befindet sich bei (10/10). Drehpunkt ist sein Diagonalenschnittpunkt. Die Methode ''PositionSetzen(x,y)'' verschiebt das Rechteck so, dass seine **linke obere Ecke** am Punkt ''x/y'' zu liegen kommt.
   * Der **Kreis** hat einen Radius von 50 Pixel, sein Mittelpunkt (= Drehpunkt) befindet sich bei (60/60). Die Methode ''PositionSetzen(x,y)'' verschiebt den Kreis so, dass sein **Mittelpunkt** am Punkt ''x/y'' zu liegen kommt.
-  * Die Eckpunkte des **Dreiecks** haben die Koordinaten ''60/10'', ''110/110'' und ''10/110''. Das Dreieck ist also gleichschenklig, aber nicht gleichseitig. Drehpunkt ist der Punkt ''60/60''. Die Methode ''PositionSetzen(x/y)'' verschiebt das Dreieck so, dass der Punkt des Dreiecks, der vorher bei ''60/10'' lag (also die obere Spitze), danach bei ''x/y'' liegt.
+  * Die Eckpunkte des **Dreiecks** haben die Koordinaten ''60/10'', ''110/110'' und ''10/110''. Das Dreieck ist also gleichschenklig, aber nicht gleichseitig. **Drehpunkt** ist der Punkt ''60/60''. Die Methode ''PositionSetzen(x/y)'' verschiebt das Dreieck so, dass der Punkt des Dreiecks, der vorher bei ''60/10'' lag (also die **obere Spitze**), danach bei ''x/y'' liegt.
   * Das Text-Objekt schreibt initial "Text" ungefähr in die linke obere Ecke.
@@ Zeile 123: / Zeile 123: @@
 <HTML>
-<div class="java-online" style="height: 350px; width: 70%" data-java-online="{'withBottomPanel': false, 'id': 'gng3', 'libraries':['gng']}">
+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng3', 'libraries':['gng']}">
 <script type="text/plain" title="Test1.java">
@@ Zeile 184: / Zeile 184: @@
 ===== Die Klasse Figur =====
 <WRAP center round tip 60%>
-Ein Objekt der Klasse ''Figur'' besteht aus beliebig vielen Dreiecken, Rechtecken und Ellipsen. Es kann - ähnlich einer Gruppierung in einem vektororientierten Grafikprogramm - als ganzes verschoben, gedreht oder gestreckt werden. Zudem kann ermittelt werden, ob es mit anderen graphischen Objekten kollidiert. \\ \\
+Ein Objekt der Klasse ''Figur'' besteht aus beliebig vielen Dreiecken, Rechtecken und Ellipsen. Es kann - ähnlich einer Gruppierung in einem vektororientierten Grafikprogramm - als Ganzes verschoben, gedreht oder gestreckt werden. Zudem kann ermittelt werden, ob es mit anderen graphischen Objekten kollidiert. \\ \\
 Ein Objekt der Klasse Figur kann - in Maßen - auch animiert werden. Dazu ist es jedoch nötig, für jeden Animationsschritt alle Bestandteile der Figur zu löschen und neu zu zeichnen. \\  \\
-Die Idee hinter der Klasse ''Figur'' ist, eine Unterklasse zu erstellen und mit Methoden zu versehen, die die einzelnen Animationsbilder zeichnen. Durch überschreiben der Methoden ''TasteGedrückt'', ''SondertasteGedrückt'' und ''Mausgeklickt'' kann man auf Tastatur- und Mausereignisse reagieren. Die Methode ''AktionAusführen'' wird periodisch vom Taktgeber aufgerufen. Durch Überschreiben lässt sich also eine Game Loop-artige Programmierung realisieren.
+Die Idee hinter der Klasse ''Figur'' ist, eine Unterklasse zu erstellen und mit Methoden zu versehen, die die einzelnen Animationsbilder zeichnen. Durch Überschreiben der Methoden ''TasteGedrückt'', ''SondertasteGedrückt'' und ''Mausgeklickt'' kann man auf Tastatur- und Mausereignisse reagieren. Die Methode ''AktionAusführen'' wird periodisch vom Taktgeber aufgerufen. Durch Überschreiben lässt sich also eine Game Loop-artige Programmierung realisieren.
 </WRAP>
@@ Zeile 192: / Zeile 192: @@
 <HTML>
-<div class="java-online" style="height: 350px; width: 70%" data-java-online="{'withBottomPanel': false, 'id': 'gng4', 'libraries':['gng']}">
+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng4', 'libraries':['gng']}">
 <script type="text/plain" title="Test1.java">
@@ Zeile 314: / Zeile 314: @@
 </WRAP>
-==== Beispiel: Einfacher Timer ====
+==== Beispiel 1: Einfacher Timer durch Implementieren des Interfaces Aktionsempfänger ====
 <HTML>
-<div class="java-online" style="height: 350px; width: 70%" data-java-online="{'withBottomPanel': false, 'id': 'gng4', 'libraries':['gng']}">
+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng4', 'libraries':['gng']}">
 <script type="text/plain" title="Test1.java">
+SystemTools.setSpeed(-1);
 Zeichenfenster.AktionsEmpfängerEintragen(new Zeitanzeige());
 Zeichenfenster.TaktdauerSetzen(1000);
@@ Zeile 369: / Zeile 370: @@
 </HTML>
+==== Beispiel 2: Einfacher Timer durch Erben von der Klasse Ereignisbehandlung ====
+<HTML>
+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng5', 'libraries':['gng']}">
+<script type="text/plain" title="Test2.java">
+SystemTools.setSpeed(-1);
+Zeichenfenster.TaktdauerSetzen(200);   // Taktdauer in ms
+Zeichenfenster.TaktgeberStarten();
+Test t = new Test();
+while (true);
+class Test extends Ereignisbehandlung {
+   int n = 0;
+   public void TaktImpulsAusführen() {
+      println(n++);
+   }
+   /**
+   * Die folgenden drei Methoden können bei Bedarf ebenfalls
+   * überschrieben werden:
+   */
+   public void TasteGedrückt(char taste);
+   public void SonderTasteGedrückt(int taste);
+   public void MausGeklickt(int x, int y, int anzahl);
+}
+</script>
+</div>
+</HTML>