JumpNRun 01


JumpNRun

  • Klicke in das Spielfeld und bewege das Viereck (die Figur) durch Drücken auf die Tasten W, A, S und D. Du kannst während du D drückst gleichzeitig mehrmals auf W drücken, damit die Figur höher nach rechts auf die Plattform springen kann.

In einem neuen Fenster starten: Jump n Run 1


Erklärungen zum Quellcode

Festlegung der Variablen

    let randAussen;
    let figur;
    let boden;
    let plattform01;

    let geschwindigkeit = 5;

    let SCHWERKRAFT = 1;
    let SPRUNG = 15;

Mit diesen Zeilen werden Variablen festgelegt für die Begrenzung des Spielfelds (randAussen), die zu bewegende Figur (figur), den Boden des Spielfelds (boden), die Plattform (plattform01), die Geschwindigkeit der Figur (geschwindigkeit), die Schwerkraft (SCHWERKRAFT) mit der die Figur von alleine wieder herunterfällt und den Sprung (SPRUNG) der durch drücken von W ausgelöst wird.


Die Methode setup()

function setup() {
  //Anweisungen
}

Die Anweisungen in setup() werden genau einmal zu Beginn des Programms ausgeführt.

let cnv = createCanvas(800, 600);
cnv.position(10,10);

Damit wird ein Spielfeld (cnv) angelegt, das 800x600 Pixel groß ist. Das Spielfeld wird an die Koordinate (10, 10) von oben links aus gesehen gesetzt.

randAussen = new Group();

Die 3 oberen Spielfeldränder werden in einer Gruppe (randAussen) zusammengefasst.

let seitenWandLinks = createSprite(0, height/2, 10, height);
seitenWandLinks.shapeColor = color("lightgray");
seitenWandLinks.immovable = true;
randAussen.add(seitenWandLinks);

let seitenWandOben = createSprite(width/2, 0, width, 10);
seitenWandOben.shapeColor = color("lightgray");
seitenWandOben.immovable = true;
randAussen.add(seitenWandOben); 

let seitenWandRechts = createSprite(width, height/2, 10, height);
seitenWandRechts.shapeColor = color("lightgray");
seitenWandRechts.immovable = true;
randAussen.add(seitenWandRechts);   

Die 3 Wände (oben, rechts, links) werden als Begrenzung des Spielfelds festgelegt, gefärbt (hellgrau), als unbeweglich festgelegt (immovable) und zur randAussen-Gruppe hinzugefügt.

  boden = createSprite(width/2, height, width, 100);
  boden.shapeColor = color("lightgray");
  boden.immovable = true;

Der Boden (boden) wird als untere Begrenzung des Spielfelds festgelegt, gefärbt (hellgrau) und als unbeweglich festgelegt (immovable).

  plattform01 = createSprite(500, height-150, 300, 50);
  plattform01.shapeColor = color("wheat");
  plattform01.immovable = true; 

Die Plattform wird festgelegt, gefärbt (hellbraun) und als unbeweglich festgelegt (immovable).

figur = createSprite(50, height-10, 10, 10);

Die Figur wird als kleines Rechteck (10x10) in das Spielfelds unten links eingefügt.


Die Methode draw()

function draw() {
  //Anweisungen
}

Die Anweisungen in draw() werden 60 mal pro Sekunde ausgeführt.

background(252);

Der Hintergrund des Spielfelds wird hellgrau gefärbt.

figur.collide(randAussen,stopp);

Wenn die Figur mit dem Rand kollidiert, wird die Methode stopp aufgerufen, die am Ende des Quellcodes steht.

figur.velocity.y += SCHWERKRAFT;

Sobald die Tasten losgelassen werden, fällt die Figur beschleunigt nach unten.

  if(figur.collide(boden)) {
    figur.velocity.y = 0;
  }

Sobald die Figur mit dem Boden kollidiert, wird die Geschwindigkeit in y-Richtung Null.

  if(figur.collide(plattform01)) {
    figur.velocity.y = 0;
  }

Sobald die Figur mit der Plattform kollidiert, wird die Geschwindigkeit in y-Richtung Null.

  if(keyWentDown('d')) {
      figur.velocity.x = geschwindigkeit;
  }
  if(keyWentUp('d')) {
      figur.velocity.x = 0;
  }
  if(keyWentDown('a')) {
      figur.velocity.x = -geschwindigkeit;
  }
  if(keyWentUp('a')) {
      figur.velocity.x = 0;
  }  
  if(keyWentDown('w')) {
      figur.velocity.y = -SPRUNG;
  }

Die Figur wird mit den Tasten D, A und W gesteuert. Mit W springt die Figur nach oben.

drawSprites();

Die Ränder und die Figur wird gezeichnet.


Die Methode stopp()

function stopp() {
  //Anweisungen
}

Die Methode stopp() wird gestartet, sobald die Figur mit einem Rand kollidiert.

function stopp() {
  figur.velocity.x = 0;
  figur.velocity.y = 0;
}

Sobald die Figur mit einem Rand kollidiert, soll sie stehen bleiben. Die Geschwindigkeit wird Null.