Zeichnen ein Gitter in Javascript (Spiel des Lebens, zum Beispiel)

Question

Im Grunde hatte ich diese Idee in meinem Kopf für eine Art Evolution Simulator, nicht genau wie Conways Spiel des Lebens, sondern der Teil, in dem sie übereinstimmen, ist, dass sie sowohl auf einem quadratischen Raster basieren.

Nun, ich persönlich mag für einfache Anwendungen in HTML + Javascript + arbeiten, da es schnell UI Schöpfung erlaubt, und wenn Sie nicht etwas rechen schwer tun, dann JS in einem Browser ist eine anständige Plattform.

Das Problem Ich versuche jetzt zu lösen, beinhaltet Zeichnung und die Aktualisierung des Rasters. Ich könnte etwas fehlen, aber es scheint, als gäbe es keine einfache und rechen Licht Art und Weise ist dieses Gitter für eine 80x40 zu tun. Der einfache Weg wäre einen div mit absoluter Position zu erzeugen und zu einer bestimmten Hintergrundfarbe für jeden Platz, der nicht leer ist. Dies kann jedoch sehr langsam werden, mit etwas mehr als 60-70 farbigen Quadrate.

Ich bin auf jeden Fall bereit, in eine andere Sprache zu wechseln, wenn die Situation es erfordert, aber zuerst möchte ich weiß nur, ich bin nicht dumm auf einfache Art und Weise verpassten diese mit HTML + JS zu tun.

Antwort sollte enthalten entweder eine der folgenden Möglichkeiten:

a) Eine vernünftige Art und Weise ein 80x40-Gitter (wo die Quadrate Farbe zu zeichnen und zu aktualisieren, ändern und "move") in HTML + JS

b) Eine andere Sprache, die diese recht schnell tun können. Ich würde es vorziehen, um zu vermeiden, ein paar Tage zu verbringen DirectDraw oder etwas Derartiges zu lernen.

Answer 1

Warum das Raster als HTML-Tabelle nicht bauen? Schließlich ist das, was Sie wollen?

Geben Sie jede Zelle eine berechnete ID und einige JavaScript-Funktionen erstellen, sie zu aktualisieren. Shoudlnt überhaupt ein Problem sein.

Sie auf der neuen Leinwand-Tag in HTML 5 aussehen könnte, aber von dem, was Sie gesagt haben ich glaube nicht, Sie es brauchen.

Answer 2

<canvas> scheint der richtige Weg, dies zu tun. Eine Bibliothek wie Raphael werden Sie plattformübergreifende Probleme vermeiden helfen. Eine weitere Optionen ist Processing.js , aber es funktioniert nicht in IE.

Answer 3

Für ein kleines Gitter (<100x100), eine Tabelle verwenden und geben Sie jeder Zelle eine ID für den schnellen Zugriff.

Für größere Netze, sollten Sie eine Leinwand Objekt oder Einbetten eines Java oder Flash-Applet betrachten verwenden.