Das Spiel des Lebens

Es ist nicht wirklich ein "Spiel" – sondern eher eine Reihe von Regeln des Mathematikers John Horton Conway. Stellen Sie sich ein Gitter von Zellen vor, wie eine Tabelle oder ein <table>. Jede Zelle ist entweder lebendig oder tot. "Runden" vergehen nacheinander. In jeder Runde gibt es Regeln, ob eine lebende Zelle weiterleben oder sterben soll und ob eine tote Zelle tot bleiben oder lebendig werden soll.

Die Regeln

Es ist irgendwie dazu gedacht, eine reale Umgebung zu replizieren. Zellen können entweder an Unterbevölkerung oder Überbevölkerung sterben und nur unter perfekten Bedingungen leben. Die Regeln sind ziemlich einfach

1. Lebende Zelle – Weniger als 2 lebende Nachbarn – stirbt (Unterbevölkerung).
2. Lebende Zelle – 2 oder 3 Nachbarn – lebt weiter (perfekte Situation).
3. Lebende Zelle – Mehr als 3 lebende Nachbarn – stirbt (Überbevölkerung).
4. Tote Zelle – Genau drei lebende Nachbarn – wird lebendig (Fortpflanzung).

Warum redest du darüber?

Ich empfinde eine starke Nostalgie dafür. Eine visuelle Version des Spiels des Lebens war das erste Programmierprojekt, das ich in der High School gemacht habe. Oder wenn nicht das erste, dann das erste, bei dem ich einen "Aha!"-Moment hatte und erkannte, dass Programmieren und Design super Spaß machen und interessant sein können.

Gib das Problem jedem Programmierer und er wird es wahrscheinlich leicht anders lösen.

• In welcher Sprache soll es geschrieben werden?
• Wie gestalten wir die Architektur sauber?
• Wie können wir es rechnerisch schnell machen?
• Wie groß können wir es machen, bevor es langsamer wird?
• Wie speichern wir die Daten und Zustände am besten?
• Wie werden Kanten behandelt?

Gib das Problem jedem Designer und die Ergebnisse werden anders aussehen.

• Welche Farben machen Sinn?
• Sollen wir für Zustände außer lebendig und tot verschiedene Farben haben?
• Wie groß sollen die Zellen sein, um interessant zu sein?
• Wie schnell sollen die Runden sein, um interessant, aber nicht überwältigend zu sein?
• Kann man damit interagieren?
• Kann man in der Zeit vorwärts *und rückwärts* gehen?
• Wie schaltet man Zellen ein und aus? Klicken? Ziehen? Randomisierung?
• Was sind die interessantesten Formen, die man machen kann? Können wir diese zeigen?

Ich bringe das auch zur Sprache, weil ich mich erinnere, vor ein paar Jahren versucht zu haben, eine Demo zu machen, die so schrecklich war, dass ich neidisch auf all die coolen bin. Ich habe im Grunde jQuery verwendet, um den DOM nach Nachbarn jeder einzelnen Zelle abzufragen, und es war so ineffizient, dass ich wahrscheinlich mit einer Antenne geschlagen worden wäre.

Beispiele

Meine erste Version war in Turbo Pascal auf einem alten Apple. Es bereitet mir große Freude zu wissen, dass diese kleine visuelle mathematische Übung heute lebendig und gut ist und die Leute ein von mir entwickeltes Werkzeug verwenden, um Versionen zu erstellen. Selbst bei Demos, die die gleiche Technologie verwenden, kann der Ansatz anders sein! Ich habe auch eine Sammlung.

JavaScript auf Canvas

Mit einem Hauch von jQuery

Siehe den Pen Conway’s Game of Life von John H Moore (@john-h-moore) auf CodePen.

Ohne

Siehe den Pen Game of Life von Qbit (@Qbit42) auf CodePen.

Siehe den Pen Game of Life on Canvas von Dennis Kerzig (@wottpal) auf CodePen.

JavaScript auf einer <table>

Siehe den Pen payKn von Alan R. Soares (@alanrsoares) auf CodePen.

Backbone.js

Siehe den Pen Conway’s Game of Life in Backbone von Eric Miller (@SimpleAsCouldBe) auf CodePen.

Verwendung von CSS box-shadow zum Zeichnen von Zellen

Siehe den Pen box-shadow game of life von Joris van de Donk (@jorisvddonk) auf CodePen.

In CoffeeScript

Siehe den Pen mctCv von Hanganu Petru-Alin (@Lynku) auf CodePen.

In D3.js

Schnell!

Siehe den Pen Game of Life – D3 von Reed Spool (@reedspool) auf CodePen.

---

Dies sind nur Beispiele für das Frontend, aber man findet leicht Beispiele in jeder Sprache. Besuchen Sie Golly für native App-Versionen und die Wikipedia-Seite für weitere Informationen. Eine besonders interessante Sache am Spiel des Lebens ist, dass alle möglichen seltsamen Strukturen möglich sind, die auf seltsame Weise "Leben erschaffen" oder erhalten.

Eine Sache, die ich noch nie gesehen habe, ist eine reine CSS-Version. Ist das überhaupt möglich? Es wäre wahnsinnig kompliziert mit seltsamen Positionierungen und komplexen Selektoren. Aber man sagt, Sass sei "Turing-vollständig", also ist es möglich, oder? Oder gibt es andere Einschränkungen?

Ich wäre an weiteren seltsamen Frontend-Beispielen des Spiels des Lebens interessiert. Oder an Geschichten, die Sie darüber aus Ihrer Vergangenheit haben =).