Wenn, dann

Der Ball ist weg

Am Ende des letzten Kapitels blieb eine Frage offen. Dein Ball rollt nach rechts — und dann ist er fort. Er kommt nicht wieder.

BeispielDas Problem

Schau auf die Zahl oben links. Sie wächst und wächst — 400, 900, 5000. Der Ball ist längst nicht mehr zu sehen, aber das Programm rechnet stur weiter. Es weiß ja gar nicht, dass da ein Rand ist.

Und genau das ist der Punkt: Bisher macht dein Programm bei jedem Bild exakt dasselbe. Es kann nicht auf die Lage reagieren, weil ihm die Möglichkeit fehlt, überhaupt etwas zu entscheiden.

Diese Möglichkeit heißt if — auf Deutsch „wenn".

Die Entscheidung: if

Ein if stellt eine Frage, auf die es nur zwei Antworten gibt: ja oder nein. Lautet die Antwort ja, wird der Block in den geschweiften Klammern ausgeführt. Lautet sie nein, wird er übersprungen.

if (x > 300) {
  // passiert nur, WENN x größer als 300 ist
}

Drei Dinge gehören dazu, und alle drei sind Pflicht:

das Wort if
die Frage in runden Klammern
der Block in geschweiften Klammern

Der Ball kehrt um

Jetzt reparieren wir den Ball damit. Die Idee ist verblüffend einfach: Wenn er rechts ankommt, drehen wir seine Richtung um.

BeispielDer erste if — der Ball kehrt um

float x = 40;
float tempo = 3;

void setup() {
size(360, 170);
}

void draw() {
background(250);
noStroke();
fill(70, 130, 220);
circle(x, 100, 40);

x = x + tempo;

if (x > width) {
  tempo = -tempo;
}
}

Die Zeile tempo = -tempo; ist der ganze Trick.

Erst überlegen

In der Zeile x = x + tempo; wird weiterhin ADDIERT — es steht ja immer noch ein Plus da. Wie kann der Ball dann rückwärts laufen?

Beide Ränder

Links läuft er allerdings immer noch hinaus. Kein Wunder — dafür haben wir ja auch keine Frage gestellt. Also stellen wir eine zweite:

BeispielBeide Ränder

float x = 40;
float tempo = 3;

void setup() {
size(360, 170);
}

void draw() {
background(250);
noStroke();
fill(70, 130, 220);
circle(x, 100, 40);

x = x + tempo;

if (x > width) {
  tempo = -tempo;
}

if (x < 0) {
  tempo = -tempo;
}
}

Der Ball läuft jetzt endlos hin und her. Das ist — ohne Übertreibung — der Kern von Pong, Breakout und jedem Jump-and-Run der Welt.

Womit man vergleicht

In der Klammer steht eine Frage, die nur wahr oder falsch sein kann. Dafür gibt es sechs Vergleiche:

Zeichen	Frage	Beispiel
`>`	größer als	`x > 300`
`<`	kleiner als	`x < 0`
`>=`	größer oder gleich	`x >= 300`
`<=`	kleiner oder gleich	`x <= 0`
`==`	gleich	`leben == 0`
`!=`	ungleich	`leben != 0`

Fünf davon sind selbsterklärend. Der sechste ist die häufigste Fehlerquelle im ganzen Kapitel.

Vorsicht

Zum Vergleichen brauchst du zwei Gleichheitszeichen:

if (punkte == 10) { }   // richtig: Ist punkte gleich 10?
if (punkte = 10) { }    // FALSCH: setzt punkte auf 10!

Erinnerst du dich an das letzte Kapitel? Ein einzelnes = bedeutet zuweisen, nicht „ist gleich". Schreibst du es hier hin, verändert die Bedingung heimlich deine Variable — statt sie zu prüfen.

Processing meldet das als Fehler. Trotzdem passiert es jedem, und es passiert oft. Merksatz: Ein = verändert, zwei == fragen.

Bei boolean-Variablen brauchst du gar keinen Vergleich. Die Variable ist ja schon wahr oder falsch:

boolean laeuft = true;

if (laeuft) {          // schön
}

if (laeuft == true) {  // umständlich, aber nicht falsch
}

Und für „wenn nicht" gibt es das Ausrufezeichen:

if (!laeuft) {   // wenn laeuft NICHT wahr ist
}

Warum der Ball halb im Rand steckt

Schau dir den Abprall oben genau an. Der Ball ragt ein Stück über den Rand hinaus, bevor er umkehrt.

Erst überlegen

Warum ragt der Ball über den Rand hinaus, obwohl die Bedingung x > width doch genau am Rand zuschlägt?

BeispielSauberer Abprall

float x = 60;
float tempo = 3;
float radius = 20;

void setup() {
size(360, 170);
}

void draw() {
background(250);

// Zwei Linien, damit man den Rand sieht
stroke(200);
line(radius, 0, radius, height);
line(width - radius, 0, width - radius, height);

noStroke();
fill(70, 130, 220);
circle(x, 100, radius * 2);

x = x + tempo;

if (x > width - radius) {
  tempo = -tempo;
}

if (x < radius) {
  tempo = -tempo;
}
}

Jetzt berührt der Ball den Rand genau und kehrt dort um. Der Unterschied sieht winzig aus, aber bei Pong entscheidet er darüber, ob der Ball sichtbar am Schläger abprallt oder halb in der Wand verschwindet.

Sonst: else und else if

Bisher hast du gefragt: „Wenn ja, dann tu etwas." Oft willst du aber auch sagen, was passieren soll, wenn nicht. Dafür gibt es else:

if (punkte > 10) {
  fill(80, 160, 120);   // grün
} else {
  fill(220, 90, 90);    // rot
}

Genau einer der beiden Blöcke läuft. Nie beide, nie keiner.

Und wenn es mehr als zwei Fälle gibt, hängst du weitere Fragen dazwischen:

BeispielDrei Zonen, drei Farben

float x = 0;
float tempo = 3;

void setup() {
size(380, 180);
}

void draw() {
background(250);
noStroke();

if (x < width / 3) {
  fill(80, 160, 120);
} else if (x < width * 2 / 3) {
  fill(230, 170, 60);
} else {
  fill(220, 90, 90);
}

circle(x, 95, 44);

x = x + tempo;
if (x > width || x < 0) {
  tempo = -tempo;
}
}

Processing arbeitet die Kette von oben nach unten ab und steigt beim ersten Treffer aus. Ist x kleiner als ein Drittel der Breite, wird grün gefüllt — die anderen Fragen werden dann gar nicht mehr gestellt.

Die Reihenfolge in einer else if-Kette ist allerdings nicht egal.

Erst überlegen

Jemand mit 200 Punkten führt diese Kette aus. Was steht danach auf dem Bildschirm — und warum ist das ein Fehler?

Zwei Fragen auf einmal

Manchmal reicht eine Frage nicht. „Ist der Mauszeiger im Feld?" bedeutet in Wahrheit vier Fragen gleichzeitig: nicht zu weit links, nicht zu weit rechts, nicht zu weit oben, nicht zu weit unten.

Dafür gibt es zwei Verknüpfungen:

&& — und. Wahr, wenn beide Seiten wahr sind.
|| — oder. Wahr, wenn mindestens eine Seite wahr ist.

Die beiden senkrechten Striche tippst du mit AltGr + <.

BeispielBin ich im Feld?

void setup() {
size(380, 220);
rectMode(CENTER);
}

void draw() {
background(250);
noStroke();

fill(230);
rect(width / 2, height / 2, 160, 100);

// Alle vier Bedingungen müssen stimmen
if (mouseX > width / 2 - 80 && mouseX < width / 2 + 80
    && mouseY > height / 2 - 50 && mouseY < height / 2 + 50) {
  fill(80, 160, 120);
} else {
  fill(190);
}

circle(mouseX, mouseY, 26);
}

Führ die Maus in das graue Rechteck. Der Punkt wird grün — aber nur, wenn wirklich alle vier Teilfragen mit ja beantwortet werden. Fällt eine davon aus, ist die ganze Bedingung falsch.

Beim Abprall oben passt dagegen || besser. Denn dort ist es egal, welcher Rand erreicht wurde — umkehren soll er in beiden Fällen:

if (x > width - radius || x < radius) {
  tempo = -tempo;
}

Das ersetzt die beiden einzelnen if-Blöcke von vorhin. Kürzer, und es sagt genau das, was gemeint ist.

Der erste Punktestand

Jetzt fügt sich zusammen, was du in beiden Kapiteln gelernt hast. Ein Punktestand ist nichts weiter als eine Variable, die sich etwas merkt — plus ein if, das entscheidet, wann sie hochgezählt wird.

BeispielJeder Abprall zählt

float x = 60;
float tempo = 4;
float radius = 18;
int punkte = 0;

void setup() {
size(380, 190);
}

void draw() {
background(250);
noStroke();

fill(70, 130, 220);
circle(x, 115, radius * 2);

x = x + tempo;

if (x > width - radius) {
  tempo = -tempo;
  punkte = punkte + 1;
}

if (x < radius) {
  tempo = -tempo;
}

fill(40);
textSize(20);
text("Punkte: " + punkte, 16, 36);
}

Beachte, wo die Variable steht: ganz oben, außerhalb von draw(). Stünde int punkte = 0; innerhalb von draw(), würde sie 60-mal pro Sekunde auf 0 zurückgesetzt — die Falle aus dem letzten Kapitel.

Und beachte, wo hochgezählt wird: innerhalb des if-Blocks. Deshalb passiert es nur beim Abprall und nicht bei jedem Bild.

Eine Falle lauert hier allerdings noch.

Erst überlegen

Dieser Code soll pro Mausklick einen Punkt geben. Du klickst einmal kurz — sagen wir, du hältst die Taste eine Drittelsekunde. Wie viele Punkte bekommst du?

Neue Werkzeuge

Werkzeuge für Entscheidungen

AufgabenÜbungen

Übung 3.1Level 1Stopp am Rand

Der Ball soll diesmal nicht abprallen, sondern am rechten Rand einfach stehen bleiben — und zwar so, dass er noch vollständig zu sehen ist.

Dein VersuchProcessing