Das ist ziemlich einfach, obwohl es eine gute Verwendung von DOM-Traversal erfordert.

Wenn Sie auf eine Linie klicken, gibt es immer nur höchstens zwei mögliche Felder, die ausgefüllt werden können. Für horizontale Linien sind dies die oberen und unteren Felder, die springende Reihen erfordern. Für vertikale Linien, links und rechts.

Für jedes dieser Felder müssen vier Zeilen bestätigt werden. Auch hier müssen wir Zeilen für die Zeilen über und unter springen.

Ich habe das Spiel tatsächlich größtenteils neu erstellt, weil es ein lustiger ist und hier gibt es viel zu lernen. Lasst uns also die wichtigen Teile durchgehen. Wir werden in diesem Code eine schlechte Form vermeiden, wie Inline-Handler und Einstellungsstile direkt auf Elementen, und wir lassen CSS-Klassen als Steuerelemente fungieren, obwohl eine vollständigere Option data-attributes wäre.

Beginnen wir mit zwei wesentlichen Hilfsfunktionen.

Die erste wird verwendet, um array-ähnliche Objekte in tatsächliche Arrays zu verwandeln, so dass wir Array.prototype Methoden für sie verwenden können. Wir verwenden dies hauptsächlich für nodeList -Objekte.

Die zweite verwendet die erste und gibt uns die Position eines Elements in parentNode .

Als nächstes unsere Event-Handler. Sie sind einander ziemlich ähnlich. Wenn wir auf eine Zeile klicken, füllen wir diese Zeile mit einer anderen Hilfsfunktion, fill , aus, die der Zeile namens .filled eine neue Klasse hinzufügt. Wir überprüfen dann die Kästchen, die gefüllt werden können. Für horizontale Linien sind das die vertikalen Boxen, oben und unten; für vertikale Linien sind das die horizontalen Boxen, links und rechts. Wir entfernen den Ereignis-Listener, so dass Zeilen nur einmal angeklickt werden können.

Sehen wir uns nun checkHorizontalBoxes und checkVerticalBoxes an. Die horizontalen Kästchen befinden sich in derselben Zeile, indiziert +/-1 von unserer Startlinie. Die vertikalen Felder sind in Zeilen indexiert +/-1 aus unserer Startzeile und teilen sich den gleichen Index wie die Zeile. Wir haben einige if -Anweisungen, weil manchmal eine mögliche Zeile oder Box außerhalb der Grenzen liegt.

Beide Funktionen rufen checkSurroundingLines auf den potentiellen Feldern auf. Diese Funktion ruft zwei weitere Funktionen auf - checkVerticalLines und checkHorizontalLines . Beginnen Sie, das Muster zu sehen? isFilled ist ähnlich wie fill , es ist eine Hilfsfunktion, die wir definiert haben, um zu testen, ob eine Zeile die Klasse .filled hat.

Wenn beide die true zurückgeben, füllen wir unsere Box aus.

Das ist ein grundlegender Ablauf der Logik für diese Art von DOM-Traversal. Es gibt ein paar zusätzliche Sachen, die mit dem eigentlichen Code laufen, also lies alle Teile.

Hier ist das Arbeitsspiel:

DEMO

Sie können previousElementSibling und nextElementSibling für nächste und vorherige Elemente verwenden und mit dem hier vorgeschlagenen Ansatz kombinieren: Ist es möglich, den numerischen Index des Elements in seinem Elternknoten ohne Schleifen zu erhalten? , können Sie oben und unten erhalten. So:

Sie können hier sehen, klicken Sie auf ein Element, um die umgebenden Elemente grün zu machen.

Ссылка

Es wird kein Fehler behandelt, wie wenn es Missings in der Umgebung gibt, aber da Ihre quadratischen Elemente alle umgeben sind, sollten Sie nicht mit dem Problem konfrontiert werden.

Im Allgemeinen sollten Sie versuchen, die Spiellogik von DOM zu trennen und alles in Ihren Spielobjekten (Arrays usw.) zu behandeln. In Ihrem Fall können Sie beispielsweise data attributes verwenden, um jedem Element von Interesse bestimmte Werte zuzuweisen, Arrays von Elementen zu erstellen und diese Datenattribute später zu verwenden, um zu prüfen, ob die Box umgeben ist oder nicht. Es hat Spaß gemacht, das Problem zu lösen. Daher habe ich Ihren Code geändert, indem ich ein paar Dinge hinzugefügt habe (Erstellen von Arrays und Zuweisen von Datenattributen und horizontale / vertikale Überprüfung). Jsfiddle: Ссылка

Und ich habe Ihre Funktion addLine so modifiziert, dass sie Aufruffunktionen aufruft:

In Arbeit arbeiten

Am Anfang wollte ich nur versuchen, die Logik von der Ansicht zu trennen, ich hätte nicht erwartet, so viel Code zu produzieren: - | Wie auch immer, obwohl es bei weitem nicht perfekt ist, denke ich, dass ein Anfänger das in gewisser Weise interessant finden könnte.

Um ein wenig über den Code selbst zu kommentieren, befindet sich die Logik in den Klassen (erste Hälfte des Javascript-Abschnitts), während die Ansicht der unordentliche Haufen von Funktionen am unteren Rand ist (zweite Hälfte des Javascript-Abschnitts). Die Zellenklasse und ihre Unterklassen (EdgeCell und CoreCell) repräsentieren die Rechtecke. Randzellen sind anklickbar, Kernzellen sind die größten.