JumpNRun 01


JumpNRun

In diesem Projekt soll ein JumpNRun-Spiel gebaut werden. Der Quellcode wird auf der Entwicklungsplattform repl.it bereitgestellt. Du kannst dir auf repl.it ein Konto anlegen und die Projekte kopieren (Fork).

repl.it ist eine Entwicklungsumgebung die in der Cloud bereitgestellt wird, so dass du von jedem Computer, der mit dem Interent verbunden ist mit an deinen Projekten arbeiten kannst. Klicke im folgenden Beispiel oben rechts auf open in repl.it, so dass du am Quellcode arbeiten kannst.


Starten der Entwicklungsumgebung

  • Nachdem du die Entwicklungsumgebung durch Klicken oben rechts auf open in repl.it in einem neuen Tab geöffnet hast, klicke oben in der Mitte auf die Schaltfläche run um das Programm zu starten.
  • In dem Tab result findest du rechts das Symbol Oben in a new tab. Klicke darauf, so dass das Programm in einem neuen Tab geöffnet wird.
  • 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.

Debuggen des Programms mit Chrome

Wenn du den Tab mit dem Snake-Spiel geöffnet hast, drücke die Taste F12.

  • Klicke auf Sources
  • klicke dann auf das Symbol Show navigator.
  • Öffne die Datei script.js
  • Füge in Zeile 40 einen Breakpoint ein, indem du an den Anfang von Zeile 40 klickst.
  • Lade die Seite neu, indem du auf Seite aktualisieren klickst und drücke die Taste 'd'. Das Programm stoppt in der Zeile 40 und du kannst mit Hilfe der Steuertasten Resume, Step over, Step into, Step den Programmablauf steuern. Die Details besprechen wir in der AG.

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.