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.

• Klicke in das Spielfeld und bewege das Viereck (die Schlange = Snake) durch Drücken auf die Tasten W, A, S und D.

In einem neuen Fenster starten: Snake 2

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.