photo credit: TheCulinaryGeek

Motivation

Meine momentane Lieblingssprache ist … Javascript. Ja, Ihr habt richtig gehört. Javascript ist eine sehr geniale Sprache, wenn man sich ein wenig mehr damit beschäftigt. Hierbei sollte man aber davon ausgehen, dass IE 6 und Javascript ein absolut grauenhaftes Team bilden. Bitte programmiert NICHT mehr für den IE 6 oder darunter.

Wenn man sich aber mit einem halbwegs neuen Javascript kompatiblen Browser (mein Liebling ist ja Firefox ) arrangiert hat, macht Javascript richtig Spaß. P.S.: Firebug + Firequery nicht vergessen!

Genau aus diesem Grund hab ich mir ein kleines Wochenend Projekt geschnappt und angeschaut, was passiert, wenn man PHP mal PHP sein lässt und Javascript in der Tiefe ansieht.

Conway’s Game of Life

Jeder Nerd und Informatik Student sollte mittlerweile Conway’s Game of Life kennen. Das Spielprinzip ist ein Koordinaten System aus Zellen, welche rundenbasiert nach gewissen Regeln geboren werden, leben oder sterben. Nähere Informationen findet ihr hier.

Da ich schon immer von zellulären Automaten fasziniert war, sollte dies nun also mein erstes Javascript Projekt werden.

Der 1. Versuch

Los gings zuerst mit viel jQuery und einer Masse an div’s.  Die Grundidee hierbei ist ein Raster aufzubauen, welches aus Zeilen (rows) und Spalten (columns) besteht. Um dies in HTML abzubilden konnte ich mich zwischen div’s oder einer table entscheiden. Da ich kein besonders großer Fan von tables bin, nahm ich Ersteres.

Der Aufbau war dann auch relativ schnell geschrieben. Die Zeilen beinhielten alle Zellen der Reihe. Dadurch konnte jede einzelne Zelle angesteuert werden.

Um darzustellen, ob eine Zelle tot oder lebendig war, bekam die Zelle wenn sie lebte, eine Class “live”.

Der Code war dann nach einigem hin und her irgendwann fertig, konnte mich aber nicht wirklich zufrieden stellen. Mein Problem war zum einen die Unflexibilität des Codes auf Änderungen zu reagieren und zum Andere die sehr hohe Rechnerlast die durch den etwas umständlich geschriebenen Code entstand.

An sich funktionierte der Code und konnte bei kleinen Spielfeldern auch das zeigen was er konnte. Wurde jedoch die Fläche auf mehr als 25×25 Zellen erweitert, ging der Rechner erstmal gewaltig in die Knie. Das war natürlich nicht Sinn der Sache.

Also, zurück auf Los und keine 4000€ einziehen.

Der 2. Versuch

Momentan wird ja sehr viel über HTML5 und seine Web-revolutionierende Technik geredet. Da ich mir das ganze mal anschauen wollte, habe ich mir das canvas-Element ausgesucht und einfach mal losgelegt. Und ich muss sagen, ich bin begeistert!

Wer mehr über das Canvas Element erfahren möchte, kann sich hier austoben.

Zurück zu meinem 2. Versuch: Ich übernahm die wichtigsten Dinge aus dem ersten Versuch (ein Grid-Array, ein Array mit allen lebenden Zellen und ein Grid Objekt, das alle benötigten Funktion enthielt, Zellen sind eigene Objekte, eine Zelle hat eine Neighbours Funktion die alle Nachbarn zurückliefert) und programmierte was das Zeug hielt.

Diesmal wurden die Divs durch “virtuelle” Zellen ersetzt, die ich auf dem Canvas Element zeichnete. Eine Zelle enthält hierbei die X und Y Koordinaten und die Höhe und Breite der Zelle. Dadurch kann ich durch interne Funktionen den Status der Zelle verändern ohne jedes mal berechnen zu müssen, wo sich die Zelle befindet und was für Nachbarn diese hat.

Der schwierigste Teil war nun die Regeln von Conway auf das Koordinatensystem und alle Zellen zu übertragen. Nach einigem Try-and-Error war ich dann erfolgreich und konnte sogar noch einige Verbesserungen an meinem Code vollführen.

Wer sich näher mit der Funktionsweise auseinandersetzen möchte, kann gern den Source Code des Projekts runterladen und sich diesen anschauen. Kritik ist immer willkommen!

Fazit

Das Projekt hat mir sehr viel Spaß gemacht und es war eine Herausforderung etwas umzusetzen, das zuerst nur schwer vorstellbar war. Das machte das ganze Projekt so interessant.

Mal sehen was ich mir als nächstes vornehme

Quellcode

Anbei findet ihr den Quellcode für das Spiel in Javascript:

Conway’s Game of Life in HTML5 and jQuery