Messen Sie den Behälter aus und wählen Sie eine Waage
Berücksichtigen Sie die Abmessungen des Spielbehälters, anstatt davon auszugehen, dass das Fenster der spielbare Bereich ist. Ein ResizeObserver kann melden, wenn sich dieses Element ändert, einschließlich Änderungen, die durch das umgebende Layout und nicht durch eine Größenänderung des Ansichtsfensters verursacht werden. Entscheiden Sie, ob das Spiel Letterbox, Zuschneiden oder Reflow mit einem schmalen Seitenverhältnis verwenden soll, und machen Sie die Auswahl sichtbar, anstatt Kreise in Ovale zu strecken.
Berechnen Sie für ein festes virtuelles Spielfeld einen Skalierungsfaktor, der zu seiner Breite und Höhe passt, und zentrieren Sie dann den verbleibenden Raum. Konvertieren Sie die Zeigerkoordinaten durch die Umkehrung derselben Transformation, bevor Sie den Treffertest durchführen. Aktualisieren Sie bei einem Reflow-Spiel die Layoutanker und Kollisionsformen gemeinsam, damit die Steuerelemente nicht weiterhin Positionen der vorherigen Größe verwenden.
Ändern Sie die Größe weiterhin außerhalb der Simulationsschleife
Speichern Sie die Spielwelt in stabilen Einheiten und berücksichtigen Sie die Auflösung des Canvas-Hintergrunds, die CSS-Größe und das Pixelverhältnis des Geräts als Rendering-Probleme. Wenn sich die Größe ändert, aktualisieren Sie die Zeichenoberfläche und zeichnen Sie neu. Setzen Sie das Level nicht zurück und berechnen Sie den Objektstatus nicht neu, es sei denn, die Spielregeln erfordern dies. Diese Trennung verhindert, dass eine Größenänderung der Symbolleiste wie ein Neustart aussieht.
Testen Sie ein schmales und breites Ansichtsfenster sowie eine Desktop-Größen- und Ausrichtungsänderung, während das Spiel aktiv ist. Überprüfen Sie den Textumbruch, berühren Sie Zielpositionen und die Koordinatenkonvertierung. Der ResizeObserver-Leitfaden von MDN erläutert das Beobachten von Elementabmessungen und warnt davor, dass eine Änderung der beobachteten Größe innerhalb des Rückrufs zu Schleifen führen kann.
Fragen zu responsive Layouts für Browserspiele
Sollte ich die Größe der Spielwelt ändern, wenn sich die Leinwandgröße ändert?
Halten Sie die Simulationskoordinaten in der Regel stabil und passen Sie die Präsentation oder das Layout an. Wenn das Design das Spielfeld absichtlich ändert, aktualisieren Sie seine Regeln, Objekte und Eingabezuordnungen gemeinsam.
Warum ResizeObserver verwenden, anstatt nur die Fenstergröße zu ändern?
Die Größe eines Spielcontainers kann sich aufgrund des umgebenden Layouts ändern, ohne dass die Fenstergröße geändert werden muss. ResizeObserver meldet Änderungen der Elementabmessungen direkt.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden