JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Girl's Day 2021</title>
  </head>
  <body>
    <noscript>
      JavaScript muss aktiviert sein.
    </noscript>
    <canvas id="canvas"></canvas>
    <div id="info">
      Gr&ouml;&szlig;e:
      <span id="info_n"></span>
      <br>
      Verz&ouml;gerung:
      <span id="info_delay"></span>ms
      <br>
      Regeln:
      <br>
      <canvas id="info_rules"></canvas>
      <br>
      <button id="start_button">Start</button>
    </div>
  </body>
</html>

CSS

/*
Diese Datei enthaelt einige Regeln fuer das Layout der Seite.
Die verwendete Sprache heisst CSS.

In dieser Datei muessen wir nichts veraendern.
*/
body {
  margin: 0px;
  overflow: hidden;
}

#info {
  position: fixed;
  padding: 5px;
  right: 20px;
  bottom: 20px;
  border: 1px solid black;
}

#info_rules {
  margin: 5px;
}

JavaScript

// Was wir hier sehen der Quelltext, eine Sprache in der wir Menschen einem
// Computer sogenannte Befehle geben koennen.
//
// Alles, was wie diese Zeilen hinter zwei Schraegstrichen steht, sind
// Kommentare. Der Computer ignoriert das, aber wir als Entwicklerinnen koennen
// uns damit Notizen in den Quelltext schreiben, um anderen das Verstaendnis zu
// erleichtern.


// In 'colors' werden die Farben gespeichert.
//
// Als Farben koennen die "meisten" englischen Farbnamen verwendet werden (und
// noch viele mehr).
// Eine vollstaendige Liste findet sich zum Beispiel hier:
// https://developer.mozilla.org/de/docs/Web/CSS/Farben
//
// Um auf die i-te Farbe in der Liste zuzugreifen, schreiben wir: colors[i]
// Achtung: Wir fangen immer bei 0 an zu zaehlen, colors[0] ist also die erste
// Farbe in der Liste, colors[1] die zweite, ...
const colors = ["darkred","orange","green","cornflowerblue"];

// Berechnet die Farbe eines Feldes aus den Farben der beiden oberen Felder.
// Die Eingabe sind die Positionen der beiden Farben darueber in der Farbliste
// 'colors'.
// Das Ergebnis ist die Position der neuen Farbe in der Farbliste 'colors'.
function compute_color(left, right) {
  const rules = [
    [2, 0, 1, 2],
    [1, 3, 0, 2],
    [3, 3, 3, 0],
    [1, 0, 1, 2]
  ];
  //const rules = [
  //  [2, 0, 1, 2],
  //  [1, 3, 0, 2],
  //  [3, 3, 3, 0],
  //  [1, 0, 1, 2]
  //];

  // Mit der Zeile unten greifen in der Tabelle oben auf Zeile "left" und
  // Spalte "right" zu.
  return rules[left][right];
}

// Diese Funktion gibt uns eine zufaellige Farbe aus der Farbliste.
// Auch hier wird nicht die Farbe selbst zurueckgegeben, sondern nur die
// Position in der Liste colors.
function random_color() {
  return Math.floor(Math.random() * colors.length);
}

window.addEventListener("load", () => {
  // 'size' speichert die Groesse des Spielfeldes, genauer die Anzahl der Felder
  // in der ersten Reihe.
  const size = 14;

  // Die Anzahl der Millisekunden, die es dauert, um...