Snake 01


Snake

In diesem Projekt soll das Spiel Snake nachgebaut 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 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;

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.