Das Element beobachten, das das Spiel tatsächlich verwendet
Verwende ResizeObserver, wenn sich der Canvas-Container unabhängig vom Fenster ändern kann, etwa in einem geteilten Bereich oder auf einer Seite mit wechselnden Steuerelementen. Lies die Inhaltsgröße aus, aktualisiere die interne Canvas-Auflösung nur bei einer tatsächlichen Änderung und berechne den Maßstab zwischen CSS- und Spielweltkoordinaten neu.
Schreibe layoutwirksame Abmessungen nicht ohne Schutzbedingung in dasselbe beobachtete Element zurück. MDN weist darauf hin, dass eine Größenänderung in einem Observer-Callback eine Schleife auslösen kann. Plane die Arbeit sorgfältig und überspringe Schreibvorgänge, wenn sich die erwartete Größe nicht geändert hat. Trenne den Spiel-Viewport vom festen Weltkoordinatensystem, wenn das Layout die Darstellung durch Balken ergänzen statt verzerren soll.
Layout und Eingabe gemeinsam testen
Klicke oder tippe bei schmaler, breiter und gedrehter Ansicht auf ein Ziel nahe jeder Canvas-Kante. Prüfe, ob das Spiel dieselbe Weltposition erkennt, die durch die sichtbare Markierung angezeigt wird. Ändere die Größe während eines laufenden Levels und kontrolliere, ob Kamera oder Balkenstrategie greift, ohne Positionen unerwartet zu verschieben.
Beobachte den Container, statt anzunehmen, dass window.innerWidth jede Layoutänderung erfasst. Wenn eine mobile Tastatur oder die Browseroberfläche den verfügbaren Platz verändert, entscheide, ob das Spielfeld kleiner werden, seine Größe behalten oder scrollen soll. Teste das mit eingeblendeten Steuerelementen, denn sie können Platz beanspruchen, den das Spiel benötigt.
Fragen zu Größenänderungen bei Browsergames behandeln
Muss sich die Größe der Spielwelt bei jeder Größenänderung ändern?
Nein. Viele Spiele behalten feste Weltkoordinaten bei und ändern nur die Kamera oder ergänzen Balken. Eine Änderung der Weltgröße selbst kann Schwierigkeit, Kollisionen und Levelaufbau beeinflussen.
Wann ist ResizeObserver einem Fenster-Resize-Handler vorzuziehen?
Verwende ResizeObserver, wenn sich die Größe des relevanten Elements durch seinen Container oder das umgebende Layout ändern kann, auch wenn die Gesamtgröße des Fensters gleich bleibt.
Weiterlesen
Etwas nicht mehr aktuell? Korrektur melden