taralino

Snake

Snake ist ein bekanntes Computerspiel, bei dem sich eine Schlange auf einem Spielfeld bewegt und Äpfel futtert: Je mehr Äpfel gefuttert werden, desto länger wird die Schlage. Die Herausforderung besteht darin, dass sich die Schlage nicht in den eigenen Schwanz beißt.

Beispiel

Grundlegendes Spielfeld zum Snake-Computerspielklassiker. Hinweis: Die Schlange kann über die Pfeiltasten gesteuert werden. Dabei kann es sein, dass du einmal auf das Spielfeld klicken musst, damit die Tastendrücke berücksichtigt werden.

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

// Spielfeld:
var n = 24;
var T = [];

// Schlange:
var snake_size = 3;
var snake_x = 6;
var snake_y = 12;
var snake_direction = "right";


function setup() {
  // Spielfeld initialisieren:
  for (var i = 0; i < n; i++) {
    T.push([]);
    for (var j = 0; j < n; j++) T[i].push(0);
  };
  T[snake_y][snake_x] = snake_size;
  // Zufaellige Aepfel definieren:
  for (var k = 0; k < 6; k++) {
    var x = random(0, n-1, {type:"integer"});
    var y = random(0, n-1, {type:"integer"});
    T[y][x] = -1;
  };
  // Initialisierungen:
  Canvas.init([0,n], [0,n], {width:400, background:"black"});
  Animation.init({fps:6});
};

function draw() {
  // Spielfeld zeichnen:
  Canvas.clear();
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) {
    var color = "none";
    if (T[i][j] == -1) color = "red";
    if (T[i][j] > 0) color = (T[i][j] < snake_size ? "green" : "yellow");
    if (color != "none") Canvas.circle(j+0.5, i+0.5, 0.5, {fill:color});
  };
};

function next_step() {
  // Schlange bewegen:
  if (snake_direction == "right") snake_x = (snake_x + 1) % n;
  if (snake_direction == "left") snake_x = (snake_x - 1 + n) % n;
  if (snake_direction == "up") snake_y = (snake_y + 1) % n;
  if (snake_direction == "down") snake_y = (snake_y - 1 + n) % n;
  // Spielfeld aktualisieren:
  for (var i = 0; i < n; i++) for (var j = 0; j < n; j++) if (T[i][j] > 0) T[i][j]--;
  if (T[snake_y][snake_x] == -1) snake_size = snake_size + 2;
  T[snake_y][snake_x] = snake_size;
};

function loop() {
  next_step();
  draw();
};

function on_key_down(k) {
  if (k == "UP") snake_direction = "up";
  if (k == "DOWN") snake_direction = "down";
  if (k == "LEFT") snake_direction = "left";
  if (k == "RIGHT") snake_direction = "right";
};

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode vertraut. Anschließend kannst du folgende Erweiterungen vornehmen:

Baue ein, dass das Spiel beendet wird, wenn sich die Schlange in ihren eigenen Schwanz beißt (Game Over).
Beginne mit einem Apfel und generiere jeweils einen neuen Apfel, sobald ein Apfel gefuttert wird.
Erhöhe den Schwierigkeitsgrad, indem auch Mauern eingebaut werden.

Als Zusatzaufgabe kannst du ein Zwei-Spieler-Modus entwickeln: Setze eine zweite Schlange ein, die sich über andere Tasten steuern lässt. Nun können zwei Spieler gegeneinander antreten.