Wie kann ich wissen, wann es eine neue Linie auf einem Wheel of Fortune Board gibt?
Ich habe den folgenden Code hier , in dem Sie ein Wheel of Fortune-ähnliches Spiel mit einer Person spielen können (mehr meines Tests von Javascript-Objekten).
Mein Problem ist, dass die Zeilen, wenn der Bildschirm klein genug ist, nicht richtig zu brechen scheinen.
Zum Beispiel:
Wo der Kreis ist, habe ich ein "leeres" Quadrat. Der Grund, warum ich ein leeres Quadrat habe, ist so, dass, wenn der Bildschirm groß genug ist, das Quadrat als ein Abstand zwischen den Wörtern dient.
Gibt es einen Weg in meinem Code, um effizient zu wissen, ob das leere Quadrat am Ende der Zeile steht und es nicht angezeigt wird, und dann wird das Fenster in der Größe verändert, um es entsprechend anzuzeigen?
Der einzige Gedanke, den ich hatte, war, ein window.onresize -Ereignis hinzuzufügen, das messen würde, wie groß die Wörter sind, wie groß der Spielraum ist und basierend auf dieser Tatsache entscheiden, aber das scheint sehr ineffizient.
Dies ist mein Code zum Erstellen des Spielbretts (startet @ Zeile 266 in meiner Geige ):
%Vor%2 Antworten
Hier gehen Sie. Verwendet die element.offsetTop , um zu bestimmen, ob sich ein Element .space in der gleichen Zeile wie seine parent.previousSibling.lastChild oder parent.nextSibling.firstChild befindet.
Relevanter Code
Hinweis: In der Geige ändere ich die Hintergrundfarben, anstatt die Anzeige zu ändern, damit sie funktioniert.
%Vor%jsFiddle
Tags und Links javascript html css