taralino

Zeichenfläche

Der nächste Schritt zum eigenen Spiel ist häufig der schönste, nämlich die grafische Darstellung. Diese halten wir zunächst sehr einfach und verwenden im Wesentlichen das Canvas-Paket:

Zur Referenz

Da wir es nachfolgend benötigen, schreiben wir die Anweisungen zum Zeichnen des Spielfeldes bereits innerhalb eines neuen Befehls.

Quellcode

Beispiel zur grafischen Darstellung des Spielfeldes.

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

// Waende / Rand definieren
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;
}

// Apfel definieren
T[2][4] = -2;

// Element einer Schlange definieren
T[5][6] = 3;


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.init([0,n], [0,n], {width:360, background:"black"});
spielfeld_zeichnen();

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

Vorschau Download Kopie speichern

Codingaufgabe

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

Experimentiere mit den Farben
Setze weitere Äpfel und Wände
Passe die Spielfeldgröße an
Vergrößere die Schlange