JavaScript-Implementierung des Spiels des Lebens

index.html // Hauptseite, System initialisieren, Systembetrieb steuern usw. canvas.js // Rendering-Ebene, Canvas erstellen, manuell zeichnen, Canvas-Aktualisierungsmethode usw. LifeGame.js // Logikebene, System erstellen und ausführen, Systembetriebslogik, Datenaktualisierung usw.

  const konfiguration = {
    Breite: 100, // horizontale Zellenanzahl Höhe: 100, // vertikale Zellenanzahl Größe: 4 + 1, // Zellengröße, Zellenabstand 1px
    Geschwindigkeit: 200, // Zelliterationsgeschwindigkeit alive: „#000000“, // Zellüberlebensfarbe dead: „#FFFFFF“, // Weltfarbe (Zelltodfarbe)
    Daten: neue Map(), // Systemoperationsdaten ausführen, // Canvas-Methode aktualisieren};

  // LifeGame.js

  // Eindimensionale lineare Darstellung eines zweidimensionalen Koordinatensystems const MakeKey = (x = 0, y = 0) => y * 10000 + x;

  Funktion refreshWorld() {
    const next = new Map(); // Systembetriebsdaten aktualisieren // Alle Elemente des zweidimensionalen Koordinatensystems iterieren IterateCells(config, (x, y) => {
      const index = MakeKey(x, y); // Berechne den Schlüssel, der der Koordinate entspricht
      const current = config.data.get(index); // Aktueller Zellzustand // Berechnen Sie die Anzahl der überlebenden Zellen um die aktuelle Zelle herum switch (borderSum(x, y)) {
        Fall 2:
          // Wenn 2 aktive Zellen vorhanden sind, bleibt die Zelle wie sie ist.
          nächster.set(index, aktuell);
          brechen;
        Fall 3:
          // Wenn sich 3 überlebende Zellen in der Umgebung befinden, ist die Zelle am Leben.
          nächster.set(index, true);
          !current && config.execute(x, y, true); // Statusänderungen, Canvas-Aktualisierung break;
        Standard:
          // Wenn die Anzahl der lebenden Zellen in der Umgebung weniger als 2 beträgt, ist die Zelle tot. (Das Leben ist knapp)
          // Wenn mehr als 3 lebende Zellen vorhanden sind, ist die Zelle tot. (Zu viele Leben)
          nächster.set(index, false);
          current && config.execute(x, y, false); // Statusänderungen, Canvas-Break aktualisieren;
      }
      gibt true zurück;
    });
    als nächstes zurückkehren;
  }

  // LifeGame.js
  
  // Starte die Systemfunktion startWorld() {
    stopWorld(); // Stoppe die zuvor gestartete Schleife // Starte das System entsprechend der Iterationsgeschwindigkeit und aktualisiere das System in einer Schleife interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500);
    starting = true; // Startflag aktivieren return true;
  }

  // Das System herunterfahren und das aktuelle System weiterlaufen lassen data function stopWorld() {
    clearInterval(interval); // Schleife stoppen starting = false; // Start-Flag deaktivieren return true;
  }

  // LifeGame.js
  
  Funktion borderSum(x = 0, y = 0) {
    const { Breite, Höhe, Daten } = Konfiguration;
    sei Summe = 0;
    für (lass j = y - 1; j <= y + 1; j++) {
      für (sei i = x - 1; i <= x + 1; i++) {
        // Grenzwertbeurteilung wenn (i < 0 || j < 0 || i >= Breite || j >= Höhe || (i === x && j === y)) {
          weitermachen;
        }
        wenn (Daten.get(MakeKey(i, j))) {
          sum++; // Die Anzahl der überlebenden Zellen akkumulieren}
      }
    }
    Rücklaufsumme;
  }

/**
 * Iteriere alle Elemente des 2D-Koordinatensystems und führe die Callback-Funktion aus* @param config: { width: number, height: number }
 * @param Rückruf: (x: Zahl, y: Zahl) => Boolesch
 */
const IterateCells = ({ Breite, Höhe }, Rückruf) => {
  für (lass y = 0; y < Höhe; y++) {
    für (lass x = 0; x < Breite; x++) {
      wenn (Rückruf && !Rückruf(x, y)) {
        gibt false zurück;
      }
    }
  }
  gibt true zurück;
};

  // Leinwand.js
  
  Funktion ausführen(x, y, Leben) {
    const { Größe, lebendig, tot } = Konfiguration;
    // Zellenfarbe festlegen context.fillStyle = Leben? lebendig: tot;
    //Zeichnen Sie Zellen mit einem Abstand von 1px zwischen den Zellen
    context.fillRect(x * Größe + 1, y * Größe + 1, Größe - 1, Größe - 1);

    gibt true zurück;
  }