p5js Kurs: Lektion 7: Ein einfaches Spiel programmieren

14. Mai 2021

|In p5js, p5js Kurs 2021

Das fertige Spiel

Aufbau des Spiels in sieben Schritten

Schritt 1

Ein „Ball“ fliegt von oben nach unten durch das Programmfenster.
Wenn er die untere Kante des Programmfensters überquert hat, erscheint ein neuer Ball.
Jeder Ball hat eine zufällige horizontale Position.

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;

function setup() {
  breite = min(windowWidth, 400);
  createCanvas(breite, 400);

  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
}

function draw() {
  background(255, 192, 203);

  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit;
  
  // Wenn der Ball die Unterkante überquert hat...
  if (yPos > height + durchmesser) {
    // ...bekommt er eine neue Position über der oberen Kante:
    xPos = random(width);
    yPos = -50;
  }
  
  // Zeichnen des Balls
  ellipse(xPos, yPos, durchmesser);
}

Programm im Editor öffnen

Schritt 2

Du kannst den Ball mit dem Mauszeiger „fangen“: Wenn Du ihn anklickst, verschwindet er.
Danach erscheint, genau wie nach einer kompletten Durchquerung des Programmfensters, ein einer Ball.

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;

function setup() {
  breite = min(windowWidth, 400);
  createCanvas(breite, 400);

  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
}

function draw() {
  background(255, 192, 203);

  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit;
  
  // Wenn der Ball die Unterkante überquert hat...
  if (yPos > height + durchmesser) {
    // ...bekommt er eine neue Position über der oberen Kante:
    xPos = random(width);
    yPos = -50;
  }
  
  // Zeichnen des Balls
  ellipse(xPos, yPos, durchmesser);
}

// Wenn die Maustaste gedrückt wurde:
function mousePressed(){
  // Wenn der Ball gefangen wurde:
  if (dist(mouseX, mouseY, xPos, yPos) < durchmesser/2) {
    xPos = random(width);
    yPos = -50;
  }
}

Programm im Editor öffnen

Schritt 3

Diese Version ist für die Benutzer:in nicht von der vorherigen zu unterscheiden, ist aber viel schöner programmiert:
Für die Erzeugung eines neuen Balles haben wir jetzt die Funktion neuerBall() geschrieben.
Der Vorteil: In drei Situationen muss ein neuer Ball erzeugt werden:
– Wenn das Spiel startet
– Wenn der Ball Dir entwischt ist
– Wenn Du den Ball getroffen hast
Anstatt nun drei Mal den kompletten Code hinzuschreiben, schreibst Du nur noch neuerBall() an den drei Stellen!
Wenn Du etwas am Ball ändern willst, musst Du es nur noch an einer Stelle ändern!

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;

function setup() {
  breite = min(windowWidth, 400);
  createCanvas(breite, 400);
  background(240);

  neuerBall();
}

function draw() {
  background(255, 192, 203);

  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit;
  
  // Wenn der Ball die Unterkante überquert hat...
  if (yPos > height + durchmesser) {
    // ...bekommt er eine neue Position über der oberen Kante:
    neuerBall();
  }
  
  // Zeichnen des Balls
  ellipse(xPos, yPos, durchmesser);
}

// Wenn die Maustaste gedrückt wurde:
function mousePressed(){
  // Wenn der Ball gefangen wurde:
  if (dist(mouseX, mouseY, xPos, yPos) < durchmesser/2) {
    neuerBall();
  }
}

function neuerBall() {
  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
}

Programm im Editor öffnen

Schritt 4

Die Spielerin bekommt die Eigenschaften punkte und leben. Zu Beginn des Spiels hat die Spielerin null Punkte und drei Leben.
Diese beiden Werte werden am unteren Rand des Programmfensters angezeigt. Das erledigt eine eigene Funktion textAnzeigen().
Die vierte Version des Spiels ändert die Werte noch nicht…

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;

// Eigenschaften des Spielers
let punkte;
let leben;

function setup() {
  breite = min(windowWidth, 400);
  createCanvas(breite, 400);
  background(240);
  
  textSize(20);
  textAlign(CENTER);
  
  punkte = 0;
  leben = 3;

  neuerBall();
}

function draw() {
  background(255, 192, 203);

  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit;
  
  // Wenn der Ball die Unterkante überquert hat...
  if (yPos > height + durchmesser) {
    neuerBall();
  }
  
  fill(255);
  ellipse(xPos, yPos, durchmesser);
  textAnzeigen()
}

// Wenn die Maustaste gedrückt wurde:
function mousePressed(){
  // Wenn der Ball gefangen wurde:
  if (dist(mouseX, mouseY, xPos, yPos) < durchmesser/2) {
    neuerBall();
  }
}

// Funktion für die Erzeugung eines neuen Balls:
function neuerBall() {
  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
}

// Funktion für die Anzeige von Punkten und Leben:
function textAnzeigen() {
  fill(0);
  text("PUNKTE: " + punkte, 60, height-10);
  text("LEBEN: " + leben, width-60, height-10);
}

Programm im Editor öffnen

Schritt 5

Das kommt mit dem fünften Schritt hinzu: Jedes Mal, wenn ein Ball gefangen wurde, wird der Punktestand um 1 erhöht. Und wenn ein Ball entwischt, wird ein Leben abgezogen.

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;

// Eigenschaften des Spielers
let punkte;
let leben;

function setup() {
  breite = min(windowWidth, 400);
  createCanvas(breite, 400);
  
  textSize(20);
  textAlign(CENTER);
  
  punkte = 0;
  leben = 3;

  neuerBall();
}

function draw() {
  background(255, 192, 203);

  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit;
  
  // Wenn der Ball die Unterkante überquert hat...
  if (yPos > height + durchmesser) {
    neuerBall();
    leben = leben - 1;
  }
  
  fill(255);
  ellipse(xPos, yPos, durchmesser);
  textAnzeigen()
}

// Wenn die Maustaste gedrückt wurde:
function mousePressed(){
  // Wenn der Ball gefangen wurde:
  if (dist(mouseX, mouseY, xPos, yPos) < durchmesser/2) {
    punkte = punkte + 1;
    neuerBall();
  }
}

// Funktion für die Erzeugung eines neuen Balls:
function neuerBall() {
  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
}

// Funktion für die Anzeige von Punkten und Leben:
function textAnzeigen() {
  fill(0);
  text("PUNKTE: " + punkte, 60, height-10);
  text("LEBEN: " + leben, width-60, height-10);
}

Programm im Editor öffnen

Schritt 6

Der Haken an der letzten Version: Ihr habt im Prinzip unendlich viele Leben; nach dem dritten entwischten Ball zeigt das Programmfenster Leben: 0 an, nach dem vierten Leben: -1 und so weiter.

Die Sechste Version sorgt dafür, dass das Spiel zuende ist, wenn leben <= 0. Dann wird ein amtliches GAME OVER angezeigt, wie es sich gehört!

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;

// Eigenschaften des Spielers
let punkte;
let leben;

function setup() {
  breite = min(windowWidth, 400);
  createCanvas(breite, 400);
  
  textSize(20);
  textAlign(CENTER);
  
  punkte = 0;
  leben = 3;

  neuerBall();
}

function draw() {
  background(255, 192, 203);

  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit;
  
  // Wenn der Ball die Unterkante überquert hat...
  if (yPos > height + durchmesser) {
    neuerBall();
    leben = leben - 1;
  }
  
  // Wenn die drei Leben verbraucht sind:
  if (leben < 1) {
    fill(0);
    text("GAME OVER", width/2, height/2);
    noLoop();
  }
  
  fill(255);
  ellipse(xPos, yPos, durchmesser);
  textAnzeigen()
}

// Wenn die Maustaste gedrückt wurde:
function mousePressed(){
  // Wenn der Ball gefangen wurde:
  if (dist(mouseX, mouseY, xPos, yPos) < durchmesser/2) {
    punkte = punkte + 1;
    neuerBall();
  }
}

// Funktion für die Erzeugung eines neuen Balls:
function neuerBall() {
  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
}

// Funktion für die Anzeige von Punkten und Leben:
function textAnzeigen() {
  fill(0);
  text("PUNKTE: " + punkte, 60, height-10);
  text("LEBEN: " + leben, width-60, height-10);
}

Programm im Editor öffnen

Schritt 7

Die siebte und letzte Version bringt drei Neuerungen:
Jeder neue Ball hat nun eine zufällige, rot/bläuliche Farbe spendiert.
Die Fallgeschwindigkeit ist jetzt auch von der Punktzahl abhängig. je höher die Punktzahl, um so schneller der Ball!
Der Ordnung halber gibt es auch für das Zeichnen des Balls eine eigene Funktion.

▽ Code

// Eigenschaften des Balls
let durchmesser;
let xPos, yPos;
let fallgeschwindigkeit;
let ballfarbe;

// Eigenschaften des Spielers
let punkte;
let leben;


function setup() {
  breite = min(windowWidth, 400)
  createCanvas(breite, 400);

  noStroke();
  textSize(20);
  textAlign(CENTER);
  
  punkte = 0;
  leben = 3;
  
  neuerBall();
}

function draw() {
  background(255, 192, 203);
  
  // Neue Position des Balls
  yPos = yPos + fallgeschwindigkeit + (punkte/25);
  
  // Wenn der Ball nicht gefangen wurde:
  if (yPos > height + durchmesser) {
    leben = leben - 1;
    neuerBall();
  }
  
  // Wenn die drei Leben verbraucht sind:
  if (leben < 1) {
    fill(0);
    text("GAME OVER", width/2, height/2);
    noLoop();
  }
  
  ballZeichnen();
  textAnzeigen();
}

// Wenn die Maustaste gedrückt wurde:
function mousePressed(){
  // Wenn der Ball gefangen wurde:
  if (dist(mouseX, mouseY, xPos, yPos) < durchmesser/2) {
    punkte = punkte + 1;
    neuerBall();
    textAnzeigen();
  }
}

// Funktion für die Erzeugung eines neuen Balls:
function neuerBall() {
  durchmesser = 50;
  xPos = random(width);
  yPos = -50;
  fallgeschwindigkeit = 3;
  ballfarbe = color(random(100, 255), 0, random(100, 255));
}

// Funktion für die Anzeige von Punkten und Leben:
function textAnzeigen() {
  fill(0);
  text("PUNKTE: " + punkte, 60, height-10);
  text("LEBEN: " + leben, width-60, height-10);
}

// Funktion für das Zeichnen des Balls:
function ballZeichnen() {
  fill(ballfarbe);
  ellipse(xPos, yPos, durchmesser);
}

Programm im Editor öffnen

Navigation

Übersicht

Vorherige Lektion

Nächste Lektion

Dieser Kurs wurde entwickelt mit freundlicher Unterstützung und Kooperation in Workshops mit der Lernoase im Freizeitheim Vahrenwald in Hannover.
Alle Materialien stehen unter der Lizenz CC BY-NC-SA 4.0 mit Namensnennung „Pit Noack“.