Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:projects:pong:start [2020/12/29 12:59] – Martin Pabst
+++ api:projects:pong:start [2020/12/29 16:44] – Martin Pabst
@@ Zeile 3: / Zeile 3: @@
 <HTML>
-<div class="java-online" style="height: 620px; width: 100%" data-java-online="{'withBottomPanel': true, 'id': 'Minesweeper'}">
+<div class="java-online" style="height: 620px; width: 100%" data-java-online="{'withBottomPanel': true, 'id': 'Pong'}">
 <script type="text/plain" title="Pong.java">
+// Im Hauptprogramm wird nur ein Pong-Objekt instanziert. Dadurch
+// wird der Konstruktor der Klasse Pong aufgerufen, in dem
+// die weiteren Objekte (Schläger, Ball, ...) instanziert werden.
+new Pong();
+class Pong {
+   private Schläger schlägerLinks;
+   private Schläger schlägerRechts;
+   private Ball ball;
+   private Text punkteAnzeige;
+   // In diesen Attributen wird der Spielstand gespeichert:
+   private int punkteLinks = 0;
+   private int punkteRechts = 0;
+   /*
+    * Im Konstruktor werden die Schläger, der Ball und die Punkteanzeige
+    * instanziert. Danach ist das Hauptprogramm beendet. Weiter gehts in
+    * den act-Methoden der Schläger und des Balls, die 30-mal pro Sekunde
+    * vom Browser aufgerufen werden.
+    */
+   public Pong() {
+      schlägerLinks = new Schläger(0, 100, "q", "a");
+      schlägerRechts = new Schläger(800 - 30, 100, "p", "ö");
+      ball = new Ball(schlägerLinks, schlägerRechts, this);
+      punkteAnzeige = new Text(400, 10, 48, "0 : 0");
+      punkteAnzeige.setAlignment(Alignment.center);
+      punkteAnzeige.setFillColor(Color.white);
+   }
+   /*
+    * Zeigt den aktuellen Punktestand an
+    */
+   private void zeigePunkte() {
+      punkteAnzeige.setText(punkteLinks + " : " + punkteRechts);
+   }
+   /*
+    * Wird von der act-Methode des Balls aufgerufen, wenn der Ball den rechten
+    * Bildschirmrand überschreitet.
+    */
+   public void punktFürLinkenSpieler() {
+      punkteLinks++;
+      zeigePunkte();
+   }
+   /*
+    * Wird von der act-Methode des Balls aufgerufen, wenn der Ball den linken
+    * Bildschirmrand überschreitet.
+    */
+   public void punktFürRechtenSpieler() {
+      punkteRechts++;
+      zeigePunkte();
+   }
+}
+</script>
+<script type="text/plain" title="Schläger.java">
+/**
+ * Ein Objekt der Klasse Schläger stellt den Schläger als Rechteck dar und bewegt ihn nach
+ * oben/unten wenn die Taste tasteHoch/tasteRunter gedrückt wird.
+ */
+class Schläger extends Rectangle {
+   private String tasteHoch;        // Taste, mit der der Schläger hochbewegt wird
+   private String tasteRunter;      // Taste, mit der der Schläger runterbewegt wird
+   private int geschwindigkeit = 8; // Geschwindigkeit des Schlägers in Pixel pro 1/30 s
+   /**
+    * Im Konstruktor wird das Schläger-Rechteck initialisiert. Damit die Schläger-Klasse sowohl zum
+    * Erzeugen des linken als auch des rechten Schläger-Objekts verwendet werden kann, werden dem Konstruktor
+    * die x-Koordinate des linken Randes sowie die zwei Tasten zur Steuerung des Schlägers als Parameter übergeben.
+    */
+   public Schläger(double links, double höhe, String tasteHoch, String tasteRunter) {
+      super(links, 0, 20, höhe);
+      this.tasteHoch = tasteHoch;
+      this.tasteRunter = tasteRunter;
+      move(0,(getWorld().getHeight() - höhe) / 2);
+      setFillColor(Color.white);
+   }
+   /**
+    * Die Methode act wird 30-mal pro Sekunde vom Browser aufgerufen.
+    */
+   public void act() {
+      /*
+       * Die Klasse Rectangle besitzt eine Methode isKeyDown, die genau dann true zurückgibt, wenn
+       * eine bestimmte Taste gerade gedrückt ist.
+       */
+      if(isKeyDown(tasteHoch)) {
+         // Falls der Schläger noch nicht am oberen Rand anschlägt, bewege ihn hoch:
+         if(getCenterY() > getHeight() / 2) {
+            move(0, -geschwindigkeit);
+         }
+      }
+      if(isKeyDown(tasteRunter)) {
+         // Falls der Schläger noch nicht am unteren Rand anschlägt, bewege ihn runter:
+         if(getCenterY() < getWorld().getHeight() - getHeight() / 2) {
+            move(0, geschwindigkeit);
+         }
+      }
+   }
+}
+</script>
+<script type="text/plain" title="Ball.java">
+/**
+ * Die Klasse Ball stellt den Ball am Bildschirm dar, bewegt ihn, reagiert auf Kollision
+ * mit den Schlägern und dem oberen/unteren Bildschirmrand. Sie registriert auch, ob der Ball
+ * den sichtbaren Bereich rechts oder links verlässt und veranlasst dann die Änderung des Spielstands
+ * sowie einen Abstoß in der Mitte des Bildschirms.
+ */
+class Ball extends Rectangle {
+   private double vx;   // x-Komponente der Ballgeschwindigkeit (in Pixel je 1/30 s)
+   private double vy;   // y-Komponente der Ballgeschwindigkeit
+   private double breite = 20;   // Breite und zugleich Höhe des Ball-Rechtecks
+   private Schläger schlägerLinks;  // Referenz auf das linke Schläger-Objekt
+   private Schläger schlägerRechts; // Referenz auf das rechte Schläger-Objekt
+   private Pong pong;               // Referenz auf das Pong-Objekt
+   /**
+    * Der Konstruktor der Klasse Ball initialisiert das Ball-Rechteck.
+    */
+   public Ball(Schläger schlägerLinks, Schläger schlägerRechts, Pong pong) {
+      super(400 - breite / 2, 300 - breite / 2, breite, breite);  // Aufruf des Konstruktors der Oberklasse Rectangle
+      setzeZufallsGeschwindigkeit();
+      setFillColor(Color.white);
+      this.schlägerRechts = schlägerRechts;
+      this.schlägerLinks = schlägerLinks;
+      this.pong = pong;
+   }
+   /**
+    * Die Methode act wird vom Browser 30-mal pro Sekunde aufgerufen. Sie bewegt den Ball und
+    * reagiert auf Kollisionen mit den Schlägern, dem oberen/unteren Rand sowie auf das Verlassen
+    * des Grafikbereichs rechts/links.
+    */
+   public void act() {
+      move(vx, vy);  // bewegt den Ball
+      // stößt der Ball am oberen/unteren Rand an? => vy umkehren
+      if(getCenterY() < breite / 2 || getCenterY() > getWorld().getHeight() - breite / 2) {
+         vy *= -1;
+      }
+      testKollisionMitSchläger(schlägerLinks);
+      testKollisionMitSchläger(schlägerRechts);
+      // Wenn sich der Ball schon um vx weiter links befindet als bei Berührung mit dem linken Schläger,
+      // dann lassen wir kein Abprallen mit dem Schläger mehr zu, sondern werten es als Punkt für den
+      // rechten Spieler:
+      if(getCenterX() < schlägerLinks.getWidth() + breite / 2 - Math.abs(vx)) {
+         setCenter(400, 300);             // Abstoß in der Mitte des Grafikbereichs
+         setzeZufallsGeschwindigkeit();
+         pong.punktFürRechtenSpieler();
+      }
+      // ... entsprechend für den rechten Bildschirmrand:
+      if(getCenterX() > getWorld().getWidth() - schlägerRechts.getWidth() - breite / 2 + Math.abs(vx)) {
+         setCenter(400, 300);
+         setzeZufallsGeschwindigkeit();
+         pong.punktFürLinkenSpieler();
+      }
+   }
+   private void testKollisionMitSchläger(Schläger schläger) {
+      if(this.collidesWith(schläger)) {
+         vx *= -1;
+         double dy = schläger.getCenterY() - getCenterY();
+         if(Math.abs(vy) < 10) {
+            vy -= dy / schläger.getHeight() * 6;
+         }
+         if(schläger == schlägerLinks) {
+            System.playSound(Sound.pong_f);
+         } else {
+            System.playSound(Sound.pong_d);
+         }
+      }
+   }
+   /**
+    * Diese Methode gibt dem Ball eine zufällige Geschwindigkeit. Dabei dürfen aber keine Geschwindigkeitsvektoren
+    * entstehen, die zu "flach" oder "steil" sind, da das Spiel sonst langweilig wird.
+    */
+   public void setzeZufallsGeschwindigkeit() {
+      double v = Math.random() * 4 + 8;      // Betrag der Geschwindigkeit zwischen 8 und 12 (Pixel je 1/30 s)
+      double winkel = Math.random() * Math.PI / 4 + Math.PI / 8;  // Winkel zwischen 22,5 und 67,5 Grad
+      vx = Math.cos(winkel) * v;
+      vy = Math.sin(winkel) * v;
+      if(Math.random() < 0.5) vx *= -1;   // mit 50% Wahrscheinlichkeit: Spiegeln an der y-Achse
+      if(Math.random() < 0.5) vy *= -1;   // mit 50% Wahrscheinlichkeit: Spiegeln an der x-Achse
+   }
+}
 </script>
 </div>
 </HTML>