taralino

Projektaufgabe

Nun liegt es an dir, ein eigenes kleines Snake-Spiel zu entwickelt: Deiner Kreativität sind keine Grenzen gesetzt. Orientiere dich am Quellcode aus dem Abschnitt zuvor und nimm beliebige Anpassungen vor. Zum Beispiel:

Verändere die grafische Darstellung des Spiels
Wähle unterschiedliche Spielfeldgrößen sowie unterschiedliche Wände / Barrieren
Experimentiere mit der Geschwindigkeit (Spielschritte pro Sekunde)

Als größere Herausforderung kann auch eine zweite Schlange definiert werden (samt Steuerung z.B. über die Tasten A, S, D und W), sodass zwei Spieler gegeneinander antreten können.

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