taralino

Interaktion

Schließlich bringen wir Tastatur-Interaktion per Pfeiltasten ins Spiel:

Dazu wird eine neue globale Variable eingeführt, die als Zeichenkette speichert, welche Taste zuletzt gedrückt wurde und damit in welche Richtung sich die Schlange bewegen soll:

Zeichenkette	Bedeutung (Richtung)
N	Norden (oben)
O	Osten (rechts)
S	Süden (unten)
W	Westen (links)

Quellcode

Möglichkeit, um Interaktion 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
var view = ""; // Richtung der Bewegung

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

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

function schlange_bewegen() {
  if (view == "O") x = x + 1;
  if (x == n) x = 0;
  if (view == "W") x = x - 1;
  if (x < 0) x = n-1;
  if (view == "N") y = y + 1;
  if (y == n) y = 0;
  if (view == "S") y = y - 1;
  if (y < 0) y = n-1;
};

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.circle(x+0.5, y+0.5, 0.5, {fill:"lime"});
};

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

function on_key_down(k) {
  if (k == "UP") view = "N";
  if (k == "RIGHT") view = "O";
  if (k == "DOWN") view = "S";
  if (k == "LEFT") view = "W";
};

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

Vorschau Download Kopie speichern

Codingaufgabe

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

Wähle statt der Pfeile die Tasten A, S, D und W, um die Schlange zu steuern
Entwickele einen Gegenteil-Modul, bei dem die Bedeutung von Norden und Süden sowie von Osten und Westen jeweils getauscht wird