Skocz do zawartości

HTML5 i przycisk "wstecz"


nowy_user

Rekomendowane odpowiedzi

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 :(

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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.

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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

Odnośnik do komentarza
Udostępnij na innych stronach

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... :( 

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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

 

image.png

 

i wtedy wstecz albo zamknięcie karty pokazuje

image.png

 

 

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;

Odnośnik do komentarza
Udostępnij na innych stronach

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

Odnośnik do komentarza
Udostępnij na innych stronach

Robiłem testy, niestety ale ten kod:

 

      <!-- Run the game code -->
        <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

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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.

Odnośnik do komentarza
Udostępnij na innych stronach

  • Administratorzy

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

Odnośnik do komentarza
Udostępnij na innych stronach

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

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...