Salvando e Carregando o Jogo com LocalStorage(Armazenamento Local)

Salvar o progresso do jogo é um recurso necessário. Talvez você queira também armazenar a pontuação e o apelido para um jogo acelerado e de sessão curta, tipo o jogo dino do google-chrome. LocalStorage ao resgate! Esse objeto global permite armazenar diferentes tipos de valores string e acessá-los depois. Esse recurso funciona tanto em navegadores modernos como em jogos exportados. Combinado com outros recursos acessíveis, nós podemos armazenar qualquer tipo de dados ou quase todos os tipos de dados!

Salvando Valores Simples

Salvar e lê valores string é muito fácil:

// Writing values to localStorage
localStorage.heroName = 'Isaac Newcat';
localStorage.heroTitle = 'The Allmighty';

// Reading values back
if ('heroName' in localStorage) { // was anything saved before?
    // Read the values
    this.name = localStorage.heroName;
    this.title = localStorage.heroTitle;
} else {
    // Do something with a missing data
    requestNameAndTitle();
}

Quando os dados lindos são números, datas, booleanos ou qualquer outra coisa, precisamos converter esses valores antes de usá-los.

// WRONG WAY
localStorage.heroLevel = 15;

// …later…
this.level = localStorage.heroLevel;
// this.level is now '15'. Wait, it's a string!
this.level += 1;
console.log(this.level);

Wrong use of localStorage

this.level agora é '151'! Isso definitivamente não erá o que esperávamos. E a razão é porque o localStorage pode apenas fazer armazenamento em strings. E por causa disso, precisamos converter os valores de localStorage para os tipos que precisamos.

// BETTER WAY
localStorage.heroLevel = 15;
// …later…
this.level = Number(localStorage.heroLevel);
// this.level is now 15. It's a number!
this.level += 1;
console.log(this.level);

Proper use of localStorage

Aqui está como podemos converter os objetos do tipo Date e do tipo Boolean:

localStorage.gameStartTime = new Date();
localStorage.hardcoreMode = false;

// later…

this.startTime = new Date(localStorage.gameStartTime);
this.hardcoreMode = localStorage.hardcoreMode === 'true';

Armazenando Objetos Complexos

Para qualquer coisa além das simples strings e números, precisamos de funções especiais para a codificação e decodificação. Mas como o javascript é marivilhoso, temos uma função assim para isso! Elas sãoJSON.parse(encodedString) e JSON.stringify(complexObject).

var inventory = [{
    name: 'A rusty axe',
    type: 'weapon',
    twoHanded: true
    durability: 0.87,
    damage: [8, 11],
    effects: {
        poison: 1,
        duration: 5
    },
    icon: 'BattleAxe_Old'
    stack: 1
}, {
    name: 'Health Potion',
    type: 'consumable',
    effects: {
        regen: 5,
        duration: 15
    },
    icon: 'Potion_Red',
    stack: 15
}, {
    // …other stuff
}];

localStorage.heroInventory = JSON.stringify(inventory);

// …later

this.inventory = JSON.parse(localStorage.heroInventory);

Isso já é o bastante para coisas complexas! Aqui nós codificamos um array, mas você pode passar tanto arrays como objetos com JSON.stringify.

O que não pode ser codificado, as functions, os objetos do tipo Date, referências cíclicas. Mas em muitos casos você não precisará salvar dados assim para o seu jogo!