1

Tenho o seguinte código javascript:

const player1 = "X";
const player2 = "O";
var playTime = player1;
var gameOver = false;
var pontuacaoX = 0;
var pontuacaoO = 0;
var chaveX = 'scoreX';
var chaveO = 'scoreO';
var valAcumuladoX = 0;

atualizaMostrador();
inicializarEspacos();

function atualizaMostrador(){
    if(gameOver) {return;}

    if(playTime == player1) {
        var player = document.querySelectorAll("div#mostrador img")[0];
        player.setAttribute("src", "_img/x.png");
    } else {

        var player = document.querySelectorAll("div#mostrador img")[0];
        player.setAttribute("src", "_img/o.png");    
    }
}

function inicializarEspacos(){
    var espacos = document.getElementsByClassName("espaco");
    for(var i = 0; i < espacos.length; i++){

        espacos[i].addEventListener("click", function(){
            if(gameOver) {return;}

            if(this.getElementsByTagName("img").length == 0){
                if(playTime == player1){

                    this.innerHTML = "<img src='_img/x.png' width='60px;' height='60px;'>";
                    this.setAttribute("jogada", player1);
                    playTime = player2;

                } else{

                    this.innerHTML = "<img src='_img/o.png' width='60px;' height='60px;'>";
                    this.setAttribute("jogada", player2);
                    playTime = player1;
                }
                atualizaMostrador();
                verificarVencedor();
            }
        });
    }
}

async function verificarVencedor(){

    var a1 = document.getElementById("a1").getAttribute("jogada");
    var a2 = document.getElementById("a2").getAttribute("jogada");
    var a3 = document.getElementById("a3").getAttribute("jogada");

    var b1 = document.getElementById("b1").getAttribute("jogada");
    var b2 = document.getElementById("b2").getAttribute("jogada");
    var b3 = document.getElementById("b3").getAttribute("jogada");

    var c1 = document.getElementById("c1").getAttribute("jogada");
    var c2 = document.getElementById("c2").getAttribute("jogada");
    var c3 = document.getElementById("c3").getAttribute("jogada");

    var vencedor = "";

    if((a1 == b1 && a1 == c1 && a1 != "") || (a1 == a2 && a1 == a3 && a1 != "") || (a1 == b2 && a1 == c3 && a1 != "")){
        vencedor = a1;   
    }else if((b2 == b1 && b2 == b3 && b2 != "") || (b2 == a2 && b2 == c2 && b2 != "") || (b2 == a3 && b2 == c1 && b2 != ""))
    {
        vencedor = b2;
    }else if(((c3 == c2 && c3 == c1) || (c3 == a3 && c3 == b3)) && c3 != "")
    {
        vencedor = c3;    
    }


    if(vencedor != ""){
        gameOver = true;

    if(vencedor == "X"){
        pontuacaoX = valAcumuladoX + 1;
        localStorage.setItem(chaveX, pontuacaoX);

    }else {
        pontuacaoO += 1;
        localStorage.setItem(chaveO, pontuacaoO);
    }
        await sleep(50);

    valAcumuladoX = localStorage.getItem(chaveX);

        alert("O Player: '" + vencedor + "' foi o(a) vencedor(a) da partida! \n Player X " + pontuacaoX + " vs " + pontuacaoO + " Player O. Clique em OK! e em \n PLAY 

AGAIN para jogar novamente!");


    document.getElementById('butao').style.display = "block";


    } else if(a1 != '' && a2 != '' && a3 != '' && b1 != '' && b2 != '' && b3 != '' && c1 != '' && c2 != '' && c3 != ''){

    await sleep(50);

    alert("Velha!");

    document.getElementById('butao').style.display = "block";


      }
}

function sleep(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}
/*
var resultadoScore = localStorage.getItem(chaveX);
alert(resultadoScore);
*/

Estou tentando guardar a pontuação de player1, que é o jogador X no caso. Após o play again eu não queria perder esse valor, por isso eu estive tentando utilizar sem sucesso algum o localStorage.

P.S.: não mandei o código HTML e o CSS, pois não sei se tem como carregar as imagens que estou utilizando.

8
  • 2
    E qual o problema? Dá algum erro? Já checou a compatibilidade com o navegador? compatibilidade localstorage Commented 22/08/2018 às 17:37
  • Experimente adicionar/imprimir esta linha no seu código "localStorage" in window. Ela vai verificar se o seu browser tem compatibilidade com localstorage. Caso seja verdadeiro, experimente a seguir window.localStorage para ver todo o conteudo do localStorage
    – lazyFox
    Commented 22/08/2018 às 17:49
  • @RicardoPontual não aparece erro nenhum no console, o problema é que eu quero guardar o ponto do jogador e ir atribuindo + 1 ponto toda vez que esse jogador mesmo jogador ganhar. Ai no exemplo eu estou tentando implementar a lógica para o player1(jogador X), depois aplicarei a mesma lógica na outra condição(else if), do player2(jogador O). Já testei no Chrome e Firefox. Commented 22/08/2018 às 17:58
  • @lazyFox vou tentar aqui Commented 22/08/2018 às 18:10
  • Prezado, vc disse que não mostra nenhum erro, então qual seria o valor mostrado quando vc chama o localStorage?
    – Sam
    Commented 22/08/2018 às 18:15

2 Respostas 2

1

Para trabalhar com localStorage (LS) você precisa fazer duas coisas:

  • Verificar se ele existe e atribuir o valor à variável que irá usá-lo sempre que a página for recarregada ou durante o processo.
  • Como o valor do LS é uma string, para realizar somas é preciso converter para tipo number, onde você pode usar parseInt(). Senão irá apenas concatenar, em vez de somar.

No seu caso, a variável valAcumuladoX deverá usar o valor guardado no LS

// atribuo o valor do LS a uma variável:
var LS_x = localStorage.getItem('scoreX');

// uso um operador curto para atribuir o valor a variável
// se LS_x for verdadeiro, o valor será o guardado no LS,
// caso contrário, será 0
var valAcumuladoX = LS_x || 0;

E onde você irá somar +1, use o parseInt():

pontuacaoX = parseInt(valAcumuladoX) + 1;

Então, o código todo deveria ficar assim:

const player1 = "X";
const player2 = "O";
var playTime = player1;
var gameOver = false;
var pontuacaoX = 0;
var pontuacaoO = 0;
var chaveX = 'scoreX';
var chaveO = 'scoreO';

var LS_x = localStorage.getItem('scoreX');
var valAcumuladoX = LS_x || 0;

atualizaMostrador();
inicializarEspacos();

function atualizaMostrador(){
    if(gameOver) {return;}

    if(playTime == player1) {
        var player = document.querySelectorAll("div#mostrador img")[0];
        player.setAttribute("src", "_img/x.png");
    } else {

        var player = document.querySelectorAll("div#mostrador img")[0];
        player.setAttribute("src", "_img/o.png");    
    }
}

function inicializarEspacos(){
    var espacos = document.getElementsByClassName("espaco");
    for(var i = 0; i < espacos.length; i++){

        espacos[i].addEventListener("click", function(){
            if(gameOver) {return;}

            if(this.getElementsByTagName("img").length == 0){
                if(playTime == player1){

                    this.innerHTML = "<img src='_img/x.png' width='60px;' height='60px;'>";
                    this.setAttribute("jogada", player1);
                    playTime = player2;

                } else{

                    this.innerHTML = "<img src='_img/o.png' width='60px;' height='60px;'>";
                    this.setAttribute("jogada", player2);
                    playTime = player1;
                }
                atualizaMostrador();
                verificarVencedor();
            }
        });
    }
}

async function verificarVencedor(){

    var a1 = document.getElementById("a1").getAttribute("jogada");
    var a2 = document.getElementById("a2").getAttribute("jogada");
    var a3 = document.getElementById("a3").getAttribute("jogada");

    var b1 = document.getElementById("b1").getAttribute("jogada");
    var b2 = document.getElementById("b2").getAttribute("jogada");
    var b3 = document.getElementById("b3").getAttribute("jogada");

    var c1 = document.getElementById("c1").getAttribute("jogada");
    var c2 = document.getElementById("c2").getAttribute("jogada");
    var c3 = document.getElementById("c3").getAttribute("jogada");

    var vencedor = "";

    if((a1 == b1 && a1 == c1 && a1 != "") || (a1 == a2 && a1 == a3 && a1 != "") || (a1 == b2 && a1 == c3 && a1 != "")){
        vencedor = a1;   
    }else if((b2 == b1 && b2 == b3 && b2 != "") || (b2 == a2 && b2 == c2 && b2 != "") || (b2 == a3 && b2 == c1 && b2 != ""))
    {
        vencedor = b2;
    }else if(((c3 == c2 && c3 == c1) || (c3 == a3 && c3 == b3)) && c3 != "")
    {
        vencedor = c3;    
    }


    if(vencedor != ""){
        gameOver = true;

    if(vencedor == "X"){
        pontuacaoX = parseInt(valAcumuladoX) + 1;
        localStorage.setItem(chaveX, pontuacaoX);

    }else {
        pontuacaoO += 1;
        localStorage.setItem(chaveO, pontuacaoO);
    }
        await sleep(50);

    valAcumuladoX = localStorage.getItem(chaveX);

        alert("O Player: '" + vencedor + "' foi o(a) vencedor(a) da partida! \n Player X " + pontuacaoX + " vs " + pontuacaoO + " Player O. Clique em OK! e em \n PLAY 

AGAIN para jogar novamente!");


    document.getElementById('butao').style.display = "block";


    } else if(a1 != '' && a2 != '' && a3 != '' && b1 != '' && b2 != '' && b3 != '' && c1 != '' && c2 != '' && c3 != ''){

    await sleep(50);

    alert("Velha!");

    document.getElementById('butao').style.display = "block";


      }
}

function sleep(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}
/*
var resultadoScore = localStorage.getItem(chaveX);
alert(resultadoScore);
*/
2
  • veja se eu entendi. Aqui var valAcumuladoX = LS_x || 0; eu estou verificando se o localStorage existe, certo? como já obtive ele logo acima aqui var LS_x = localStorage.getItem('scoreX'); ele será verdadeiro e então valAcumuladoX receberá a Key, cujo a mesma me possibilita acessar os pontos guardados, tipo uma query no bd isso? outra coisa, essa verificação se dá apenas no início, ou todo novo jogo ela é realizada, acredito ser a segunda, mas não tenho certeza e acho que falei merda acima, o acesso é dado através da key chaveX correto? Commented 24/08/2018 às 19:34
  • O valor ficará guardado no navegador mesmo que vc feche ele. var valAcumuladoX = LS_x || 0; verifica se ele existe, se não existe, será 0.
    – Sam
    Commented 24/08/2018 às 20:40
-1

Eu fiz funcionar, dá uma olhada no código abaixo:

Note que alterei para popular campos input, mas apenas para testar.

A pontuação de X é gravada corretamente através do código localStorage.setItem(chaveX, pontuacaoX) estava sendo guardada, só não estava sendo usada através da variável valAcumuladoX.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <label id="placarX">0</label> x <label id="placarO">0</label><br>
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="a1">
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="a2">
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="a3">
  <br>
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="b1">
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="b2">
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="b3">
  <br>
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="c1">
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="c2">
  <input class="espaco" size="2" value="" onclick="javascript:clicou(this);" type="text" id="c3">
  <br>
  <input id="butao" type="button" value="PLAY AGAIN" onclick="javascript:this.style.display='none';zeracampos();" style="display: none;">
</body>
<script>
  const player1 = "X";
  const player2 = "O";
  var playTime = player1;
  var gameOver = false;
  var pontuacaoX = 0;
  var pontuacaoO = 0;
  var chaveX = 'scoreX';
  var chaveO = 'scoreO';

  function zeracampos() {
    document.getElementById("a1").value = "";
    document.getElementById("a2").value = "";
    document.getElementById("a3").value = "";
    document.getElementById("b1").value = "";
    document.getElementById("b2").value = "";
    document.getElementById("b3").value = "";
    document.getElementById("c1").value = "";
    document.getElementById("c2").value = "";
    document.getElementById("c3").value = "";
  }

  function clicou(obj) {
    if (playTime == player1) {
      obj.value = player1;
      playTime = player2;
    } else {
      obj.value = player2;
      playTime = player1;
    }

  }

  atualizaMostrador();
  inicializarEspacos();

  function atualizaMostrador() {
    if (gameOver) {
      return;
    }

    if (playTime == player1) {
      var player = document.querySelectorAll("div#mostrador img")[0];
      //player.setAttribute("src", "_img/x.png");
    } else {

      var player = document.querySelectorAll("div#mostrador img")[0];
      //player.setAttribute("src", "_img/o.png");    
    }
  }

  function inicializarEspacos() {
    valAcumuladoO = 0;
    valAcumuladoX = 0;
    var espacos = document.getElementsByClassName("espaco");
    for (var i = 0; i < espacos.length; i++) {

      espacos[i].addEventListener("click", function() {

        atualizaMostrador();
        verificarVencedor();

      });
    }
  }

  async function verificarVencedor() {

    var a1 = document.getElementById("a1").value;
    var a2 = document.getElementById("a2").value;
    var a3 = document.getElementById("a3").value;

    var b1 = document.getElementById("b1").value;
    var b2 = document.getElementById("b2").value;
    var b3 = document.getElementById("b3").value;

    var c1 = document.getElementById("c1").value;
    var c2 = document.getElementById("c2").value;
    var c3 = document.getElementById("c3").value;

    var vencedor = "";

    if ((a1 == b1 && a1 == c1 && a1 != "") || (a1 == a2 && a1 == a3 && a1 != "") || (a1 == b2 && a1 == c3 && a1 != "")) {
      vencedor = a1;
    } else if ((b2 == b1 && b2 == b3 && b2 != "") || (b2 == a2 && b2 == c2 && b2 != "") || (b2 == a3 && b2 == c1 && b2 != "")) {
      vencedor = b2;
    } else if (((c3 == c2 && c3 == c1) || (c3 == a3 && c3 == b3)) && c3 != "") {
      vencedor = c3;
    }


    if (vencedor != "") {
      gameOver = true;

      if (vencedor == "X") {
        pontuacaoX = parseInt(valAcumuladoX) + 1;
        localStorage.setItem(chaveX, pontuacaoX);
        valAcumuladoX = localStorage.getItem(chaveX);
        document.getElementById("placarX").innerHTML = valAcumuladoX;

      } else {
        pontuacaoO = parseInt(valAcumuladoO) + 1;
        localStorage.setItem(chaveO, pontuacaoO);
        valAcumuladoO = localStorage.getItem(chaveO);
        document.getElementById("placarO").innerHTML = valAcumuladoO;
      }
      await sleep(50);

      alert("O Player: '" + vencedor + "' foi o(a) vencedor(a) da partida! \n Player X " + pontuacaoX + " vs " + pontuacaoO + " Player O. Clique em OK! e em \n PLAY AGAIN para jogar novamente!");

      document.getElementById('butao').style.display = "block";

    } else if (a1 != '' && a2 != '' && a3 != '' && b1 != '' && b2 != '' && b3 != '' && c1 != '' && c2 != '' && c3 != '') {

      await sleep(50);

      alert("Velha!");

      document.getElementById('butao').style.display = "block";

    }
  }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  /*
  var resultadoScore = localStorage.getItem(chaveX);
  alert(resultadoScore);
  */
</script>

</html>

3
  • não consegui entender a sua linha de raciocínio. pontuacaoX recebe valAcumuladoX. Commented 22/08/2018 às 18:20
  • Erro meu ali na minha mensagem, troco o texto assim que descobrir a resposta, ok? Estou testando seu código, em breve retorno. Commented 23/08/2018 às 15:49
  • @LuckasFujimoto gostaria de perguntar se testou meu exemplo depois que alterei minha resposta, se sim e ficou correto, poderia alterar seu voto para positivo? Commented 25/10/2018 às 14:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .