Java lernen durch Ausprobieren!

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
projects:pong:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


—projects:pong:start [2024/08/31 10:03] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== Gemeinsames Projekt: Pong ======
 +{{ :projects:pong:pong.png?200|Quelle: https://commons.wikimedia.org/wiki/File:Pong.png}}
 +<WRAP center round info 50%>
 +Das 1972 von Atari veröffentlichte Pong war eines der ersten Computerspiele, [[https://de.wikipedia.org/wiki/Pong|hier mehr zu seiner Geschichte.]] \\ \\ 
 +Zwei Spieler steuern je einen Schläger am linken bzw. rechten Bildschirmrand und versuchen, einen Ball so abprallen zu lassen, dass ihn der Gegner mit seinem Schläger nicht mehr erwischt, ähnlich wie beim Tennis. Der Ball prallt sowohl an den Schlägern als auch am oberen und unteren Bildschirmrand ab. Das gestrichelte "Netz" in der Mitte des Bildschirms hat spieltechnisch keine Bedeutung.
 +</WRAP>
 + \\ 
 +===== Programmierung des Schlägers =====
 +{{ youtube>JdJu09JU7l4?large }}
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 80%" data-java-online="{'withBottomPanel': false, 'id': 'pongSchlaeger'}">
 +
 +<script type="text/plain" title="PongSchlaeger.java">
 +new Schläger(0, 20, 200, "q", "a");
 +new Schläger(800 - 20, 20, 200, Key.ArrowUp, Key.ArrowDown);
 +
 +class Schläger extends Rectangle {
 +   
 +   String tasteRauf;
 +   String tasteRunter;
 +
 +   double dy = 5;
 +   
 +   Schläger(double x, double breite, double höhe, String tasteRauf, String tasteRunter) {
 +      super(x,(600 - höhe) / 2, breite, höhe);
 +      
 +      this.tasteRauf = tasteRauf;
 +      this.tasteRunter = tasteRunter;
 +      
 +      setFillColor(Color.white);
 +      
 +   }
 +
 +   public void act() {
 +      if(isKeyDown(tasteRauf)) {
 +         if(getCenterY() > getHeight() / 2) {
 +            move(0, -dy);
 +         }
 +      }
 +      
 +      if(isKeyDown(tasteRunter)) {
 +         if(getCenterY() + getHeight() / 2 < 600 ) {
 +            move(0, dy);
 +         }
 +      }
 +      
 +   }
 +}
 +</script>
 +
 +</div>
 +
 +</HTML>
 +
 +
 + \\ 
 +
 +{{ :projects:pong:pasted:20210220-110606.png?300}}
 +==== Wann stößt der Schläger oben an? ====
 +Am oberen Rand des Grafikbereichs stößt der Schläger dann an, wenn ''getCenterY() == getHeight()/2''. Solange ''getCenterY() > getHeight()/2'' ist, ist der Schläger noch nicht oben angekommen.
 +<HTML>
 +<div style="clear: both; margin-bottom: 30px"></div>
 +</HTML>
 +
 +==== Wann stößt der Schläger unten an? ====
 +{{:projects:pong:pasted:20210220-111101.png?300 }}
 +Am unteren Rand des Grafikbereichs stößt der Schläger dann an, wenn ''getCenterY() + getHeight()/2 == 600''. Solange ''getCenterY() + getHeight()/2 < 600'' ist, ist der Schläger noch nicht unten angekommen.
 +<HTML>
 +<div style="clear: both; margin-bottom: 30px"></div>
 +</HTML>
 +
 +===== Programmierung des Balls =====
 +{{ youtube>DIKP2A2S2x8?large }}
 +<HTML>
 +
 +<div class="java-online" style="height: 400px; width: 80%" data-java-online="{'withBottomPanel': true, 'id': 'pongBall'}">
 +
 +<script type="text/plain" title="PongSchlaeger2.java">
 +Schläger links = new Schläger(0, 20, 200, "q", "a");
 +Schläger rechts = new Schläger(800 - 20, 20, 200, Key.ArrowUp, Key.ArrowDown);
 +new Ball(20, 400, 300, links, rechts);
 +
 +class Schläger extends Rectangle {
 +   
 +   String tasteRauf;
 +   String tasteRunter;
 +
 +   double dy = 5;
 +   
 +   Schläger(double x, double breite, double höhe, String tasteRauf, String tasteRunter) {
 +      super(x,(600 - höhe) / 2, breite, höhe);
 +      
 +      this.tasteRauf = tasteRauf;
 +      this.tasteRunter = tasteRunter;
 +      
 +      setFillColor(Color.white);
 +      
 +   }
 +
 +   public void act() {
 +      if(isKeyDown(tasteRauf)) {
 +         if(getCenterY() > getHeight() / 2) {
 +            move(0, -dy);
 +         }
 +      }
 +      
 +      if(isKeyDown(tasteRunter)) {
 +         if(getCenterY() + getHeight() / 2 < 600 ) {
 +            move(0, dy);
 +         }
 +      }
 +   }
 +}
 +</script>
 +<script type="text/plain" title="PongBall2.java">
 +class Ball extends Rectangle {
 +   
 +   double vx;
 +   double vy;
 +   Schläger schlägerLinks;
 +   Schläger schlägerRechts;
 +
 +
 +   Ball(double breite, double x, double y, Schläger schlägerLinks, Schläger schlägerRechts) {
 +      super(x - breite / 2, y - breite / 2, breite, breite);
 +      setFillColor(Color.white);
 +      this.schlägerLinks = schlägerLinks;
 +      this.schlägerRechts = schlägerRechts;
 +
 +      setzeZufallsGeschwindigkeit();
 +   }
 +
 +   public void act() {
 +      
 +      move(vx, vy);
 +
 +      if(getCenterY() < getHeight() / 2) {
 +         vy = vy * (-1);
 +      }
 +
 +      if(getCenterY() + getHeight() /2 > 600) {
 +         vy = vy * (-1);
 +      }
 +
 +      if(collidesWith(schlägerLinks) || collidesWith(schlägerRechts)) {
 +         vx = vx * (-1);
 +      }
 +
 +      if(getCenterX() < - getWidth() / 2) {
 +         setzeZufallsGeschwindigkeit();
 +         moveTo(400, 300);
 +      }
 +
 +      if(getCenterX() > 800 + getWidth() / 2) {
 +         setzeZufallsGeschwindigkeit();
 +         moveTo(400, 300);
 +      }
 +
 +   }
 +   
 +
 +   void setzeZufallsGeschwindigkeit() {
 +
 +      double r = Math.random() * 5 + 5;
 +      double winkelGrad = Math.random() * 50 + 20;
 +      double winkelRad = winkelGrad / 180 * Math.PI;
 +      
 +      vx = r * Math.cos(winkelRad);
 +      vy = - r * Math.sin(winkelRad);
 +
 +      if(Math.random() < 0.5) {
 +         vx = -vx;
 +      }
 +
 +      if(Math.random() < 0.5) {
 +         vy = -vy;
 +      }
 +   }
 +}
 +</script>
 +
 +</div>
 +
 +</HTML>
 + \\ 
 +
 +=== Wann stößt der Ball oben/unten an? Wann verlässt er links/rechts das Spielfeld? ===
 +Hier eine erläuternde Grafik zu diesen Fragen:
 +{{ :projects:pong:pasted:20210220-114157.png?500 }}
 +===== Hauptprogramm, Punkteanzeige, Startbildschirm, Game over =====
 +{{ youtube>V0LthmW7Qqo?large }}
 +<HTML>
 +
 +<div class="java-online" style="height: 500px; width: 80%" data-java-online="{'withBottomPanel': true, 'id': 'pongKomplett'}">
 +
 +<script type="text/plain" title="Pong3.java">
 +new Pong();
 +
 +class Pong extends Actor {
 +   
 +   Text punkteanzeige;
 +   
 +   Text großeAnzeige;
 +
 +   int punkteLinks = 0;
 +   int punkteRechts = 0;
 +
 +   String zustand;
 +
 +   Schläger links;
 +   Schläger rechts;
 +   Ball ball;
 +
 +   Pong() {
 +      super();
 +      links = new Schläger(0, 20, 200, "q", "a");
 +      rechts = new Schläger(800 - 20, 20, 200, Key.ArrowUp, Key.ArrowDown);
 +      ball = new Ball(20, 400, 300, links, rechts, this);
 +
 +      punkteanzeige = new Text(400, 20, 64, "");
 +      punkteanzeige.setAlignment(Alignment.center);
 +      punkteanzeige.setFillColor(Color.white);
 +      punkteAnzeigen();
 +
 +      großeAnzeige = new Text(400, 150, 140, "PONG");
 +      großeAnzeige.setAlignment(Alignment.center);
 +      großeAnzeige.setFillColor(Color.white);
 +
 +      setZustand("Vor dem Spiel");
 +   }
 +
 +   public void onKeyTyped(String key) {
 +      if(key == " " && zustand == "Vor dem Spiel") {
 +         setZustand("Im Spiel");
 +      } else 
 +      if(key == " " && zustand == "Game over") {
 +         setZustand("Vor dem Spiel");
 +      }
 +   }
 +
 +   void punkteAnzeigen() {
 +      punkteanzeige.setText(punkteLinks + " : " + punkteRechts);
 +      
 +      if((punkteLinks == 3 || punkteRechts == 3) && zustand == "Im Spiel") {
 +         setZustand("Game over");   
 +      }
 +   }
 +
 +   void punktFürRechtenSpieler() {
 +      punkteRechts++;
 +      punkteAnzeigen();
 +   }
 +
 +   void punktFürLinkenSpieler() {
 +      punkteLinks++;
 +      punkteAnzeigen();
 +   }
 +
 +   void setZustand(String neuerZustand) {
 +      
 +      if(neuerZustand == "Vor dem Spiel") {
 +         links.setVisible(false);
 +         rechts.setVisible(false);
 +         ball.setVisible(false); 
 +         punkteanzeige.setVisible(false);
 +         großeAnzeige.setVisible(true);
 +         großeAnzeige.setText("PONG");
 +      } else if(neuerZustand == "Im Spiel") {
 +         links.setVisible(true);
 +         rechts.setVisible(true);
 +         ball.setVisible(true); 
 +         punkteanzeige.setVisible(true);
 +         großeAnzeige.setVisible(false);
 +         ball.setzeZufallsGeschwindigkeit();
 +         ball.moveTo(400, 300);
 +         punkteLinks = 0;
 +         punkteRechts = 0;
 +         punkteAnzeigen();
 +      } else if(neuerZustand == "Game over") {
 +         links.setVisible(false);
 +         rechts.setVisible(false);
 +         ball.setVisible(false); 
 +         großeAnzeige.setVisible(true);
 +         großeAnzeige.setText("Game over"); 
 +      }
 +
 +      zustand = neuerZustand;
 +
 +   }
 +}
 +</script>
 +
 +<script type="text/plain" title="Schlaeger3.java">
 +class Schläger extends Rectangle {
 +   
 +   String tasteRauf;
 +   String tasteRunter;
 +
 +   double dy = 5;
 +   
 +   Schläger(double x, double breite, double höhe, String tasteRauf, String tasteRunter) {
 +      super(x,(600 - höhe) / 2, breite, höhe);
 +      
 +      this.tasteRauf = tasteRauf;
 +      this.tasteRunter = tasteRunter;
 +      
 +      setFillColor(Color.white);
 +      
 +   }
 +
 +   public void act() {
 +      if(isKeyDown(tasteRauf)) {
 +         if(getCenterY() > getHeight() / 2) {
 +            move(0, -dy);
 +         }
 +      }
 +      
 +      if(isKeyDown(tasteRunter)) {
 +         if(getCenterY() + getHeight() / 2 < 600 ) {
 +            move(0, dy);
 +         }
 +      }
 +      
 +   }
 +}
 +</script>
 +
 +<script type="text/plain" title="Ball3.java">
 +class Ball extends Rectangle {
 +   
 +   double vx;
 +   double vy;
 +   Schläger schlägerLinks;
 +   Schläger schlägerRechts;
 +   Pong pong;
 +
 +
 +   Ball(double breite, double x, double y, Schläger schlägerLinks, Schläger schlägerRechts, 
 +      Pong pong) {
 +      super(x - breite / 2, y - breite / 2, breite, breite);
 +      setFillColor(Color.white);
 +      this.schlägerLinks = schlägerLinks;
 +      this.schlägerRechts = schlägerRechts;
 +      this.pong = pong;
 +
 +      setzeZufallsGeschwindigkeit();
 +   }
 +
 +   public void act() {
 +      
 +      if(pong.zustand != "Im Spiel") {
 +         return;
 +      }
 +
 +      move(vx, vy);
 +
 +      if(getCenterY() < getHeight() / 2) {
 +         vy = vy * (-1);
 +      }
 +
 +      if(getCenterY() + getHeight() /2 > 600) {
 +         vy = vy * (-1);
 +      }
 +
 +      if(collidesWith(schlägerLinks) || collidesWith(schlägerRechts)) {
 +         vx = vx * (-1);
 +      }
 +
 +      if(getCenterX() < - getWidth() / 2) {
 +         pong.punktFürRechtenSpieler();
 +         setzeZufallsGeschwindigkeit();
 +         moveTo(400, 300);
 +      }
 +
 +      if(getCenterX() > 800 + getWidth() / 2) {
 +         pong.punktFürLinkenSpieler();
 +         setzeZufallsGeschwindigkeit();
 +         moveTo(400, 300);
 +      }
 +
 +   }
 +   
 +
 +   void setzeZufallsGeschwindigkeit() {
 +
 +      double r = Math.random() * 5 + 5;
 +      double winkelGrad = Math.random() * 50 + 20;
 +      double winkelRad = winkelGrad / 180 * Math.PI;
 +      
 +      vx = r * Math.cos(winkelRad);
 +      vy = - r * Math.sin(winkelRad);
 +
 +      if(Math.random() < 0.5) {
 +         vx = -vx;
 +      }
 +
 +      if(Math.random() < 0.5) {
 +         vy = -vy;
 +      }
 +   }
 +}
 +</script>
 +
 +</div>
 +
 +</HTML>
 + \\ 
 +===== Aufgaben =====
 +Erweitere das PONG-Spiel folgendermaßen:
 +  - Wenn der Ball am oberen oder unteren Rand abprallt, soll ein tiefer Ton zu hören sein (Anweisung ''Sound.playSound(Sound.pong_d);''), wenn er an einem Schläger abprallt, soll ein hoher Ton zu hören sein (Anweisung ''Sound.playSound(Sound.pong_f);'').
 +  - Oft dauert es ewig, bis ein Tor erzielt wird. Je länger der Ball im Spiel ist, desto schneller soll er werden. Gleichzeitig soll auch die Geschwindigkeit der Schläger zunehmen. Sobald ein Tor erzielt wird, soll die Geschwindigkeit der Schläger wieder auf den ursprünglichen Wert zurückgesetzt werden.
 +  - Herausforderung (freiwillig): Wenn der Ball einen Schläger mittig trifft, soll er ganz normal abprallen. Je weiter außen er den Schläger trifft, desto stärker soll er zusätzlich in diese Richtung abgelenkt werden.
 +
 +[[.hausaufgabe:verbesserung:start|Hier geht's zur Lösung!]]
 +
 +==== Tipps zu den Aufgaben ====
 +**Grundsätzlich:** Das ist unser erstes größeres Java-Projekt mit mehreren Klassen. Erwartet nicht, dass Ihr alles gleich beim ersten Ansehen durchdringt und habt keine Sorge, es werden sich wieder kleinere Projekte mit wenigen, sehr kleinen Klassen anschließen. Schaut die Videos diesmal am besten mindestens zweimal an und spielt mit den Programmen auf dieser Seite: Verändert sie ein klein wenig, startet sie und untersucht, welche Auswirkungen die Änderungen auf das Spiel haben. Verändert wieder ein kleines Bisschen, usw. \\ \\ 
 +Wenn das Programm nicht mehr geht, könnt Ihr es mit dem Button "Code reset" jederzeit wieder in den Ausgangszustand versetzen.
 +
 +Zu 1.) Ihr müsst die beiden Statements nur an den richtigen Stellen des Programms einfügen. \\ \\ 
 +Zu 2.) Die Geschwindigkeit des Balls ist in den Attributen ''vx'' und ''vy'' gespeichert. Mit ''vx *= 1.01'' und ''vy *= 1.01'' kann man diese geringfügig erhöhen. Diese Statements kann man bspw. in der act-Methode der Klasse Ball einfügen, so dass sie 20-mal pro Sekunde ausgeführt werden. \\ 
 +Die Geschwindigkeit der Schläger ist im Attribut ''dy'' abgelegt. Auch dieses kann man bspw. in der act-Methode der Schläger immer wieder ein ganz kleines Stück erhöhen, dann werden die Schläger immer schneller. Wenn ein Tor erzielt wurde, setzt man den Wert von dy einfach wieder auf den initialen Wert 5 zurück.