Snake 02


Prototyp 2

Beim zweiten Prototypen (wir versuchen die grundlegenden Funktionen zu programmieren, bevor das Spiel hübsch wird) soll anstelle eines einzelnen Rechtsecks eine Schlange gezeichnet werden.


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 Schlange = Snake) durch Drücken auf die Tasten W, A, S und D.

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 geschwindigkeit = 5;

    let snake_spur = [];

Mit diesen Zeilen werden Variablen festgelegt für die Begrenzung des Spielfelds (randAussen), die zu bewegende Figur (figur), die Geschwindigkeit der Figur (geschwindigkeit) und die Schlange (snake_spur).


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 4 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);   

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

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

figur = createSprite(width/2, height/2, 10, 10);

Die Schlange wird als kleines Rechteck (10x10) in die Mitte des Spielfelds (width/2, height/2) 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.

 let snake_position = createVector(0, 0);

Damit die Spur der Schlange gezeichnet werden kann, muss der Computer sich die Position der Figur merken. Die snake_position merkt sich die x- und y-Koordinate der Figur.

  if(keyIsPressed) {
    //Anweisungen
  } else {
    figur.velocity.x = 0;
    figur.velocity.y = 0;
  }

Die Steuerung der Figur wird jetzt etwas anders programmiert als im ersten Beispiel. Wenn eine Taste gedrückt ist, führ die folgenden Anweisungen aus, sonst setze die Geschwindigkeit der Figur in x- und in y-Richtung auf Null.

Wenn eine Taste gedrückt wurde, führe folgende Anweisungen aus:

if(keyWentDown('d')) {
    figur.velocity.x = geschwindigkeit;
}
if(keyWentDown('a')) {
    figur.velocity.x = -geschwindigkeit;
}
if(keyWentDown('s')) {
    figur.velocity.y = geschwindigkeit;
}
if(keyWentDown('w')) {
    figur.velocity.y = -geschwindigkeit;
}
snake_position.x = figur.position.x;
snake_position.y = figur.position.y;
snake_spur.push(snake_position);

Wenn eine der Richtungstasten gedrückt wurde, setze die Geschwindigkeit (velocity) in x- oder y-Richtung auf den Wert der Variablen geschwindigkeit. Merke die die Position der Figur in der Variablen snake_position und speichere die Koordinate in der Schlangen-Spur (snake_spur).

  if(snake_spur.length > 1) {
    for(let i=0; i<snake_spur.length; i++){
      fill('teal');
      ellipse(snake_spur[i].x, snake_spur[i].y, 5, 5);
    }
  }

Wenn die Schlangen-Spur (snake_spur) länger als 1 ist, dann male die Schlangen-Spur in das Spielfeld, indem auf jede gemerkte Koordinate ein Kreis gemalt wird.

  if(snake_spur.length > 100) {
    snake_spur.shift();
  } 

Wenn die Schlangen-Spur länger als 100 geworden ist, entferne die zuerst gemerkte Koordinate aus der Schlangen-Spur (snake_spur.shift()).

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.

  figur.setSpeed(0,0);

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