HTML5 i przycisk "wstecz"

nowy_user · 21 Maja 2019

Hej tworzę sobie dla rozluźnienia gierkę w module HTML5 (gm 1.4) i mam jeden problem. Korzystając ze smartfona i otwierając gierkę na stronce, bardzo łatwo jest nieopatrznie kliknąć przycisk wstecz (ten wbudowany w telefonie, w prawym dolnym rogu urządzenia) i stracić cały zapis gry . Czy jest jakiś sposób, aby zablokować taką możliwość, albo aby pojawił się pop-up w stylu: “Czy na pewno chcesz cofnąć stronę? “Albo coś w tym stylu? Podejrzewam, że nie , bo to już zależy od oprogramowania telefonu, ale warto zapytać. Innym sposobem byłoby zapisanie stanu gry, i nawet niechcący klikniemy sobie wstecz, to szybko moglibyśmy pwrócić do poprzedniego momentu, ale problemem jest to, że gierkach htmll5 nie można zapisać stanu gry

gnysek · 21 Maja 2019


function myConfirmation() {
    return 'Are you sure you want to quit?';
}

window.onbeforeunload = myConfirmation;

Nawet nie musisz tego robić jako rozszerzenie JSowe do gry, tylko po prostu dać w kodzie strony w tagu <script>.

No i w grach HTML5 można zapisać grę, bodaj jako plik .ini i wtedy dane lądują w localstorage.

nowy_user · 21 Maja 2019

Niestety kod nie działa, wpisałem go do sekcji <script> do strony index.html (tej która jest tworzona przy generowaniu gry w HTMLu), następnie wrzuciłem na serwer i cóż... wciskam wstecz i normalnie przechodzi mi do wcześniejszej storny.

gnysek · 21 Maja 2019

@nowy_user wkleiłem to właśnie w konsolę na gmclanie w tym temacie forum i zadziałało, więc coś robisz źle. Może sprawdź logi w konsoli właśnie? btw. czym jest sekcja <script> ? tagów script na stronie może być wiele, nie ma jednej sekcji.

nowy_user · 21 Maja 2019

Hmm no to nie wiem co jest nie tak, przedstawiam poniżej kod:

<!DOCTYPE html>
<html lang="en">




    <head>
        <!-- Generated by GameMaker:Studio http://www.yoyogames.com/gamemaker/studio -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="pragma" content="no-cache"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>

        <!-- Set the title bar of the page -->
        <title>Created with GameMaker: Studio</title>

        <!-- Set the background colour of the document -->
        <style>
            body {
              background: #000000;
              color:#cccccc;
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
                      -ms-touch-action: none;
                      margin: 0px;
                      padding: 0px;
                      border: 0px;
            }
            :-webkit-full-screen #canvas {
                 width: 100%;
                 height: 100%;
            }
            div.gm4html5_div_class
            {
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            /* START - Login Dialog Box */
            div.gm4html5_login
            {
                 padding: 20px;
                 position: absolute;
                 border: solid 2px #000000;
                 background-color: #404040;
                 color:#00ff00;
                 border-radius: 15px;
                 box-shadow: #101010 20px 20px 40px;
            }
            div.gm4html5_cancel_button
            {
                 float: right;
            }
            div.gm4html5_login_button
            {
                 float: left;
            }
            div.gm4html5_login_header
            {
                 text-align: center;
            }
            /* END - Login Dialog Box */
            :-webkit-full-screen {
               width: 100%;
               height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="1511" height="850">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>

        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/f1_3.js?NWHAC=158296150">   </script>



        <script>window.onload = GameMaker_Init;</script>

<script> function myConfirmation() {
    return 'Are you sure you want to quit?';
}

window.onbeforeunload = myConfirmation;
</script>

    </body>
</html>

Tutaj dodałem ten kod prawie na samym końcu, ale próbowałem też na samym początku i bez skutku...

gnysek · 21 Maja 2019

Ale sprawdziłeś konsolę ? Mi to działa nawet jak zrobiłem plik .html który nie ma nic innego poza:

i wtedy wstecz albo zamknięcie karty pokazuje

Edit: na stackoverflow piszą, ze na chrome androidowym nie działa onbeforeunload, ale onunload

spróbuj wiec zrobić w tej ostatniej linijce:

window.onunload = window.onbeforeunload = myConfirmation;

nowy_user · 21 Maja 2019

Mi też działa, jak nie ma tam GMowej gry, też ten pop-up się pojawia. Problem gdy kod chcę umieścić w pliku index stworzynym przez GMa, wtedy przeglądarka nie reaguje na ten kod

gnysek · 21 Maja 2019

przeczytaj jeszcze mój edit na górze

nowy_user · 21 Maja 2019

ale ja testuję nawet na chromie desktopowym i jest to samo, gdy kod jest wpisany do pustego pliku indexu, to pop-up jest, jak wpisuje kod do pliku index z całym inwentarzem wygenerowanym przez GMa, to wtedy pojawia się problem i okienko się nie wyświetla

nowy_user · 21 Maja 2019

Robiłem testy, niestety ale ten kod:

<script type="text/javascript" src="html5game/f1_mobile.js?NLHYB=419161947"></script>
<script>window.onload = GameMaker_Init;</script>

sprawia, że kod z wyświetlającym się okienkiem nie pojawia się przy kliknięciu wstecz... czy mam jakieś alternatywy dla tego rozwiązania?

Pozdrawiam,

nowy_user

gnysek · 22 Maja 2019

a wpisz w konsoli window.onbeforeunload i sprawdź co jest przypisane. Może być tak, że GM nadpisuje tę funkcję, ale wtedy wystarczy jakiś setTimeout() i po sprawie. Albo dodać tego unloada jednak z GMa, jako rozszerzenie.

nowy_user · 22 Maja 2019

@gnysek , sprawdziłem konsolę, mam coś takiego :

Rzeczywiście dopisało do </script> == $0 . Co to może oznaczać?

gnysek · 22 Maja 2019

To jest źródło strony, nie konsola.

Taki jest przykładowy wynik w konsoli. A taki gdy funkcja jest przypisana:

nowy_user · 22 Maja 2019

hm.. otworzyłem konsolę, i wpisałem window.onbeforeunload, wyszło coś takiego:

image.png.bcdccf5ec3239f140be9b93493822529.png

Jak dla mnie to losowy ciąg znaków, ale może Gnysek ty coś więcej tu widzisz?

gnysek · 22 Maja 2019

No czyli GM przypisuje swój event. A spróbuj tak:

<script>
function myConfirmation() {
    return 'Are you sure you want to quit?';
}

function setOBU() {
    window.onbeforeunload = myConfirmation;
}

setTimeout(setOBU, 1000);
</script>

To po 1 sekundzie od załadowania strony powinno przypisać funkcję. Ewentualnie spróbuj też setInterval - to będzie ciągle co 1 sekundę nadpisywać funkcję gdyby GM też to robił.

(losowy ciąg to wynik obfuskacji kodu przez GMa, który zmienne i funkcje zamienia na krótkie unikalne stringi (najczęściej kolejne litery alfabetu).

nowy_user · 22 Maja 2019

Wygląda na to, że działa! obyło się bez setInterval - samo setTimeout wystarczyło Wielkie dzięki za pomoc! Teraz już nikt nie wyłączy mojej aplikacji przypadkowo

pozdrawiam

nowy_user

blackmaul · 22 Maja 2019

tylko co w wypadku jak 1s nie wystarczy? Sprawdź czy użycie defer nie pomoże

gnysek · 22 Maja 2019

Dlatego sugerowałem dodać to bezpośrednio jako rozszerzenie do gry w HTML5 i odpalać na jej początku. Wtedy będzie 100% pewności.

Konrad-GM · 22 Maja 2019

Panowie, a co z window.addEventListener? Można przecież podpiąć eventy tj. 'beforeunload' albo/i 'unload'. Jeżeli chodzi o attachEvent, to IE i canvasy to i tak odpadają, więc można pominąć w ogóle.

HTML5 i przycisk "wstecz"

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników