Um mit dem Spiel zu starten müssen wir wie gewohnt im setup() die Größe unseres Spielfelds festlegen. Wir verwenden ein Spielfeld der Größe 400x800px

void setup() {
 size(400, 800);
 background(#FFFFFF)
}
void draw() {
    //Zeichne hier den Hintergrund des Spielfelds, dass es so aussieht, wie auf dem Bild oben.
} 

Das Rechteck soll klein sein und soll am unteren Bildschirmrand sein. Die Position soll sich mit der Position der Maus nach links und rechts verschieben.

Überlege dir, wie du die Position des Rechtecks festlegst, damit die x-Achse mit der x-Position der Maus verbunden ist. Die genaue Größe des Rechtecks kannst du selbst festlegen.

Zu Beginn: Erzeuge die drei Kreise vorerst  am oberen Bildschirmrand in den richtigen Größen.

Weiter geht’s: Jetzt wird es knifflig: Die Kreise sollen nach unten fallen. Das bedeutet, dass wir für jeden Kreis eine Variable benötigen, die in jedem Aufruf (Durchgang) von draw() vergrößert wird, damit sich die y-Position des Kreises automatisch verändert.

Dazu kopierst du am besten diesen Code VOR alles andere, sogar vor das setup()

int y1 = 0; //y-Position des ersten Kreises
int y2 = 0; //y-Position des zweiten Kreises
int y3 = 0; //y-Position des dritten Kreises

Warum machen wir das?

Für den Anfang ist es noch nicht so wichtig zu verstehen, warum die Variablen dort hingeschrieben werden. Sie sind dort, damit wir im draw() darauf zugreifen und sie verändern können. Das int davor bedeutet, dass es eine Zahl ist. Wir legen sie am Anfang auf den Wert 0 fest, da die Kreise ja von oben starten.

Die Kreise fallen lassen: Um die y-Position der Kreise zu erhöhen, müssen die Variablen überschrieben werden. Hier ein Beispiel, wie das geht:

y1 = (y1+5);

Dabei ist die Zahl 5 sozusagen die Geschwindigkeit, in welcher der Ball fällt. Diese Codezeile sollte im Code direkt nach dem erzeugten Kreis stehen. Probier es einmal aus und schau, was passiert!

Wir müssen natürlich immer überprüfen, ob unser Auffang-Rechteck die Kreise auch wirklich auffängt.

Überlege: Es müssen zwei Bedingungen überprüft werden. Am besten überprüfst du immer die x-Position der Maus und ebenfalls, ob der Kreis auf Position des Rechtecks ist. Wenn wir den Ball gefangen haben, also die x-Position der Maus zum richtigen Zeitpunkt an der richtigen Stelle war, müssen unsere Variablen wieder auf 0 gesetzt werden.

Hier ist das Grundgerüst für den ersten Kreis:

if(y1> HIER KOMMT DEIN CODE){   
    if(mouseX < HIER KOMMT DEIN CODE){
      y1=0;   
   }
}

Um zu überprüfen, ob ein Ball außerhalb des Bildes ist, gibt es eine Funktion, die uns den aktuell höchsten Wert zurückgibt.

Auch hier geben wir euch ein Grundgerüst vor:

if(max(y1,y2,y3)> HIER KOMMT DEIN CODE){
   //HIER KOMMT DEIN CODE
   //PROGRAMMIERE HIER, WAS PASSIERT, WENN MAN VERLIERT

   noLoop(); // Dieser Befehl beendet das Spiel.
}