In einem neuen Fenster starten: Snake
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).
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.
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.
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.