taralino

Einleitung

Wenn du bereits mit Grundlagen der textbasierten Programmierung in JavaScript sowie der taralino-Umgebung vertraut bist, kannst du in diesem Kurs lernen, wie der Computerspielklassiker Snake implementiert werden kann.

Die Aufgabe besteht darin, eine Schlange per Pfeiltasten über ein Spielfeld zu steuern und dabei Äpfel zu fressen. Pro Apfel wird die Schlange ein Stückchen länger und die Herausforderung besteht darin, dass man sich weder in den eigenen Schwanz beißen noch gegen eine Wand läuft.

In der nachfolgenden Anwendung findest du ein Beispiel, wie ein Snake-Spiel aussehen kann. Wie dies programmiert werden kann, folgt Schritt für Schritt in den folgenden Abschnitten.

Anwendung

Beispiel zum Snake-Spieleklassiker.

<!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>

var n = 16;

var T = matrix(n, n);

var x = 0;
var y = 0;
var size = 0;
var view = "";

function neuer_apfel() {
  do {
    var i = Math.floor(random(0,n));
    var j = Math.floor(random(0,n));
    if (T[i][j] == 0) T[i][j] = -2;
  } while (T[i][j] != -2);
};

function spielfeld_start() {
  x = Math.round(n/2);
  y = Math.round(n/2);
  size = 3;
  view = "";
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) T[i][j] = 0;
  for (var i = 0; i < n; i++) {
    T[0][i] = -1;
    T[n-1][i] = -1;
    T[i][0] = -1;
    T[i][n-1] = -1;
  }
  T[y][x] = size;
  neuer_apfel();
};

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

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() {
  // Bewegung simulieren
  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;
  }
  // Kollisionserkennung
  if ((T[y][x] == -1) || (T[y][x] > 0)) {
    view = "";
  }
  // Apfel gefuttert ja / nein
  if (T[y][x] == -2) {
    size = size + 1;
    T[y][x] = size;
    neuer_apfel();
  } else {
    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"});
  if (view == "N") {
    Canvas.circle(x+0.5, y+1, 0.2, {fill:"yellow"});
    Canvas.circle(x+0.35, y+0.6, 0.05, {fill:"black"});
    Canvas.circle(x+0.65, y+0.6, 0.05, {fill:"black"});
  }
  if (view == "S") {
    Canvas.circle(x+0.5, y, 0.2, {fill:"yellow"});
    Canvas.circle(x+0.35, y+0.4, 0.05, {fill:"black"});
    Canvas.circle(x+0.65, y+0.4, 0.05, {fill:"black"});
  }
  if (view == "O") {
    Canvas.circle(x+1, y+0.5, 0.2, {fill:"yellow"});
    Canvas.circle(x+0.6, y+0.35, 0.05, {fill:"black"});
    Canvas.circle(x+0.6, y+0.65, 0.05, {fill:"black"});
  }
  if (view == "W") {
    Canvas.circle(x, y+0.5, 0.2, {fill:"yellow"});
    Canvas.circle(x+0.4, y+0.35, 0.05, {fill:"black"});
    Canvas.circle(x+0.4, y+0.65, 0.05, {fill:"black"});
  }
  if (view == "") Canvas.text(0.5, -0.8, "Starte mit einer Pfeiltaste", {fill:"white", align:"left"});
  Canvas.text(n-0.5, -0.8, (size-3).toFixed(0) + " Punkte", {fill:"white", align:"right"});
};

function loop() {
  if (view != "") {
    schlange_bewegen();
    spielfeld_updaten();
  }
  spielfeld_zeichnen();
};

function on_key_down(k) {
  if (view == "") spielfeld_start();
  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