taralino

Bewegung

Im nächsten Schritt bringen wir Bewegung ins Spiel. Dazu nutzen wir das Animation-Paket und initialisieren dieses mit 2 Spielschritte pro Sekunde (fps):

Zur Referenz

Zunächst räumen wir das Spielfeld auf und definieren lediglich eine Schlange, die sich über das Spielfeld bewegt. Wenn sie das Spielfeld verlässt, taucht sie am überliegenden Rand wieder auf. Benötigt werden weitere globale Variablen, um die Bewegung der Schlange programmieren zu können. Im Quellcode sollte auch deutlich werden, wie die Zahlenwerte der Elemente der Schlange zu verstehen sind:

Die Zahlenwerte der Elemente der Schlange geben an, wie viele Spielschritte sich an der jeweiligen Position noch ein Teil der Schlange befindet.

Mit anderen Worten wird (nach der Bewegung) am Kopf der Schlange immer ein neues Element mit der aktuellen Länge der Schlange ergänzt und alle anderen Elemente werden vom Zahlenwert um Eins reduziert. Dadurch wird die Bewegung der Schlange simuliert.

Quellcode

Möglichkeit, um Animation ins Spiel zu bringen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

// Spielfeldgroesse definieren (globaler Parameter)
var n = 12;

// Spielfeld initialisieren (globale Variable)
var T = matrix(n, n);

// Eigenschaften der Schlange (globale Variablen)
var x = 0; // Position (Spalte)
var y = 0; // Position (Zeile)
var size = 0; // Laenge

function spielfeld_start() {
  x = 2;
  y = 1;
  size = 6;
  T[y][x] = size;
};

function setup() {
  spielfeld_start();
  Canvas.init([0,n], [0,n], {width:360, background:"black"});
  Animation.init({fps:2});
};

function schlange_bewegen() {
  x = x + 1;
  if (x == n) x = 0;
};

function spielfeld_updaten() {
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) {
    if (T[i][j] > 0) T[i][j] = T[i][j]-1;
  }
  T[y][x] = size;
};

function spielfeld_zeichnen() {
  Canvas.clear();
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) {
    if (T[i][j] == -2) Canvas.circle(j+0.5, i+0.5, 0.5, {fill:"red"});
    if (T[i][j] == -1) Canvas.box(j+0.5, i+0.5, 0.9, {fill:"blue"});
    if (T[i][j] > 0) {
      Canvas.circle(j+0.5, i+0.5, 0.5, {fill:"green"});
      Canvas.text(j+0.5, i+0.5, T[i][j], {fill:"white"});
    }
  }
};

function loop() {
  schlange_bewegen();
  spielfeld_updaten();
  spielfeld_zeichnen();
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Codingaufgabe

Mache dich mit dem Quellcode zuvor vertraut und verändere diesen:

Passe die Anzahl der Spielschritte pro Sekunde an
Lasse die Schlange nicht von links nach rechts laufen, sondern von oben nach unten
Experimentiere mit der Länge der Schlange