Grid Garden-Anleitung

Grid Garden: Steuerung, Strategietipps und Antworten mit Links zum Spiel und zur ausführlichen Anleitung.

Grid Garden spielen

Karottenbewässerung mit dem CSS-Gitter

Gib im Editor CSS ein, um das Wasser zu den Karotten zu leiten, die in jedem Level angezeigt werden.

Steuerung und vollständige Spielanleitung

Gitterlinien stellen eher Grenzen als Zellen dar.

Eine Rasterlinie markiert die Grenze zwischen Spuren, nicht die Mitte einer Gartenzelle.

Steuerung und vollständige Spielanleitung

Zählt Gitterlinien statt belegter Zellen

Lesen Sie das Bewässerungsziel der Ebene und identifizieren Sie dann die Linien, die den vorgesehenen Bereich begrenzen. Die Rasterplatzierung wird mit Grenzen und Spuren beschrieben; Eine Zeilennummer ist nicht einfach die Nummer einer farbigen Zelle. Zeigen Sie vor der Eingabe von CSS auf die gewünschten Start- und Endgrenzen. Dieser kleine Unterschied macht es einfacher, den Bereich vorherzusagen, den eine Regel abdecken wird, als ihn erst zu entdecken, nachdem sich das Wasser bewegt hat.

Wenn eine Aufgabe eine Spanne verwendet, überlegen Sie, wie viele Spuren der Bereich abdecken soll. Übersetzen Sie das nicht direkt in den Pixelabstand und verwenden Sie keine Flexbox-Ausrichtungsregel wieder, nur weil beide Spiele CSS beinhalten. Geben Sie eine Änderung in den Editor ein, beobachten Sie die bewässerte Fläche und vergleichen Sie sie mit den Karotten oder anderen durch die Ebene vorgegebenen Zielen. Die aktuelle Aufgabe entscheidet darüber, was als Erfolg gilt; Eine optisch große Fläche ist nicht automatisch die angestrebte Lösung.

Verwenden Sie die Form des Ergebnisses, um die Regel zu diagnostizieren

Wenn die bewässerte Region an der falschen Stelle beginnt, überprüfen Sie die gewählte Startgrenze. Wenn es richtig startet, aber zu früh oder zu spät endet, überprüfen Sie das Ende oder die Spanne. Wenn es sich in die falsche Richtung ändert, prüfen Sie, welche Zeilen- oder Spalteneigenschaft Sie verwendet haben. Durch die Benennung des geometrischen Fehlers erhalten Sie eine präzise nächste Bearbeitung und vermeiden das gleichzeitige Ersetzen mehrerer korrekter Teile der Regel.

Erklären Sie nach einem erfolgreichen Versuch, welche Zeilen das Ziel umschlossen und wie die Regel sie ausgewählt hat. Diese Erklärung lässt sich besser übertragen als eine nicht zusammenhängende Antwortzeichenfolge, da spätere Ebenen ein anderes Raster verwenden oder Einschränkungen kombinieren können. Dieses Zentrum unterstützt den eigentlichen interaktiven CSS Garten und seine Level-Anweisungen. Es wird kein pixelbasiertes Layout-Tutorial, keine externe Zertifizierung oder ein vollständiger Antwortbogen versprochen, der anhand jeder Version getestet wird. Verwenden Sie die Wiedergabeseite für die Editor-Steuerelemente und kehren Sie dann hierher zurück, wenn Sie einen Positionierungsfehler gezielt überprüfen möchten.

Wenn beispielsweise Wasser eine Spur zu viel bedeckt, markieren Sie die gewünschte Endgrenze und vergleichen Sie sie mit dem von Ihnen eingegebenen Wert oder der Spanne. Behalten Sie den korrekten Anfang bei, während Sie das Ende überarbeiten. Wenn das Ergebnis in eine andere Zeile verschoben wird, überprüfen Sie die Zeilenregel getrennt von der Spaltenregel. Wenn das Ziel richtig abgedeckt ist, beschreiben Sie die Grenzen und Spuren in Worten. Die Übung besteht darin, die Platzierung von CSS mit dem sichtbaren Raster zu verbinden, was bei einer neuen Anordnung nützlich ist, bei der die vorherige Antwortzeichenfolge nicht mehr den vorgesehenen Bereich auswählt.

Grid Garden Tipps und Strategie

Markiere einen Tipp für deine nächste Runde. Diese Liste verändert das Spiel nicht und speichert keinen Spielfortschritt.

Grid Garden – Fragen und Antworten

Welches Thema wird im Kurs Grid Garden behandelt?

Es bietet interaktives Üben mit dem CSS-Gitter durch Gartenlayout-Puzzles.

Steuere ich eine sich bewegende Figur?

Nein. Die wichtigste Interaktion besteht in der Eingabe von CSS, wodurch die Gitterplatzierung geändert wird.

Was ist die ursprüngliche Quelle?

Thomas Parks Grid Garden stellt den unter der MIT-Lizenz stehenden Quellcode und CC BY 3.0 das in dieser rezensierten Ausgabe verwendete Artwork bereit.

Decken Startlinie 2 und Endlinie 4 vier Zellen ab?

Nein. grid-column-start: 2 und grid-column-end: 4 wählen den Raum zwischen Linie 2 und 4, also zwei Spaltenspuren. Die Endlinie ist eine Grenze und keine zusätzliche bewässerte Zelle. Zähle die Zwischenräume oder verwende span 2 und prüfe die Markierung, bevor du auch die Zeilenposition änderst.

Steuerung und vollständige Spielanleitung

Steuerung und vollständige Spielanleitung

Grid Garden spielen