NextTreffer
Kollisionserkennung - der Kern jedes Spiels.
Das kannst du danach
0 von 5 abgehakt- Du kannst mit dist() den Abstand zwischen zwei Punkten berechnen.
- Du kannst erklären, wann sich zwei Kreise berühren.
- Du kannst prüfen, ob ein Punkt innerhalb eines Rechtecks liegt.
- Du kannst eine Kollision nutzen, damit dein Spiel darauf reagiert.
- Du hast eine Kollisionsprüfung in dein eigenes Spiel eingebaut.
Melde dich an, um deinen Stand zu speichern.
Wann berühren sich zwei Kreise?
Ein Ziel wird getroffen. Ein Ball prallt vom Schläger ab. Ein Ball zerschlägt einen Block. Alle drei sind dasselbe Problem: Dein Programm muss erkennen, dass sich zwei Dinge berühren — das nennt man Kollisionserkennung.
Bisher hat dein Code nur Bedingungen wie x > width geprüft — einen
einzelnen Wert gegen eine feste Grenze. Für eine Kollision brauchst du
etwas Neues: den Abstand zwischen zwei Punkten.
Erst überlegen
Ein Ziel hat den Mittelpunkt (200, 150). Der Mauszeiger steht bei (205, 148). Berühren sich beide, wenn das Ziel einen Radius von 30 hat?
Der Abstand zweier Punkte
Processing rechnet dir den Abstand zwischen zwei Punkten direkt aus:
float abstand = dist(x1, y1, x2, y2);
dist() nimmt die Koordinaten von zwei Punkten und gibt die Länge der
Strecke dazwischen zurück — dieselbe Rechnung, die du aus dem
Satz des Pythagoras kennst, nur dass Processing sie für dich erledigt.
Neues Werkzeug
Kollision zwischen zwei Kreisen
Zwei Kreise berühren sich, wenn ihr Abstand kleiner ist als die Summe ihrer Radien:
if (dist(x1, y1, x2, y2) < r1 + r2) {
// Sie berühren sich
}
Bewege die Maus über das Ziel — der Kreis färbt sich um, sobald sich die beiden Kreise berühren:
Erst überlegen
Ein Ziel hat Durchmesser 60, der Mauszeiger zählt als Kreis mit Durchmesser 10. Bei welchem Abstand berühren sie sich gerade noch?
Kollision mit einem Rechteck
Ein Schläger in Pong, ein Knopf, eine Wand — nicht alles ist ein Kreis.
Für ein Rechteck gibt es keine einzelne Formel wie dist(), dafür eine
Kette aus vier Bedingungen mit &&:
boolean drin = mausX > kastenX &&
mausX < kastenX + breite &&
mausY > kastenY &&
mausY < kastenY + hoehe;
Ein Punkt liegt nur dann innerhalb, wenn er rechts von der linken
Kante, links von der rechten Kante, unterhalb der oberen und oberhalb
der unteren Kante liegt — alle vier müssen zutreffen, deshalb &&
und nicht ||.
Erst überlegen
Warum reichen zwei Bedingungen (mausX > kastenX und mausY > kastenY) nicht aus?
AufgabenBaue Kollision in dein Spiel ein
Dein SpielErste Trefferin der Processing-IDE
- Aim Trainer: Prüfe beim Klick, ob der Mauszeiger innerhalb eines
Ziels lag. Nutze
dist()zwischen Klickposition und Zielmittelpunkt. - Pong: Prüfe, ob der Ball das Rechteck deines Schlägers berührt. Nutze die Vier-Bedingungen-Kette von eben.
- Breakout: Prüfe die Kollision zwischen Ball und einem einzelnen Block. Mehrere Blöcke gleichzeitig kommen in einem späteren Kapitel — dafür brauchst du erst noch ein neues Werkzeug.
Schreib das in deinem Processing-Sketch weiter.
Sichere deinen Code zusätzlich selbst — auf einem Stick oder in deiner Cloud — und lade ihn am Ende auch in den Moodle-Kurs hoch.
Übung 5.1Level 1Getroffen oder nicht?
Färbe den Kreis rot, sobald die Maus über ihm steht — sonst bleibt er blau. Die Maus selbst zählt als ein einzelner Punkt, ihr „Radius“ ist also 0.
Tipp: Strg + Eingabe führt den Code aus.
Übung 5.2Level 2Der Schläger
Ein Pong-Schläger als Rechteck. Färbe ihn hell, sobald die Maus über ihm steht.
Tipp: Strg + Eingabe führt den Code aus.
Übung 5.3Level 3Der Ball prallt ab
Der Ball fliegt nach links auf den Schläger zu. Erkenne die Kollision mit dem Rechteck des Schlägers und lass den Ball danach nach rechts zurückfliegen. Es gibt absichtlich keine Musterlösung — die Umkehrung kannst du an mehreren Stellen im Code einbauen, Hauptsache sie wirkt nur einmal pro Kontakt.
Tipp: Strg + Eingabe führt den Code aus.
Zu dieser Aufgabe gibt es bewusst keine Musterlösung. Es gibt mehrere richtige Wege — speichere deinen, dann kann er im Unterricht besprochen werden.
Übung 5.4★ SternaufgabeStern: Von welcher Seite?
Ein Ball, der einen Block von links trifft, muss horizontal abprallen — einer, der ihn von oben trifft, vertikal. Zeichne einen Ball an der Mausposition und färbe ihn so ein, dass eine Farbe „von der Seite“ und eine andere „von oben oder unten“ bedeutet. Auch hier gibt es absichtlich keine Musterlösung.
Tipp: Strg + Eingabe führt den Code aus.
Sternaufgabe. Die zählt nicht zum Fortschritt — du verlierst also nichts, wenn du sie auslässt. Schaffst du sie, gibt es dafür einen Stern.
Zu dieser Aufgabe gibt es bewusst keine Musterlösung. Es gibt mehrere richtige Wege — speichere deinen, dann kann er im Unterricht besprochen werden.
Was noch fehlt
Du kannst jetzt prüfen, ob ein Ball einen Block trifft. Aber eine Breakout-Mauer hat 40 Blöcke, und jeder muss einzeln reagieren können, wenn er getroffen wird — einer verschwindet, die anderen bleiben.
Vierzig einzelne Variablen block1, block2, block3 … wären genauso
mühsam wie die 80 einzelnen rect()-Zeilen aus dem letzten Kapitel.
Dafür brauchst du ein neues Werkzeug, das viele Werte auf einmal merkt
— dazu kommt bald ein eigenes Kapitel.
Sitzt das?
1 / 4Was berechnet dist(x1, y1, x2, y2)?