Snake 01


Snake

  • 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


Erklärungen zum Quellcode

Festlegung der Variablen

let randAussen;
let figur;
let geschwindigkeit = 5;

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


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.

if(keyWentDown('d')) {
    figur.setSpeed(geschwindigkeit,0);
}
if(keyWentUp('d')) {
    figur.setSpeed(0,0);
}
if(keyWentDown('a')) {
    figur.setSpeed(geschwindigkeit,180);
}
if(keyWentUp('a')) {
    figur.setSpeed(0,0);
}  
if(keyWentDown('s')) {
    figur.setSpeed(geschwindigkeit,90);
}
if(keyWentUp('s')) {
    figur.setSpeed(0,0);
}
if(keyWentDown('w')) {
    figur.setSpeed(geschwindigkeit,270);
}
if(keyWentUp('w')) {
    figur.setSpeed(0,0);
}

Wenn die entsprechende Taste gedrückt wird, wird die Geschwindigkeit der Figur auf den Wert von geschwindigkeit gesetzt und die Figur bewegt sich in die angegebene Richtung (0 = nach rechts, 180 = nach links, 90 = nach oben, 270 = nach unten). Wenn die entsprechende Taste losgelassen wird, wird die Geschwindigkeit der Figur wieder auf Null gesetzt, die Figur bleibt stehen.

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.