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.
"localStorage" in window
. Ela vai verificar se o seu browser tem compatibilidade comlocalstorage
. Caso seja verdadeiro, experimente a seguirwindow.localStorage
para ver todo o conteudo dolocalStorage