4 Stimmen

Zeichnen eines Gitters in Javascript (z. B. Game of Life)

Im Grunde genommen hatte ich diese Idee für eine Art Evolutionssimulator im Kopf, nicht ganz so wie Conways Game of Life, aber der eine Teil, in dem sie übereinstimmen, ist, dass sie beide auf einem quadratischen Raster basieren werden.

Nun, ich persönlich mag es, in HTML+Javascript+ für einfache Anwendungen zu arbeiten, da es eine schnelle UI-Erstellung ermöglicht, und wenn man nicht gerade etwas rechenintensives macht, dann ist JS in einem Browser eine anständige Plattform.

Das Problem, das ich im Moment zu lösen versuche, betrifft das Zeichnen und Aktualisieren des Gitters. Ich könnte etwas übersehen, aber es scheint, wie es gibt keine einfache UND rechnerisch leichte Möglichkeit, dies für ein 80x40-Gitter zu tun. Der einfache Weg wäre, ein div mit absoluter Position und eine bestimmte Hintergrundfarbe für jedes Quadrat, das nicht leer ist zu generieren. Allerdings kann das sehr langsam mit etwas mehr als 60-70 farbige Quadrate werden.

Ich bin definitiv bereit, zu einer anderen Sprache zu wechseln, wenn die Situation es erfordert, aber zuerst möchte ich nur wissen, dass ich nicht dummerweise eine einfache Möglichkeit verpasse, dies mit HTML+JS zu tun.

Die Antwort sollte einen der folgenden Punkte enthalten:

a) Eine vernünftige Möglichkeit, ein 80x40-Gitter zu zeichnen und zu aktualisieren (wobei die Quadrate die Farbe ändern und sich "bewegen") in HTML+JS

b) Eine andere Sprache, die dies einigermaßen schnell erledigen kann. Ich möchte vermeiden, dass ich ein paar Tage damit verbringen muss, DirectDraw oder etwas Ähnliches zu lernen.

0 Stimmen

Haben Sie versucht, eine Tabelle zu verwenden?

2voto

Lewis Punkte 5709

Warum nicht das Gitter als HTML-Tabelle erstellen? Das ist doch das, was Sie wollen?

Geben Sie jeder Zelle eine berechnete ID und erstellen Sie einige Javascript-Funktionen, um sie zu aktualisieren. Das sollte überhaupt kein Problem sein.

Sie könnten sich das neue Canvas-Tag in HTML 5 ansehen, aber nach dem, was Sie gesagt haben, glaube ich nicht, dass Sie es brauchen.

0 Stimmen

Ich habe die berechnete Tabelle noch nicht ausprobiert, aber ich dachte mir, dass die Verarbeitung von 80x40 <td></td> mehr Arbeit machen würde als die Verarbeitung der Divs nur für die farbigen Quadrate. Mein Browser wurde bei der Erstellung meines Testrasters mit nur der Hälfte der farbigen Quadrate langsamer, daher weiß ich nicht, ob er so viele Tabellenzellen verarbeiten kann.

0 Stimmen

Macht nichts. Ich habe versucht, eine Tabelle zu verwenden, und aus irgendeinem Grund hat es schneller funktioniert, obwohl mehr HTML generiert wird. Seltsam.

1voto

Jordan Running Punkte 96893

<canvas> scheint der richtige Weg dafür zu sein. Eine Bibliothek wie Raphael wird Ihnen helfen, plattformübergreifende Probleme zu vermeiden. Eine weitere Option ist Verarbeitung.js aber es funktioniert nicht im IE.

0voto

Aaron Digulla Punkte 308693

Bei einem kleinen Raster (< 100x100) verwenden Sie eine Tabelle und geben jeder Zelle eine ID für einen schnellen Zugriff.

Für größere Raster sollten Sie ein Canvas-Objekt verwenden oder ein Java- oder Flash-Applet einbetten.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X