• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schiebe Puzzle

Oliver77

Mitglied
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.
Javascript:
 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!
poster.jpg
 

tk1234

Aktives Mitglied
> 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

Mitglied
Hallo das ist aber sehr seltsam auf'm PC, Laptop und Handy funktioniert das bei mir.
Habe diesen Codeschnippsel gefunden:
Javascript:
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

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

tk1234

Aktives Mitglied
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.
 

Sempervivum

Senior HTML'ler
aufm Desktop-PC funktioniert es responsiv, auf'm Handy nur in der Portrait-Ansicht.
Du meinst sicher, das vom Spiel unten etwas abgeschnitten ist, nicht wahr?
Ich bin da nicht in die Details deines CSS eingestiegen, aber nach meiner Erfahrung ist das ein generelles Problem:
Viewport-Units sind wunderbar, aber wenn Scrollbars ins Spiel kommen kann es zu Problemen kommen weil z. B. vw die Breite einschl. Scrollbar angibt. Oder, wenn man, wie bei dir, die Seite in einem mobilen Browser ansieht.

Ich habe da eine ganz einfache Demo gemacht:
Betrachtet man dies auf dem Handy ist unten etwas abgeschnitten und man muss scrollen.

Meistens lässt sich das Problem beheben indem man 100% statt 100vh verwendet, siehe hier:

(Bei den Demos habe ich mich auf das Problem mit der Ansicht im Querformat beschränkt, um es auch im Hochformat responsiv zu machen, müsste das CSS erweitert werden.)
 
Zuletzt bearbeitet:

Oliver77

Mitglied
Hi hier ein Beispiel:
CSS:
.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?
 

Sempervivum

Senior HTML'ler
% nimmt ja die Breite und funktioniert ja auch nicht immer.
Wenn es um width und height geht, nehmen diese jeweils das korrespondierende Maß des Elternelements als Bezugsgröße.
(Wenn ich mich richtig erinnere, war es beim Padding so, dass ein Prozentwert sich auf die Breite bezieht, auch wenn es sich um das Padding oben und unten handelt.)
Du berechnest sehr viele Maße. Das funktioniert auch und hinter den Kulissen macht es der Browser auch nicht anders. Es ist jedoch einfacher und weniger fehleranfällig, das Rechnen soweit wie möglich dem Browser zu überlassen und das Layout mit Flex oder Grid zu gestalten. Ich habe eine neue Demo gemacht, die genau das Layout realisiert, das Du hast. Damit wird bei mir auf dem Handy nichts mehr abgeschnitten und beim Ändern des Seitenverhältnisses und der Größe im Desktop-Browser passt sich alles an wie ich es mir vorstelle.

Bei den Kacheln dachte ich auch zunächst, dass man sie prima mit CSS-Grid anordnen könnte aber Du willst ja diese gleitende Animation haben, dann brauchst Du die absolute Positionierung. Allerdings, statt in absoluten px zu rechnen könntest Du dort Prozentwerte verwenden, ich erwarte, dass die Berechnungen dann ein ganzes Stück einfacher und übersichtlicher würden.
 

Oliver77

Mitglied
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.
 

Sempervivum

Senior HTML'ler
Ja, ich war jetzt auf CSS fixiert und meinte CSS-Orientation. Wenn es das in JS nicht gibt, kann man es aber aus Höhe und Breite leicht ermitteln.
 
Werbung:
Oben