taralino

Das Spielfeld

Um das Game of Life herzuleiten, definieren wir zunächst ein quadratisches Spielfeld, welche aus Zeilen und Spalten besteht (zweidimensionales Datenfeld). Dabei ist eine (positive und ganze) Zahl, etwa .

Die einzelnen der insgesamt Positionen auf dem Spielfeld (Einträge im Datenfeld) werden auch Zellen genannt. Jede Zelle kann einen der folgenden Zustände annehmen:

Die Zelle ist leer: Derartige Zellen werden durch den Zahlenwert 0 definiert sowie in Hellgrau dargestellt.
Die Zelle ist mit einem Individuum (einem Tier oder Wesen) belegt: Derartige Zellen werden durch den Zahlenwert 1 definiert sowie in Blau dargestellt.

Die folgende Abbildung zeigt ein Spielfeld bestehend aus Zeilen und Spalten, einmal definiert über die Zahlenwerte und einmal als grafische Darstellung:

Auf dem dargestellten Spielfeld befinden sich aktuell genau fünf Individuen.

Codebeispiel

Der folgende Quellcode zeigt, wie ein Spielfeld (als zweidimensionales Datenfeld) definiert und anschließend dargestellt werden kann. Verwendet wird dabei das Grid-Paket:

Zur Referenz

Quellcode

Ein erster Schritt zur anschließenden Simulation: Es wird ein Spielfeld samt zufälliger Startkonfiguration erzeugt und dargestellt.

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

/*******************************
  Kennzahlen zur Simulation
*******************************/

// Spielfeld (Anzahl der Zeilen und Spalten):
var s = 60;

// Anteil der (erwarteten) Individuen in Prozent:
var a = 12;


/*******************************
  Globale Variablen
*******************************/

// Leeres Spielfeld (zweidimensionales Datenfeld):
var M = [];
for (var i = 0; i < s; i++) M.push([]);
for (var i = 0; i < s; i++) for (var j = 0; j < s; j++) M[i].push(0);


/*******************************
  grid()
*******************************/

// Der Befehl zeichnet das Spielfeld.

function grid() {
  Grid.clear();
  for (var i = 0; i < s; i++) for (var j = 0; j < s; j++) {
    if (M[i][j] == 1) Grid.pixel(j, i, "blue");
  };
  Grid.draw();
};


/*******************************
  setup()
*******************************/

// Der Befehl setup() wird jeweils beim Start einmalig ausgefuehrt.

function setup() {
  // Erzeugung einer zufaelligen Startkonfiguration
  for (var i = 0; i < s; i++) for (var j = 0; j < s; j++) {
    if (random(0,100) < a) M[i][j] = 1;
  };

  // Gitternetz zur Darstellung des Spielfeldes initialisieren
  var z = Math.max(1, Math.floor(320/s));
  Grid.init(s, s, {background:"lightgrey", style:"canvas", zoom:z});

  // Darstellung des Spielfeldes
  grid();
};


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

Vorschau Download Kopie speichern

Codingaufgabe

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

Experimentiere mit den Farben. Zeichne beispielsweise leere Zellen in Schwarz und belegte Zellen (d.h. die Individuen) in Grün.
Verändere die Größe des Spielfeldes. Passe dabei ggf. auch die Option zoom bei der Initialisierung des Gitternetzes an.
Verändere den Anteil der (erwarteten) Individuen in Prozent.