Schiebe Puzzle

[Oliver77]

Hallo @all wollte mal mein neuestes Spiel vorstellen, wer kennt nicht das klassische Schiebe-Puzzle?
Gemacht mit purem Javascript und es nutzt die CSS3 Features wie Transition, Animation und die Verwendung der Einheiten vw und vh für die responsive Ansicht.
Mit Javascript werden je nach Fensterbreite und Höhe die Klassen Portrait oder Landscape am Body vergeben. Mit zum Beispiel
.portrait #hs-mode-wrap {
top:72.5vw;
} wird das ganze dann responsiv.
Da habe ich noch eine Frage, aufm Desktop-PC funktioniert es responsiv, auf'm Handy nur in der Portrait-Ansicht.

 var screenWidth = document.documentElement.clientWidth;
 var screenHeight = document.documentElement.clientHeight;

Ist der verantwortliche Code.

Link zum Spiel: https://oliver77.itch.io/puzzle-slider
Quellcode: Quellcode

Über Feedback würde ich mich freuen!

 

[tk1234]

Link zum Spiel: https://oliver77.itch.io/puzzle-slider

> Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
Das Problem wird sein dass der Code von einer anderen Domain kommt und diese Domain nicht auf den localStorage zugreifen darf - der Klick auf "Run game" funktioniert wohl noch, auf der Seite zum Auswählen von "4x4", "5x5" oder Highscore passiert nichts mehr (wobei das div-Elemente sind, die taugen ohnehin nicht als klickbare Elemente - das müssen Buttons sein).

 

[Oliver77]

Hallo das ist aber sehr seltsam auf'm PC, Laptop und Handy funktioniert das bei mir.
Habe diesen Codeschnippsel gefunden:

if (typeof localStorage !== 'undefined') {
    var x = localStorage.getItem('mod');
} else {
    // localStorage not defined
}

Soll ich den einbinden oder bringt das nichts?

Welchen Browser nutzt du?
Hat jemand anderes auch das Problem?

 

[Oliver77]

Hmm hab das gefunden: Link

 

[Oliver77]

Wenn ich das aktiviere, habe ich auch das Problem. Hmm was mache ich denn jetzt, LocalStorage deaktiveren für den Fall ?

 

[basti1012]

Den Code selber hosten und nicht im iFrame

 

[tk1234]

Soll ich den einbinden oder bringt das nichts?

Oder.

Welchen Browser nutzt du?

Vivaldi unter Mint 20.3. Firefox liefert aber eine ähnliche Meldung …

Wenn ich das aktiviere, habe ich auch das Problem. Hmm was mache ich denn jetzt, LocalStorage deaktiveren für den Fall ?

Wie basti1012 schon schrieb: die JS-Datei über die gleiche Domain ausliefern bzw. keine Frames verwenden. Alternativ könnte es evtl. helfen einen entsprechenden CSP-Header zu setzen bzw. den bestehenden zu ergänzen - zu bevorzugen wäre aber auf alle Fälle das Ausliefern aller Inhalte über eine Domain.

 

[Oliver77]

So hier nochmal das Spiel auf meinem Server:
zum Spiel.

 

[Oliver77]

Hi hier ein Beispiel:

.landscape #board {
    width:82.5vh;
    height:82.5vh;
    top:7.5vh;
}

% nimmt ja die Breite und funktioniert ja auch nicht immer. Oder verstehe ich da was falsch?

 

[Oliver77]

Vielen Dank für deine Mühe, die Aspect Ratio Eigenschaft kannte ich noch gar nicht. Das scheint mir eine clevere Lösung zu sein. Muss ich mal schauen, wie ich das realisieren kann. Die Berechnungen die auf der Breite und Höhe des Boards basieren, können ja bleiben.
Man kann für Android auch eine Orientation festlegen, Portrait in diesem Fall, leider klappt das nicht auf Safari.

 

[Oliver77]

hmm wenn ich https://caniuse.com/?search=orientation gucke ist es rot markiert bei Safari

 

[Oliver77]

Ich glaube du meinst CSS Orientation, ich meine aber Javascript.