Magazyn HTML5 w akcji

W rozdziale:

Magazyn HTML5 w akcji

Zobaczmy, jak można wykorzystać Magazyn HTML5. Przypomnij sobie grę Halma z rozdziału o elemencie canvas. Ma ona jedną wadę: jeśli zamkniemy przeglądarkę w trakcie gry, wszystko stracimy. Dzięki Magazynowi HTML5 można zapisać potrzebne informacje w przeglądarce, aby po jej ponownym uruchomieniu odtworzyć poprzedni stan gry. Tutaj znajduje się działająca demonstracja. Wykonaj kilka ruchów, zamknij kartę, a potem otwórz ją z powrotem. Jeśli twoja przeglądarka obsługuje Magazyn HTML5, na stronie powinien zostać zapamiętany i odtworzony stan gry, włącznie z liczbą wykonanych ruchów, pozycjami pionków oraz tym, który z nich jest aktualnie zaznaczony.

Jak to działa? Za każdym razem, gdy w grze coś się zmienia, wywoływana jest poniższa funkcja:

function saveGameState() {
    if (!supportsLocalStorage()) { return false; }
    localStorage["halma.game.in.progress"] = gGameInProgress;
    for (var i = 0; i < kNumPieces; i++) {
	localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
	localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
    }
    localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
    localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
    localStorage["halma.movecount"] = gMoveCount;
    return true;
}

Jak widać użyty jest w niej obiekt localStorage do zapisywania czy trwa właśnie jakaś rozgrywka (wartość logiczna gGameInProgress). Jeśli tak, następuje iteracja przez pionki (gPieces — tablica JavaScript) i zapisanie numeru wiersza i kolumny każdego pionka. Następnie zapisywane są dodatkowe informacje o stanie gry, np. to który pionek jest wybrany (gSelectedPieceIndex — liczba całkowita), czy pionek ten znajduje się w środku potencjalnie długiej serii skoków (gSelectedPieceHasMoved — wartość logiczna) oraz jaką liczbę ruchów wykonano do tej pory (gMoveCount — liczba całkowita).

Podczas ładowania strony zamiast funkcji newGame() ustawiającej zmienne na domyślne wartości wywołujemy funkcję resumeGame(). Funkcja resumeGame() sprawdza czy stan gry jest przechowywany lokalnie. Jeśli tak, przywraca zapisane wartości przy użyciu obiektu localStorage.

function resumeGame() {
    if (!supportsLocalStorage()) { return false; }
    gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
    if (!gGameInProgress) { return false; }
    gPieces = new Array(kNumPieces);
    for (var i = 0; i < kNumPieces; i++) {
	var row = parseInt(localStorage["halma.piece." + i + ".row"]);
	var column = parseInt(localStorage["halma.piece." + i + ".column"]);
	gPieces[i] = new Cell(row, column);
    }
    gNumPieces = kNumPieces;
    gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
    gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
    gMoveCount = parseInt(localStorage["halma.movecount"]);
    drawBoard();
    return true;
}

Najważniejszą częścią tej funkcji jest pułapka, o której wspominałem wcześniej, a którą powtarzam jeszcze raz: Dane są przechowywane jako łańcuchy. Jeśli zapiszesz coś innego niż łańcuch, musisz to przekonwertować na właściwy typ. Przykładowo znacznik określający czy trwa właśnie jakaś rozgrywka (gGameInProgress) jest typu logicznego. W funkcji saveGameState() po prostu go zapisaliśmy i w ogóle nie przejmowaliśmy się typem:

localStorage["halma.game.in.progress"] = gGameInProgress;

Ale w funkcji resumeGame() musimy pobraną wartość traktować jako zwykły łańcuch, który trzeba przekształcić w logiczny typ danych:

gGameInProgress = (localStorage["halma.game.in.progress"] == "true");

Analogicznie liczba ruchów jest zapisywana w gMoveCount jako liczba całkowita. W funkcji saveGameState() zapisaliśmy ją tak:

localStorage["halma.movecount"] = gMoveCount;

Ale w funkcji resumeGame() musimy pobraną wartość przekonwertować na typ całkowitoliczbowy za pomocą funkcji JavaScript parseInt():

gMoveCount = parseInt(localStorage["halma.movecount"]);

Geolokalizacja HTML5 Kurs HTML5 Aplikacje offline HTML5